Close pop up and refresh parent page javascript - javascript

i want to close pop up and refresh parent but after few seconds delay to make sure all data is received. currently i have the following
function closeAndRefresh(){
setTimeout(function()
{
window.open('/{!currSubId}','_top');
window.location = window.location.href;
return true;
},5000)}
This code refreshes the parent but inside the popup, so the pop up does not close, rather the parent shows refreshed - in pop up

So move the pop up outside of the timeout, give it a name, call close, and reload.
function closeAndRefresh(){
var winPop = window.open('/{!currSubId}','_top'); //load pop up give it a name
window.setTimeout(function(){
winPop.close(); //close pop up
window.location.reload(true); //refresh current page
},5000);
}
You could just use an Ajax call to the server and not have to deal with a pop up and wondering if the pop up blocker will block it or not knowing if the call completetd. When the call comes back from the call, you can just reload the page.

Related

jQuery show loader while page get reloading

I have created functionality using jQuery, so when user click on button it will make clear filter on that page and reload page.
While clearing filter loader is showing on page, but when reload page line come then that loader is getting hide and page is reloading.
What I want is loader must displayed when page getting reload.
Below is some code.
var finalURLStrings = urlFinal.replace("isInboxstring=True", "isInboxstring=False");
var finalURLString = finalURLStrings.replace("isInbox=True", "isInbox=False");
$("#loading").show();
window.location.href = finalURLString; // while executing this line I still want to show loader which get hide here.
The window.location object can be used to get the current page address (URL) and to redirect the browser to a new page and New page always reload and loading any spinner not show in new page.
so use this code below code:
$("#loading").show();
$(document).ready(function () {
$("#loading").hide();
});

Why is my page not rendering the data I need when trying to page redirect in jQuery/JS?

The id's #switchtopagetwo and #switchtoindex are assigned to buttons that do what you can infer from the id's names. What I want to do is on click of the button, I want to redirect to the new page via window.location = url; and then run a function that renders some data on the page via pagetwoData() or pageoneData(), depending on where I am at the moment.
$('#switchtopagetwo').on('click', function () {
window.location = 'pagetwo.html';
pagetwoData();
});
//pagetwo.html button
$('#switchtoindex').on('click', function () {
window.location = 'index.html';
pageoneData();
});
When I comment out window.location, the functions run and I can see the data on the screen, but there's no page redirect even on clicking the button. When I click on the buttons fast enough, I can see the function's data being rendered for a split second and then disappearing. When I console.log certain items, I can see the console.log's appearing in the console and then disappearing the same way.
Clearly there is an issue with window.location. Is there better code I can use for clicking the button, redirecting the page to load the page-2 data, then clicking the button again to go back to page-1 data?
When you redirect to a new page, the entire page context is abandoned and replaced by the new page. Nothing which happens on the source page after that redirect can be relied upon to still happen. But anything on the target page that's loading will happen.
Instead of trying to get Page1 to tell Page2 to do something when it loads, just have that something happen on Page2. For example:
// on index.html
pageoneData();
$('#switchtopagetwo').on('click', function () {
window.location = 'pagetwo.html';
});
// on pagetwo.html
pagetwoData();
$('#switchtoindex').on('click', function () {
window.location = 'index.html';
});
Basically, for any given page, whatever you want to happen on that page when it loads should be executed on that page when it loads.

Print on new tab 'about:blank' and close after printed like datatable lib

I like the way datatable does the printing, by clicking the PRINT button, new window opens (not in popup window), than the print prompt appears, after you click PRINT or CANCEL the opened tab closes!
I want to modify, or to be honest, I want to create my own customized script code!
So all i did till now is that i found out how to open a new about:blank page:
PRINT
So how to populate it inside of blank page with a table with data, and how to close that page automatically after finishing printing? What is the JavaScript behind it?
Like this example: https://jsfiddle.net/ms85e7zo/
Notice! I don't want to use datatable library for this, I want just a clear concept how it is possible to do that!
If you check the source of the DataTables print button you can see the logic which achieves the effect you're after. Note that win is a reference to the popup which was created and had the content injected in to.
var autoPrint = function() {
if (config.autoPrint) {
win.print(); // blocking - so close will not
win.close(); // execute until this is done
}
};
if (navigator.userAgent.match(/Trident\/\d.\d/)) { // IE needs to call this without a setTimeout
autoPrint();
} else {
win.setTimeout(autoPrint, 1000);
}
In short, all they do is call print(), which blocks the main browser thread, and then immediately afterwards call close(). As a result, no matter if the user decided to go ahead with the print or cancel it, as soon as execution resumes after the modal is dismissed the new window is closed. The setTimeout() is only to ensure that all styles and data has been loaded in IE before printing.
It's a simple and effective solution.

on print click how to open another page?

I have written following function to call another page when i will click print button. but when i click on print button it opens current page instead of the one which i want to call.
function printme(tripId, requestId, Ecommerce) {
//alert("print is called");
alert(tripId);
alert(requestId);
alert(Ecommerce);
window.location.href = "ViewTripConformationPrint.cshtml?";
window.print();
//workaround for Chrome bug - https://code.google.com/p/chromium/issues/detail?id=141633
if (window.stop) {
location.reload(); //triggering unload (e.g. reloading the page) makes the print dialog appear
window.stop(); //immediately stop reloading
}
return false;
}
The problem you're having is that the code after you set window.location.href is executed immediately. The page isn't loaded and then the code continues... you code continues until the end of the function and then window.location.href is actually loaded and processed. If you see what I mean.
You could try moving your code (window.print, if window.stop, etc) into ViewTripConformationPrint.cshtml (as part of onload).

backbone single page application alert user when URL changes

I am working on a single page application at the moment, and I wanting to show some UI is a user, refreshes the page, closes the tab, or navigates away, the reason for this is doing any of these will cancel any active uploads, and I want the user to know that.
So far I have,
$(window).on('beforeunload', function() {
alert("!!!");
return null;
});
This only seems to fire when I refresh the page, though. Is there away to hook this in to my router? I have a global var called App.Uploading, if that is true, I want to fire a method every time a route is accessed is that possible?
There is a JQuery unload function you can use:
$( window ).unload(function() {
console.log('preventing unload!');
return false;
});
document.location = 'http://www.google.com';

Categories