I'm trying to add a simple popup window to my Django app. How it works is when I press the Yes button, it sends a request to my Django views. However, I want it to automatically close after I press Yes. Unfortunately, the problem with putting it directly in my "click" function is that it closes the window altogether without sending a request to my Django views.
That is why I wanted to add a variable "clicked". After the button is clicked, I want it to change the variable value to "true" so that I can run an if statement ultimately to close the window. For some reason, the popup window automatically closes when I try to open it. My guess is that the if statement is not working properly? Thank you for your help!
$(document).ready(function(){
var clicked=false;
var deleteid;
$('#yes').click(function(){
deleteid = $(this).attr("data-deleteid");
$.get ('../../delete_function/', {delete_id:deleteid}, function(data){});
clicked = true;
});
if (clicked = true){
window.close();
}
});
Close the window in the callback function of $.get.
$.get ('../../delete_function/', {delete_id:deleteid}, function(){
window.close();
});
Your if (clicked == true) is only running when the page is loaded, because it's not inside any event handler. At that point, the button obviously hasn't been clicked yet, so it doesn't do anything.
If you call window.close() directly from the click handler, it will close the window before the AJAX call has a chance to run. When you close a window, all script it was running, including any AJAX operations that were queued, are killed.
Related
I am developing a web application that our client calls with something like:
var result = window.showModalDialog('http://example.com/myapp','My webapp', 'dialogtop=0;dialogleft=0;dialogwidth:' + (window.screen.width - 200) + ';dialogheight:' + (window.screen.height - 200) + ';status=no;resizable=yes;scroll=yes;maximize:yes;minimize:no;' );
and when they close this modal dialog, they capture what we have returned.
We load our response in window.returnValue so they have it in the "result" variable, but if they close our window with the X button, they never get our response, although we have set it. If they close our window by clicking on our "Accept" button, they get the response.
If I try to capture the unload event, and I set window.returnValue again, they don't get it either.
Why is this happening and how can I make sure they get the return value even they press the X?
I can't change how they call our web application, which I know it sucks because it's a dumb way to do things...
They use Internet Explorer exclusively and they run it in mode IE 5...
If possible for you then you can try to make a test with the onbeforeunload event
In that way, you can try to show the prompt to the users and inform them that if they continue with this approach them they can lose the changes they have made on this page. Then you can guide the user with correct steps.
Example:
window.onbeforeunload = confirmExit;
function confirmExit()
{
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Accept button, your changes will be lost. Are you sure you want to exit this page?";
}
I want to show a simple popup using alert() , however, only after the page is reloaded fully.
Right now, the popup, is displayed and disappears after a second or even less because the code is executed at the same time.
My code in the ajax success:
success : function( response ) {
location.reload();
alert(response);
}
How to make the code to be executed one after another and not at the same time?
If you reload the page, basically the JavaScript will essentially "reset", so nothing after the reload() call will continue to run. You may need to consider placing a variable in localStorage, and doing your alert on document.ready.
Here would be an example. Let's say that you want to refresh the page after the user clicked a particular button.
$(".myButton").on("click", function(){
localStorage.setItem("buttonClicked", true);
location.reload();
});
$(document).ready(function(){
// This function will run on every page reload, but the alert will only
// happen on if the buttonClicked variable in localStorage == true
if(localStorage.getItem("buttonClicked");
alert("you clicked the button!")
}
});
Using the following function to prevent users from going back to previous page if the page they are on currently has the id #home. But this function doesn't even fire off. No alerts. Nothing wrong with the link to script file as I have other scripts running fine on that file.
document.addEventListener("backbutton", function (e) {
alert("Back button pressed");
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
var activePageId = activePage[0].id;
alert(activePageId);
if (activePageId == 'home') {
e.preventDefault();
}
}, false);
Unless you have created a custom event there is no onbackbutton event I know of. You are after onbeforeunload
Clients don't like it when you block navigation. You should consider other solutions to you problem rather than block navigation. Sure as .... the next thing the client will do is close the tab and a good chance you will never see a session with that client again.
I am looking to check if a page has been refreshed or closed with jQuery or javascript.
What I have currently is I have some database values that I want to delete if the user either navigates away or refreshes the page.
I am using AJAX calls to delete the values.
Right now, I have the following code:
The handler:
window.beforeunload = cleanUp;
The cleanUp() method:
function cleanUp() {
// Check to see if it's an actual page change.
if(myActualLeave) {
$.ajax({
type: "POST",
url: "/api/cleanup",
data: { id: myLocalId },
success: function (data) {
console.log(myLocalId + " got removed from the database.");
}
});
}
// Reset the flag, so it can be checked again.
myActualLeave = true;
}
Where myActualLeave is a flag that I set to false when AJAX calls are made, so they don't trigger the beforeunload handler.
The problem I am running into is that when I click a link on my page, so for instance a link to Google, the window.beforeunload doesn't trigger. I may have a misunderstanding of this, but I have tried using jQuery's $(window).unload(...); and the onbeforeunload trigger as well.
What should I use to call javascript when:
the user refreshes the page,
when the user navigates away from the page, or
when the user closes the page?
Edit: It came up in a comment that I could use a click() jQuery handler to detect navigating away. I should have made it more specific that I don't mean when the user clicks a link only then I want it to proc. I want it to trigger when they change pages in any way. So if the address bar gets typed in, for instance.
You should try "onbeforeunload" :
window.onbeforeunload
But i think you can't put "active" (ajax call) code in this callback function. All you can do is defining a confirm modal window that will be displayed to the user before leaving like :
Are you sure you want to leave because...
So you should do as #Leeish said : put a code in the .on('click') of the link so it can launch the ajax call before sending to another page.
But for the "refresh" or "close" scenario, you can consider marking your database row as "draft" (or whatever) and if not saved when on the next page, delete the draft line.
I have a "Save" button on a FormView with the CommandName="Update" set. This button updates an EntityDataSource that is bound to the FormView.
After the EDS is updated, I want to close this (child, popup) window and refresh my parent window (so it will reflect the changes just made to the data).
For reference, I have a similar "Cancel" button on this page that simply calls a Javascript function "OnClientClick":
function done() {
if (window.opener.closed) {
self.close();
} else {
window.opener.focus();
window.opener.location.href = opener.location;
self.close();
}
}
Now, how can I let the FormView and EDS do its thing (process the Update command) and then call this javascript function (or code to accomplish the equivalent)???
After doing some more digging, I solved it. The problem had to do with the FormView being inside an Update Panel. I had to use the following:
ScriptManager.RegisterClientScriptBlock(this.UpdatePanel1, typeof(string), "done", "done();", true);
As soon as your update is finished, it should return a page that you can just register your function with. In your Update command handler (assuming this is happening server side), just add the following:
Page.RegisterStartupScript("AfterUpdate", "done();");
It will cause the done() javascript function to run as soon as the windows refreshes from the postback caused by the update command. If you done function isn't already in the page, make sure you add it's definition before you call it to the RegisterStartupScript call.