window.print() function pop up print screen but i want that before pop up window.print myFunction() should finish its process. So that my program wait to finish myFunction.
(function () {
var beforePrint = function () {
console.log('Functionality to run after printing');
myFunction();
//window.print() pop up should wait until myFunction() finish
};
var afterPrint = function () {
console.log('Functionality to run after printing');
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function (mql) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
}());
You can use jquerys deferred/then functionality to do stuff before print.
Like so:
$(function() {
var filterResolve = function() {
var defer = $.Deferred(),
filtered = defer.then(function(value) {
//do lengthy stuff here
alert('Before Print');
return true;
//or false if you don't want to print
});
defer.resolve();
filtered.done(function(value) {
if (value == true) {
window.print();
//here you can log that the print dialog was shown to the user
//but not if he hit OK or Cancel
}
});
};
$("button").on("click", filterResolve);
});
But to my knowledege it is not possible (in any browser) to detect if anything was printed. Not even if the user clicked OK or CANCEL in the print dialog.
Oh yeah, here's a quiet useless plunker
Related
I found what looks to be a bug in Microsoft Edge. The callback to setInterval() is sometimes called while print() is executing. This results in 2 JavaScript functions running in parallel which shouldn't be allowed, right?
The behavior can be observed with this simple test app.
index.html:
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<input type="button" onclick="printPage()" value="Print"/>
</body>
</html>
script.js:
var isPrinting = false;
setInterval(function tick() {
if (isPrinting) {
alert('Interval callback called conurrently with click handler!');
}
}, 10);
function printPage() {
isPrinting = true;
try {
print();
}
finally {
isPrinting = false;
}
}
https://plnkr.co/edit/eKMQEHjRiXzl1vzjzIEN
When I click on the "Print" button, I do not expect to see an alert, but I do observe an alert.
Environment: Microsoft Edge 38.14393.0.0, Windows 10
Is this a bug or do I not understand something?
Yes this is a confirmed bug. I'm a bit surprised that no one has apparently reported this before me.
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10230373/
Here is how I am working around the bug.
(function () {
var isPrinting = false;
var _setInterval = window.setInterval;
var _print = window.print;
var queue = [];
window.setInterval = function (fn, delay) {
var params;
if (arguments.length > 2) {
params = arguments.slice(2);
}
var wrapper = function () {
if (!isPrinting) {
fn.apply(null, params);
}
else {
//console.log('queuing...');
// Queue only one callback per setInterval() call. This mimics Chrome and IE11's behavior.
if (!wrapper.queued) {
wrapper.queued = true;
queue.push(wrapper);
}
}
};
_setInterval(wrapper, delay);
};
window.print = function () {
//console.log('print begin');
isPrinting = true;
try {
_print.apply(this, arguments);
}
finally {
//console.log('print end');
isPrinting = false;
if (queue.length > 0) {
var _queue = queue; // Save the contents of the queue so that we have them when the timeout callback executes.
setTimeout(function () {
_queue.forEach(function (wrapper) {
wrapper.queued = false;
wrapper();
});
});
queue = [];
}
}
}
})();
Let me explain what the trouble is. I have two functions: compute(); and discount_compute();. When the page firsts load both functions get executed once (OK, since discount_compute() is part of compute so it always runs when compute() is executing). When I open the #autobid-panel (it is set on display:none initially) the function discount_compute runs 1 time because of the $('#autobid').on('click', function(), but then it also runs 2 more times because of the '[data-slider]').on('change.fndtn.slider'). Btw everytime this autobid-panel is closed or opened the slider is initialized again. I only want the discount_compute() to run once when #autobid-panel is opened. Any ideas?
function compute() {
//first function
};
function discount_compute() {
//second function
};
$(document).ready(function($) {
$('.price').change(compute).change();
$('#autobid').on('click', function() {
if ($(this).is(':checked')) {
$('#autobid-panel').removeClass("hide");
$(document).foundation('slider', 'reflow');
discount_compute();
} else {
$('#autobid-panel').addClass("hide");
$(document).foundation('slider', 'reflow');
}
});
$('#discount').on('change', function(){
var value = $(this).val();
$('.range-slider').foundation('slider', 'set_value', value);
discount_compute();
});
$('[data-slider]').on('change.fndtn.slider', function(){
discount_compute();
});
});
Thank your for your help!
You don't really explain the reasoning of the data-slider or why you even call discount_compute(); there if you don't want to run it.
One dirty hack you can do is something to this effect:
function compute() {
//first function
};
function discount_compute() {
//second function
};
var harRun=false;
$(document).ready(function($) {
$('.price').change(compute).change();
$('#autobid').on('click', function() {
if ($(this).is(':checked')) {
$('#autobid-panel').removeClass("hide");
$(document).foundation('slider', 'reflow');
if(hasRun != true) {discount_compute(); hasRun=true;}
} else {
$('#autobid-panel').addClass("hide");
$(document).foundation('slider', 'reflow');
}
});
$('#discount').on('change', function(){
var value = $(this).val();
$('.range-slider').foundation('slider', 'set_value', value);
discount_compute();
});
$('[data-slider]').on('change.fndtn.slider', function(){
if(hasRun != true) {discount_compute();}
});
});
In this way, once hasRun is set to true you no longer call discount_compute().
unfortunately $(document).foundation('slider', 'reflow'); fires a change event, so there isn't any nice way.
one way is to off the event before reflow and on straight after:-
function compute() {
//first function
};
function discount_compute() {
//second function
};
$(document).ready(function($) {
$('.price').change(compute).change();
$('#autobid').on('click', function() {
if ($(this).is(':checked')) {
$('#autobid-panel').removeClass("hide");
$('[data-slider]').off('change.fndtn.slider', discount_compute);
$(document).foundation('slider', 'reflow');
$('[data-slider]').on('change.fndtn.slider', discount_compute);
discount_compute();
} else {
$('#autobid-panel').addClass("hide");
$(document).foundation('slider', 'reflow');
}
});
$('#discount').on('change', function(){
var value = $(this).val();
$('.range-slider').foundation('slider', 'set_value', value);
discount_compute();
});
});
I am working on button event called clear, this button will reload the page when ever it clicks:
var buttons = {
clearbtn: function (e) {
location.reload();
}
};
Here is my test code:
test('Clear button test case', function () {
var $clear = $('#clearbtn');
var callcount = 0;
location.reload = function () {
debugger;
console.log(callcount);
callcount++;
};
$clear.trigger('click');
ok(callcount === 1);
});
The Qunit Page is reloading again and again and my test case is not excuting at all?
The prompt popup that occurs when I click the button with class 'alert3' does not close.
CLICKMEMEMEMEMEME
and this is the function that I am invoking:
<script>
$(document).on("click", ".alert3", function(e) {
bootbox.prompt("What is your name?", function(result) {
if (result === null) {
Example.show("Prompt dismissed");
} else {
Example.show("Hi <b>"+result+"</b>");
}
});
});
</script>
The popup does not close because you have an error in the callback function, so it crashes before bootbox can make the popup disappear.
The best guess is that Example is not defined in your code. Maybe you took it on the Bootbox website, they are using a javascript object called Example.
If you want to show the result with your callback function, you can add this to your html:
CLICKMEMEMEMEMEME<br/>
<p id='result'></p>
And then change your javascript:
<script>
$(document).on("click", ".alert3", function(e) {
bootbox.prompt("What is your name?", function(result) {
if (result === null) {
$('#result').html("Prompt dismissed");
} else {
$('#result').html("Hi <b>"+result+"</b>");
}
});
});
</script>
Prompt popup in bootbox.js
That is not working because Example function is not defined there.We need to first defined them that using current selector value and text associated with them.here $("#result") is used to show error message in particular div.
html code:
<p>Click here-><a class="alert" href=#>Alert!</a></p><p id='result'</p>
code:
var Example = (
function()
{
"use strict";
var elem,
hideHandler,
that = {};
that.init = function(options) {
elem = $(options.selector);
};
that.show = function(text) {
clearTimeout(hideHandler);
$("#result").html(text);
$("#result").fadeIn();
hideHandler = setTimeout(function() {
that.hide();
}, 4000);
};
that.hide = function() {
$("#result").fadeOut();
};
return that;
}());
I am trying to display a loading spinner when a user clicks on the submit button. I tried implementing the solution provided here, but it's not working.
I have validated that the function is being called and that the target div is being found by jQuery by tossing in an alert(spinner.innerHTML) as follows:
<script type="text/javascript">
$(document).ready(function () {
var spinner = $("div#spinner");
});
var spinnerVisible = false;
function showProgress() {
if (!spinnerVisible) {
alert(spinner.innerHTML);
spinner.show();
spinnerVisible = true;
}
};
function hideProgress() {
if (spinnerVisible) {
spinner.hide();
spinnerVisible = false;
}
};
</script>
As expected, when I click on my button, I get an alert window with the text "Loading..." which is the text from my div. However, if I add a second alert after the call to spinner.show(); it doesn't pop up, which leads me to believe that the call to spinner.show(); is causing jQuery to fail.
This is my first foray into jQuery, so I'm struggling with how to debug this and find out what is breaking.
Based on the debugging procedures, it looks like your project has not included jQuery library.
Please enable jQuery in your project to make use of jQuery functionality.
you should define spinner correctly(i.e. in global)
<script type="text/javascript">
var spinner;
$(document).ready(function () {
spinner = $("div#spinner");
});
var spinnerVisible = false;
function showProgress() {
if (!spinnerVisible) {
alert(spinner.innerHTML);
spinner.show();
spinnerVisible = true;
}
};
function hideProgress() {
if (spinnerVisible) {
spinner.hide();
spinnerVisible = false;
}
};
</script>
You're trying to access the spinner variable without having scope to it in the function.
<script type="text/javascript">
$(document).ready(function () {
var spinner = $("div#spinner");
});
var spinnerVisible = false;
function showProgress() {
var spinner = $("div#spinner");
if (!spinnerVisible) {
alert(spinner.innerHTML);
spinner.show();
spinnerVisible = true;
}
};
function hideProgress() {
var spinner = $("div#spinner");
if (spinnerVisible) {
spinner.hide();
spinnerVisible = false;
}
};
</script>