I tried to print something using window.print();
It is working, but whenever I click my print button for the second time without reloading the page (which is unnecessary),
the window print will appear again even though I already click on close button.
After the code runs until $('#main').show(); , it goes back to window.print(); again.
And if I tried for the third time, it will reload the window print 3 times and so on.
I'm not sure how to terminate the query after I close the window for the first time.
I do not want the window to be reloaded again.
This is my code;
self.QrCode = ko.observable("../Content/img/qr-code (1).png");
self.GetQrCode = function (obj) {
var ID = obj.Id;
$.ajax({
url: '/QC/GetQrCode',
cache: false,
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: { rejectsId: ID },
success: function (rejectsId) {
self.QrCode(rejectsId.QRCode);
self.PrintQrCode();
}
});
}
self.PrintQrCode = function (obj) {
$('#main').hide();
$('#QrCodePrint').show();
$("#test").on("load", function () {
window.print();
$('#QrCodePrint').hide();
$('#main').show();
return false;
});
}
Related
I am using a setTimeout loop pulling data from database every 5 seconds. Here is part of my javascript:
(function setDailystats() {
$.ajax({
type: "GET",
contentType: 'application/json',
url: '#Url.Action("GetDailyStats", "myControllerName")',
async: true,
success: function (data) {
$("#todayAppts").text(data.appts);
$("#todayAlerts").text(data.alerts);
console.log("Update daily stats");
setTimeout(setDailystats, 5000);
}
});
}());
The problem is the loop continue running even when I am away from the page. I want to stop the loop when page inactive, restart the loop when page active.
I have tried to use ifvisible.js:
var isPageActive = true;
ifvisible.setIdleDuration(10);
ifvisible.on("idle", function () {
isPageActive = false;
});
ifvisible.on("wakeup", function () {
isPageActive = true;
});
(function setDailystats() {
if (isPageActive) {
$.ajax({
type: "GET",
contentType: 'application/json',
url: '#Url.Action("GetDailyStats", "myControllerName")',
async: true,
success: function (data) {
$("#todayAppts").text(data.appts);
$("#todayAlerts").text(data.alerts);
console.log("Update daily stats");
}
});
};
console.log("Check page activity");
setTimeout(setDailystats, 5000);
}());
It works fine. I am just wondering if there is any other better way to do it. There is still stuff (ifvisible.js, check every 5 seconds ...) running in the background all the time.
Is this what you need?
$(window).blur(function() {
isPageActive = false;
});
$(window).focus(function() {
isPageActive = true;
});
You could avoid using a 3rd party lib and use something among these lines here
You have few options with the widnow.focus/window.blur as well as document.hidden. It might end up being cleaner and less dependent on another lib. Hope this helps.
Basically, I have a page in which I include a javascript file. in the js file
i have 2 functions called function a() and function b(). Inside Function "A" I called the popup to be loaded. After the child popup is loaded I have a function called interactive which makes an ajax call. if the result is true I need to close the child page and then call the function "B" in the main page.Below is the sample code. The problem is I am not able the refer the function "B" in the child page and make a call to the main page.
function a() {
var strWindowFeatures = "location=yes,scrollbars=yes,status=yes";
var URL = path of the url
var win = window.open(URL, "_blank", strWindowFeatures);
}
function b() {
calling a
function to relaod the page. //
}
function InterActive(encodeText) {
url: url
cache: false,
async: false,
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: {},
dataType: 'json',
success: function (data) {
if (data === true) {
alert('record updated');
window.close();
// i need to call the function b() in the child page..
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR);
alert(textStatus);
alert(errorThrown);
}
});
You can do it in such a way that the window you open receives an onbeforeunload event that calls your reload function in the parent window.
An example would be the following
function reloader() {
if (!reloader.id) {
reloader.id = 0;
}
document.querySelector('#reloadCount').innerHTML = ++reloader.id;
}
function openWindow() {
var win = window.open('about:blank', 'blank', 'width=640,height=480');
win.document.write('<html><head><body><h1>Reloads on close</h1></body></html>');
win.addEventListener('beforeunload', function() {
reloader();
return true;
});
}
Which you can test on jsfiddle here (window.open is not allowed in the stacksnippets)
I think you need to add function b() in child page so it's easily access,So please check with this.
I'm trying to call an ajax before user leaving a page, this what i have done so far. But it doesn't even hit the ajax page.
This is what i have done so far.
window.onbeforeunload = closeIt();
function closeIt()
{
var key="save-draft";
$.ajax({
url: "app/ajax_handler.php",
type:"GET",
data:{key:key},
success: function(data) {
return data;
}
});
}
I Have tried this one also both failed in my case.
$( window ).unload(function() {});
The only way I think is to let the user know that it's a process on background with a confirm message, that will block the exit until user click on Accept or you've got the response.
Something like that:
window.onbeforeunload = closeIt();
function closeIt()
{
/*var key="save-draft";
$.ajax({
url: "app/ajax_handler.php",
type:"GET",
data:{key:key},
success: function(data) {
return data;
}
});*/
setTimeout(function() {
return confirm("There is a process that isn't finished yet, you will lose some data. Are you sure you want to exit?");
}, 1000);
}
i need close the user session with ajax, when this close the nav or tab of my app. For this i'm using the event beforeunload, the issue is when i reload the page with F5(cmr+r, ctrl+r) with this the nav open the warning diag and i don't need this.
$(window).bind('beforeunload',function (e) {
var message = 'Are you sure you want to leave?';
return message;
}
$(window).bind('unload', function () {
var dataStatus = $('button[name="status"]').attr('data-status');
if (dataStatus == 'online') {
var req = $.ajax({
url: 'mi-url',
type: 'POST',
async : true,
data: {data: JSON.stringify({user_id: <?php echo $user->getId() ?>})},
dataType: "JSON"
});
}
});
Waiting for replys, thanks.
You can't differentiate close tab and tab unload/reload. Instead your old approach, you can set interval 5 minutes or some meaningful time period, and send a notification to the server about session.
On my portfolio website, I am using a jQuery .ajax() call to pull in my portfolio pieces via XML.
My issue is that after a fresh page load, if the "portfolio" link is clicked first, then the portfolio pieces are pulled in normally. If, after a fresh page load, the "portfolio" link is clicked after any of the other links, then the portfolio pieces are pulled in twice.
You can see the issue for yourself on my site: Transhuman Creative
Here is the code that figures out which navigation link is clicked based on its rel attribute:
$("#nav a").click( function () {
if($(this).attr("rel") == "blog") {
return false;
}else{
$("#nav a").removeClass("selected");
$(this).addClass("selected");
setBlock($(this).attr("rel"));
}
});
After a link is clicked, it is processed by theThe setBlock() function, which hides existing content and calls the processBlock() function to load content.
function setBlock(block) {
if(firstNav) {
processBlock(block);
firstNav = false;
}
else
{
if($(".tab").length > 0 && $(".tab").is(":hidden") == false) {
$(".hidable").fadeOut();
$(".tab").fadeOut(function(){
processBlock(block);
});
}
else {
$(".hidable").fadeOut(function (){
processBlock(block);
});
}
}
}
The processBlock() function waits 500ms to let the animation finish, then either shows the block of content or calls the loadItems() function to load the portfolio data.
function processBlock(block) {
var s = setInterval( function () {
if (block == "portfolio") {
loadItems();
}else{
$("." + block).fadeIn();
}
clearInterval(s);
}, 500);
}
And finally, the .ajax() call is in the loadItems() function. After loading the porfolio data from the XML file, it calls the tabFade() function to parse the data and generate the HTML for the portfolio pieces. The variable firstCall is initially set to true, and it is meant to prevent the portfolio data from being reloaded if it's already in memory:
function loadItems() {
if (firstCall) {
$.ajax({
type: "GET",
url: "data/portfolio.xml?ver=1.11",
cache: false,
dataType: "xml",
success: function(xml){
$(xml).find('item').each(function(){
$("#main").append(addItem($(this)));
});
tabFade();
firstCall = false;
}
});
}else{
tabFade();
}
}
Any thoughts on what might be causing the double load issue? Thanks for your help.
I believe it would be better to set the firstCall variable right inside of the if condition. Otherwise it waits 500+ milliseconds before being set and only gets set once the ajax request completes.
function loadItems() {
if (firstCall) {
firstCall = false; // Put the assignment here before waiting.
$.ajax({
type: "GET",
url: "data/portfolio.xml?ver=1.11",
cache: false,
dataType: "xml",
success: function(xml){
$(xml).find('item').each(function(){
$("#main").append(addItem($(this)));
});
tabFade();
//firstCall = false;
}
});
}else{
tabFade();
}
}
Try using setTimeout instead of setInterval. You probably want to use setTimeout anyway as I don't think you want to run the code more than once?
It could be that it's running that code twice and making two ajax calls as it hasn't responded within 500ms.