Develop Reference

jQuery off() Before Form Submission

I'm learning how to use jQuery and I'd like to understand what the purpose of using the off() method before submitting a form is. For example, in the following code, the form is first prevented from sending using preventDefault(), some Ajax is done and when finished, the form is finally submitted. But why do I need to use off() before submit()?
$(document).ready(function() {
$('form[name="Payment"]').on('submit', function( e ) {
e.preventDefault();
AjaxCall();
$(document).ajaxStop(function() {
$('form[name="Payment"]').off('submit').submit(); // Once Ajax request are finished, submit the form.
});
});
});

Because triggering the same event would run all that same event handler code again.
The default would always be prevented, the ajax would be called ....and then the event would be triggered again and you would have an infinite loop without changing something.
Removing the event listener would make any subsequent submit use browser default process
There are other ways around this...but this answer explains what was asked

Is a best common way to solve button click too fast?

I have a button.when click button, show a dialog to select data.
If click the button so fast,multi dialog will be show.
At present，I have two way to solve this problem
1.use disabled
2.use setTimeout and clearTimeout
have any other better way to solve this problem?
thank you very much
explain:
if use disabled,after dialog close,need to set the button available.
at present,I use this code
Util.prototype.lazyTriggerEvent = function(buttonId,event,callback){
var searchTrigger=null;
$("#"+buttonId).bind(event,function(){
var text = $.trim($(this).val());
clearTimeout(searchTrigger);
searchTrigger = setTimeout(function(){
callback(text);
},500);
})
};
//Util.lazyTriggerEvent("showDialgBtnId","click",function(){})
if click button trigger a ajax，and have much more button like this，is a best common way to solve this problem.

You can use jquery's .one() handler which limits a function to running once:
JQuery's .one() handler
Description: Attach a handler to an event for the elements. The
handler is executed at most once per element per event type.
$('button').one('click', function() {
// Do stuff
});
Or you can also disable the button on click:
$('button').click(function() {
$(this).prop('disabled', true);
// Do stuff
});
To re-enable the button, you can simply add the following to your close modal function:
$('button').prop('disabled', false);

I suppose when you want to show a dialogue, you execute a function called showDialogue() .
In your showDialogue(), you'll be able to check whether your dialogue was initiated.
Keep your mind off the button. Focus on the showDialogue().
If your dialogue was initiated, then do not execute the rest of your code in showDialogue(), as if showDialogue() isn't executed twice. It gives an illusion that the multi click isn't working. Is it the solution you desire, without disable and setTimeout?

Use disabled at first, and then when the dialog displays, enable the button.

How to Call a Jquery Method after page loaded completely with button click (postback)

I'm looking to call a jQuery function after the page has loaded completely for the post back (after pressing a button).
Can anyone please tell me how to do that.
Tried this, but with no luck:
$("#<%= btnOK.ClientID %>").click(function (e) {
window.onload = function () {
$("#<%=UIGridViewUserTaskSearchResults.ClientID%>").tablesorter();
JqueryFunction();
}
});

Switch it around. Try this:
$(document).ready(function()
{
$("#<%= btnOK.ClientID %>").click(function (e)
{
$("#<%=UIGridViewUserTaskSearchResults.ClientID%>").tablesorter();
});
});

If you bind any jQuery handler to an ASP.Net button click, when you click the button, first the handler will fire, then the page will be immediately reloaded by postback. If you wish to run a jQuery code after postback, you need to put that in $(document).ready() event, and then make sure this "ready" is fired after postback.
You can achieve this by setting a Hidden Field value from server side code on Button_Click handler, then check the value of that hidden field in jQuery $(document).ready() event. There will be no $("#<%= btnOK.ClientID %>").click handler.

Send click event on button loaded dynamically

So this is slightly different than all the posts I have found on the subject. I have a button that gets loaded dynamically via Jquery, I save the selector of this button and later on in my code I need to send a click event (Emulate someone clicking on the button) Now normally I would just use $('#myID').click();
and this casts a click. But Since my button is loaded dynamically this does not work. Now I do NOT need to handle the onclick event. I could use
$(document).on('click', '#myId',function(e){});
for that. I need to actually send the click event. I have tried
.click();
.on('click);
.onClick();
.trigger('click');
Any ideas?

You could also breakout the code that you want to happen when you click on the button into a function if it's simple enough and instead of trying to fire a click event just fire the function the button normally fires.

By using setTimeout() to call the function again and again you are essentially polling the element, untill it actually exists, which is when you fire the click event.
// Wait for everything in the document to be loaded
jQuery(document).ready(function() {
// Make the initial call to the function
fire_click('#myID');
// This function tries to find the button, and if it can't
// find it, it calls itself again in 50 ms.
function fire_click(selector) {
elem = jQuery(selector);
if (elem.length == 0)
setTimeout(fire_click, 50);
else
elem.click();
}
});
A better solution would be to have a callback function that is fired when the button is loaded. This callback function can then fire the click event on the button, since the callback function is only called when the button is actually there. Generally it's a good idea to avoid polling for information when you can, so therefore this would be considered a better solution.

Mootools confirm dialog that will stop ajax function if cancelled.

I have a JavaScript popup "confirm dialogue" setup on some links, when the link is clicked it says "are you sure?" and lets u confirm or cancel, however the ajax call will work regardless of what you choose.
<a onclick="return confirm(\'Are you sure?\')" class="sendEmailLink" href="/" id="someID">Send</a>
The function called starts as follows:
$$('.sendEmailLink').addEvent('click', function(e)
{
e.stop();
(I assume something should go here)
var myRequest = new Request.JSON({
etc...
It makes sense the confirm dialogue would not stop the above code, but I cant get my head around how I can accomplish this in mootools. Help?
I need a dialogue box offering a choice of yes or no, if yes then continue with ajax request, if not then do not continue with request.
Thanks.

Like #Marcin mentioned, you are binding two click events to one element, so it is no wonder that your ajax call proceeds as usual irrespective of the result of the confirm dialog.
Eliminate one, by not binding event to an element via an onclick attribute. (Never use onclick!)
element.addEvent('click', function() {
if (confirm('Are you sure?')) {
new Request.JSON({
// ...
}).send();
} else {
// Do nothing
}
});
Here is a relevant jsFiddle for you to play around with.

Here is solution: http://jsfiddle.net/kVjAB/
Some comments:
Do not use $$ or $ in Mootools anymore. They are deprecated.
In your code you are binding click event to link. Also, you have added attribute onClick which will run itself code first, then your binded code. It is like you add two separate events to link.