I am creating a HTML layout where user can fill the data and save that page in HTML and JSON formats by using "save" and "save as draft" resp. Can i use
window.onbeforeunload
twice in my template.html file to show two different alert messages?
The alerts would show:
when page is empty and user tries to go to load another page
when user fills the data in the layout and tries to leave the layout without saving
At first see this example to to understand what will happen if you use it twice, then the idea given bellow
window.onbeforeunload=function()
{
if(form_empty())
return "Form is empty"; // message for empty form
else
return "Form is not empty"; // message for filled up form
}
function form_empty()
{
// check form fields whether the form is empty or not
// return true if form is empty
// return false if form is not empty
}
Just like any other event handler assigned in this way, if you set it again it will destroy any handler that was already there.
Now, if you're adding and removing the event based on the state of the page, then that shouldn't be a problem. Otherwise, it's a bit more complicated. In the case of onbeforeunload, however, it would be best to just have one.
Related
I am trying to add some elaborate javascript validation to a django admin form. When the user clicks any of the three types of save buttons (save, save and continue, or save and add another) my javascript will run. Part of what it does is make an ajax call to provide special checks before posting. When I capture the click event using jquery of the add and continue button, sometimes I stop the form being submitted and sometimes I allow it to be submitted. Sometimes, only warnings are thrown, rather than errors, and then the user can decide that the form should continue to be submitted.
When it is finally submitted in the end, it needs to be submitted using the process dictated by the button they clicked originally. I found that adding JS of form.submit(); only submitted according to the save button, taking the user back to the model list, even if the user originally clicked the save and continue button.
I changed my JS from form.submit(); to capture the button itself and to trigger a click of it that bypasses the validation if the user has chosen to disregard the warnings. But still it returns to the model list after saving, even if the clicked button was save and continue.
What is the Django admin doing client side to dictate a save and continue instead of a plain old save when the user pushes that button?
So here is the short, summarized version of my question...
How can I, using Javascript (including jQuery), force a Django admin form submission that will:
save and continue
save and add another
Thanks in advance for any assistance.
I figured this out. I had to create a hidden field with the name of the button that had been clicked and the value of the button that had been clicked and submit that field along with the form. Worked great!
EDIT (From 02/2020)
So I originally posted this Q&A years ago and haven't been working with Django for the last few months, but I see that someone wanted my code. Working from memory and a few pieces of code I still have around, it was something like this (which is untested)...
var frm = $('form');
var chosenBtn = frm.find('[name="_save"]');
var btns = frm.find('[name="_save"], [name="_addanother"], [name="_continue"]');
btns.unbind('click.btnAssign').bind('click.btnAssign', function(e)
{
chosenBtn = $(this);
});
frm.unbind('submit.saveStuff').bind('submit.saveStuff', function(e)
{
// Add your own validation here. If the validation fails, you can call:
// e.preventDefault();
// But if it works, no need for that line. If everything works...
frm.append(
[
'<input type="hidden" name="',
chosenBtn.attr('name'),
'" value="',
chosenBtn.attr('value'), // or maybe chosenBtn.text()
'" />'
].join(''));
});
On leaving a page with a form, I want to save the changes made without any user confirmation.
Having found this question I adapted one of the answers as follows. Note that I am not using return:
function setConfirmUnload(on) {
window.onbeforeunload = (on) ? unloadMessage : null;
}
function unloadMessage() {
alert('Gonna save now');
setTimeout(validate_submit,500);
}
This is only triggered when the user fills some value in the form. If an element value changes, I use
setConfirmUnload(true);
Result in FF23: when user clicks somewhere to leave the page, the alert is shown, validate_submit() is executed on "OK", new page appears - BUT now the alert reappears and the user is returned to the original page on "OK". Why? Can somebody confirm this behaviour?
The window.onbeforeunload method causes a confirm box to appear containing whatever message is returned by the function assigned to it. You can put alerts and other stuff in this method, but it will always end with a confirm message. If your function returns nothing, it will still give a message (determined by browser) saying "are you sure you want to leave this page" or something along those lines.
I have a web page with a push button on it. The button makes a call to a js function I wrote that will populate a form and then submit that form. Upon form submission, I would like set the value of the button to "enabled" instead of "disabled". My server (created in Python/Linux Env.) is able to interpret the get requests and take care of what it needs to just fine.
The problem is that every time I submit a form, the page refreshes itself, which effectively means I can't toggle values back and forth (at least not the way I am doing it now)
Ultimately what I need is a way for a user to press a button to toggle a value and have the server be able to react to that button press. If I don't need a form to do this, awesome! I just used the form because it seemed like the best approach at the time.
Here is my code:
function createForm(tagStr,piStr)
{
myform=document.createElement('form');
myform.method='get';
myform.action='http://172.26.177.17/standardTable.html';
input2=document.createElement('input');
input2.type='hidden';
input2.name='tagID';
input2.value=tagStr;
input3=document.createElement('input');
input3.type='hidden';
input3.name='piID';
input3.value=piStr;
elem= document.getElementById("mapButton");
input4=document.createElement('input');
input4.type='hidden';
input4.name='Action';
input4.value=elem.value;
myform.appendChild(input2);
myform.appendChild(input3);
myform.appendChild(input4);
document.body.appendChild(myform);
myform.submit();
if (elem.value == "Disabled") elem.value = "Enabled";
else elem.value = "Disabled";
}
need to handle the form submission on the submit event, and return false preventing page refresh
$('#form').submit(function () {
sendContactForm();
return false;
});
I have a master page in which leftnavigation.jsp and header.jsp are present.Now leftnavigation contains hyperlinks to few of the webpages(say general.jsp, contact.jsp).On clicking these hyperlinks , these webpages gets opened.like if i click general link, it gets opened, and if i click the link of contact.jsp , contact webpage gets opened.Now these webpages have validations on the save button at the end of the form .
Now i want to have these validation (every webpage has a validation function on save button)to work when a user clicks a link on the left navigation to change the webpage.
The leftnavigation.jsp does not contain any form element. it just contains links or scripplets
any suggestions?
Sounds simple enough. You could make the navigation bar links call the validation function for the forms when clicked. Something like this perhaps:
<a href="anotherpage.jsp" onclick="validate(); return true;>Click me!</a>
Just a warning though: it's impossible to guarantee validation in this manner, users could bypass the validation (the user could click a back button for example). If this is what you're trying to achieve, consider running a validate function onpropertychanged or onkeyup. And, as always, form validations should (almost) never be a hinderance; don't show alert messages or do anything REALLY distracting if a user doesn't type something right.
Notice how the code above would let the user change pages regardless of the form's validation status. You could make the onclick function return false if the form failed validation, but this can be bypassed, and it is a hinderance to users.
If this is really necessary, have the links work regardless, but show a small message, possibly in the form of a div quietly pop up at the top of the page warning the user that one of their form entries was incorrect.
Listen for a click event on your navigation links then run your validation function:
function listen(event, elem, func) {
if (elem.addEventListener) {
elem.addEventListener(event, func, false);
} else if (elem.attachEvent) {
elem.attachEvent('on' + event, func);
}
}
var links = document.getElementsByTagName('a');
listen('click', links, validationFunction);
If you're passing in variables, then wrap your validate function in an anonymous function:
listen('click', links, function(param) { validationFunction(param); });
The situation: I have a Grails webpage with two tables. One table displays a persons information (including certain flags), and the second table has a list of flags with an "add button" that allows the user to add a given flag to themselves.
Now, there is a save button that, when clicked, pushes the current "state" of the users flags to our database. So I want to be able to display a prompt if there is unsaved information being displayed when a user tries to navigate to another part of the site. This is easy enough by using an existing isDirty boolean that each flag stores. I can just loop through the persons active flags and check if it is dirty or not. If the person contains at least 1 dirty flag, I need to display a prompt if they try to leave, because that data won't be saved unless they explicitly hit the button.
The problem: There are many ways to navigate away from this page. I am using
<body onbeforeunload="checkForDirtyFlags();">, where checkForDirtyFlags() is a basic js function to check for any dirty flags. But here's the thing - when a user adds or removes a flag, that causes a page reload because the way the page is setup is to redirect to a url like this:
"http://my.url/addFlag/123456"
The controller then knows to add the flag with id 123456 to the current person. This does NOT change where the person is in the website however, because the same page is still rendered (it just contains updated tables). So basically, when I see a URL with addFlag or removeFlag, I do not want to prompt the user if they are sure they want to navigate away from the page, because in the eyes of the user they are not leaving the page.
The question: Is there any way to determine what the target is during an onbeforeunload? So that I can have something like this in my javascript:
function checkForDirtyFlag() {
if( justAdding ) { //We are just adding a flag. No prompt necessary
//Don't do anything
}
else if( justRemoving ) { //We are just removing a flag. No prompt necessary
//Don't do anything
}
else { // In this case, we want to prompt them to save before leaving
alert('You have unsaved data on the page. Leaving now will lose that data. Are you sure you want to leave?');
}
}
If any of this isn't clear, please let me know and I'll try and clear it up.
Thanks!
I don't think you can get the target location in unload event. What I'd do is bind the save/submit button to a function that disables the unload event if the button is pressed, therefore disabling the prompt. If the user tries to leave by pressing back etc, the unload event would fire.
Why don't you push the changes immediately to the database, without them having to press the Save Button, or store them in a temporary database so that they do not lose their unsaved changes when the navigate to a different part of the site.
I'm not quite sure if I get you right - but you actually wrote the solution already down there. Why don't you just return a string-message from within an onbeforeunload when necessary ?
For instance:
window.onbeforeunload = function() {
if( justAdding ) { //We are just adding a flag. No prompt necessary
//Don't do anything
}
else if( justRemoving ) { //We are just removing a flag. No prompt necessary
//Don't do anything
}
else { // In this case, we want to prompt them to save before leaving
return 'You have unsaved data on the page. Leaving now will lose that data. Are you sure you want to leave?';
}
};
If you return a string value from that event, the browser will take care of a modal dialog window which shows up. Otherwise nothing happens.