I have an <asp:Button name="theButton"> that I handle clicks in using jQuery. I display a custom jQuery UI confirm dialog when the button is pressed.
I've made 2 callbacks; one for the "yes"-click and one for the "no":
$('input[name="theButton"]').click(function(){
myPopUpMethod(function(){
//user pressed "yes" - perform postback
//(return true won't do anything here)
}, function(){
//user pressed "no" - don't postback
});
});
If I use a standard confirm() I could just do something like:
return confirm('are you sure?');
But how do I return true or false to the "outer click function" in my first example?
Because the jQuery dialog doesn't block the thread, your click function is always going to return immediately, so you need to do return false; at the end regardless of the dialog result so that the form doesn't get posted.
What I normally do is check for the existence of a data attribute on the button which if present will allow the form to submit, for example:
$('input[name="theButton"]').click(function(){
var $btn = $(this);
if($btn.data("dosubmit") == "true")) {
return true;
}
myPopUpMethod(function(){
$btn.data("dosubmit", "true").trigger("click");
}, function(){
// Do Nothing
});
return false;
});
The first time this is called, the jQuery UI dialog will popup and the method will block the form submit. Once the user clicks "Yes" on the dialog, the data-dosubmit attribute will be set and the button click triggered again. At this stage, the method sees the data-dosubmit attribute and attempts to submit the form.
Related
I have a Paypal Digital Express form which works fine. However, I would like to add a bit of jQuery to the submit button which will fire -before- the Paypal popup window opens and can prevent the Paypal code from firing. Unfortunately, the Paypal window always open first.
jQuery('#buyLink').click( function(e) {
e.preventDefault();
// if no boxes are checked; no songs selected
if ( jQuery("#buysongs input:checkbox:checked").length == 0) {
alert('Please select at least one song!');
return false;
}
});
Is there a way to prioritise my code so that it fires -before- the Paypal code?
EDIT: I added e.preventDefault() per the first answer, but what that does is:
a) the popup window still opens but
b) the Paypal site is never reached.
Instead, it displays the calling page in the popup.
So... I want to prevent that Paypal popup window from opening. Perhaps I need to change the 'action' on the form and trigger that action from inside my jQuery? If so, how do I do this?
Look into the preventDefault() function:
jQuery('#buyLink').click( function(event) {
event.preventDefault();
if (jQuery("#buysongs input:checkbox:checked").length == 0) {
alert('Please select at least one song!');
return false;
}
else{
// submit form
}
});
I'm simply trying to find a way to create a confirm dialog in jquery to use in place of the default confirm function in javascript. I have a confirm dialog that's used to decide if I want to proceed without a given value in a form. The whole program is here:
http://nowlin.com/testpop.php
The button code that's giving me a headache looks like this, but it may not be the button code. I'm just learning jquery:
buttons: {
'Yes': function() {
document.getElementById("clicked").value = "true";
creturn = true;
$(this).dialog('close');
},
'No': function() {
document.getElementById("clicked").value = "false";
creturn = false;
$(this).dialog('close');
}
}
This program works fine except for the confirm dialog. I've tried setting a variable that has a global scope (creturn), and a DOM element from a hidden input (clicked.value), so that when the dialog closes I can tell which button was chosen. The values both get set, but not until after the form Send button, where the onclick event is located, is hit a second time:
<button type=submit name=clicked value=true onclick='return chkreq("cfbform")'>Send</button>
The behavior is, if you enter an email address and no name, and hit the Send button, the confirm dialog pops up. If you select Yes the dialog closes, but the form isn't submitted. If you click the Send button a second time, the dialog pops up again, immediately closes on its own, and the form is submitted. Clearly I'm missing something.
Thanks for any insights.
I would switch the button from type=submit to type=button (we can also drop the return)
<button type=button name=clicked value=true onclick='chkreq("cfbform")'>Send</button>
and then use jQuery to submit the form when it passed validation.
function chkreq(fid) {
// both values are set return true
if (document.getElementById(fid).elements.namedItem("name").value.length > 0 &&
document.getElementById(fid).elements.namedItem("email").value.length > 0) {
document.getElementById("clicked").value = "true";
$('#' + fid).submit();
}
...
}
And
buttons: {
'Yes': function() {
document.getElementById("clicked").value = "true";
$('#' + fid).submit();
$(this).dialog('close');
},
'No': function() {
document.getElementById("clicked").value = "false";
creturn = false;
$(this).dialog('close');
}
}
For more info see https://api.jquery.com/submit/
The other option used on that page is binding to the submit event. With your override-able validation via the popup, I think the above code will be easier to implement.
using Submit buttons and binding click events to them and handling the click in jQuery could cause issues like your jquery gets called then the post pack gets called because of the submit.
I suggest change the type of the button from "submit" to "button" and give it a try.
I created a form using C#. To warn users about leaving the site before making changes, I added this JavaScript
var warnMessage = "You have entered new data on this page. If you navigate away from this page without first saving your data, the changes will not be saved. To save your data, click the Cancel button, then save your data before leaving this page.";
var g_isPostBack = false;
function windowOnBeforeUnload() {
if (g_isPostBack == true)
return; // Let the page unload
if (window.event)
window.event.returnValue = warnMessage; // IE
else
return warnMessage; // FX
}
window.onbeforeunload = windowOnBeforeUnload;
When you leave the page, it works fine. The problem is it also fires even after you save the form data.
When you click the Submit button a postback occurs, which sets the variable g_isPostback to false.
Anyone have a way to prevent the postback with the submit button.
You have two options, both of which make use of your form's onSubmit event.
Option A:
function formOnSubmit(e) {
g_isPostBack = true;
}
Option B:
function formOnSubmit(e) {
window.onbeforeunload = false;
}
I would recommend option A based on your existing code. Don't forget to bind your form's onSubmit to the formOnSubmit() function.
I have a button in my form. I need my form to be processed after the first click (or pressing Enter) on the button, and after that, if some conditions would be true, I do something like submitting the form by the second click or pressing Enter key on the button.
What do you think I have to do?
Create a (boolean) variable that saves your state, which is set to true when the first click (or action) has happened and your condition is true. Then submit on the second action when the variable is true.
If the condition has to be matched on both clicks (I guess so) consider the following:
$(function() {
var first = false;
$("form").submit(function() {
if(first && checkCondition())
submit();
if(!first && checkCondition())
first = true;
e.preventDefault();
});
});
so in basic code:
var answered = false;
$(function() {
$("form").submit(function() {
if(answered == false) {
answered = true;
return false;
}
});
});
If I've understood what you're trying to do correctly, you could bind an event handler to the submit event. That event handler will handle your validation, but if you use the jQuery one method, it will only be executed once. The next time the submit event is triggered, the form will submit as usual:
$("yourForm").one("submit", function(e) {
e.preventDefault(); //Stop the form from being submitted
//Do stuff
});
The result is effectively the same as #Manuel van Rijn's answer, but using jQuery's one just makes it a bit shorter and cleaner in my opinion. However, this could also add a slight performance benefit, as the event handler is unbound after it's execution and won't be called again.
I have a list of radio buttons that I can toggle "yes" or "no" to using Javascript.
$(document).ready(function(){
$('#select-all').click(function(){
$('#notifications .notif-radio').each(function(){
$('input[type="radio"]', this).eq(0).attr('checked', true);
$('input[type="radio"]', this).eq(1).attr('checked', false);
});
});
$('#deselect-all').click(function(){
$('#notifications .notif-radio').each(function(){
$('input[type="radio"]', this).eq(0).attr('checked', false);
$('input[type="radio"]', this).eq(1).attr('checked', true);
});
});
});
this works just fine. Now I have a separate piece of code that detects when a user has changed something, and asks them if they want to leave the page.
var stay_on_page;
window.onbeforeunload = confirm_exit;
$('.container form input[TYPE="SUBMIT"]').click(function(){
stay_on_page = false;
});
$('#wrapper #content .container.edit-user form').change(function(){
stay_on_page = true;
});
function confirm_exit()
{
if(stay_on_page){ return "Are you sure you want to navigate away without saving changes?"; }
}
The problem is that if the user uses the first piece of functionality to toggle all radio buttons one way or another. The JS detecting form changes doesn't see that the form was changed. I have tried using .live, but to no avail. Anyone have any ideas?
I do something similar to this by adding change() (or whatever's appropriate, click() in your case I suppose) event handlers which set either a visible or hidden field value, then check that value as part of your onbeforeunload function.
So, my on before unload looks like:
window.onbeforeunload = function () {
if ($('#dirtymark').length) {
return "You have unsaved changes.";
}
};
And, or course, dirtymark is added to the page (a red asterisk near the Save button), when the page becomes dirty.