We Keep Coding

How to handle Ajax-generated form in Javascript?

So I use this Javascript to handle forms:
$(':submit:not(.form-default-submit)').click(function(event) {
//Disable normal form submission, handle using ajax
});
It works correctly in most cases. So any submit element with the class form-default-submit is ignored, and all others are handled in this Javascript.
But I've just noticed that this doesn't work for Ajax-generated content. Which I'm guessing is because this code is run on page load, before the Ajax content is loaded.
I see people using:
$(document).on("click", selector, function(e){
As a fix for this. But in my case, I don't just apply it to the element directly. I have that condition to allow exceptions for elements with the class form-default-submit.
Is the only way to do this with the new Ajax-supported method to have an if statement within the function checking if the element has a particular class? Or can I do this within the selector itself? This is a bit above my current ability, so thanks for any help!

Try this:
$(document).on( "click",":submit:not(.form-default-submit)", function(e){

You can bind the submit event directly to the form and return false. This will also catch a form sent by using the enter key.
$("#form").on("submit", function(event){
// Send form data by AJAX
$.post(...);
// Prevent form to be sent the regular way
return false;
});

Looking to tag a multi-option form with Google Analytics - need JavaScript guidance

I'm trying to track the different form options for this page: http://www.wibitsports.com/formular . Basically I just want to trigger an event for each specific option (out of the 3).
I'm comfortable with setting up the event tracking, the problem is I can't seem to find the HTML to put it on. I think the form's using AJAX - the URL stays the same when I submit.
Where would I find the form code? Ideally I'd like to add event tracking to each form variation's submit button.
If you need any more info I'll do my best to supply it. Clearly in over my head!
Thanks!

Something like this:
$( document ).ready(function() {
$("input[type=radio]").live("click" , function() {
_gaq.push(['_trackEvent', 'Wibit Form', 'Radio button clicked', $(this).attr("id")]);
});
});
Meaning: As soon as the document is read attach an event to all radio buttons. Since apparently more options are loaded via ajax use a "live" event (on() ) in more recent jQuery versions) so this event handler will apply to newly created radios as well. Track this as an event (change parameters at your gusto) that stores the id of the clicked radio as label.
Obviously I haven't really tested this with your site, but even if there's an error somewhere in the code it should be enough to get you going.

jQuery late binding of Ajax elements doesn't work

I'm really stuck with a jQuery issue and I hope someone can help me out...
So I have a list of options on the left, and when you click on one, a form is generated via Ajax on the right. There's this element in the form:
<input type="text" class="value" value="something">
And what I want to do is to call
$(".value").tagsInput();
which is a jQuery plugin that works pretty much like Stack Overflow's 'Tags' input field when you ask a question.
So I tried this:
$(document).ready(function() {
$(".value").on("load", function () {
console.log("Tags Input");
$(".value").tagsInput();
});
});
and nothing is printed out. I've also tried this:
$(document).on("change", ".value", function () {
console.log("Tags Input");
$(".value").tagsInput();
});
and it doesn't work either. I'm wondering where I did wrong. Can anyone help me out?

As pointed out by Shabnam, the "change" event is not what you want, as it is fired only once the field is blurred.
Anyways, from the plugin documentation, it looks like you don't have to call that function every time a key is pressed, but it attaches its own event handlers autonomously.
So, probably you should be fine with just:
$(document).ready(function() {
$(".value").tagsInput();
});
Your .on handler will never work, as the load event is fired only by document when the page is ready.
If you want to debug things a bit, have a look at the supported callbacks, such as onChange.
SIDE NOTE
I don't like how that plugin is written, as it clogs the "global" jQuery.fn namespace with lots of functions, while jQuery documentation recommends not doing so (see: Namespacing).
UPDATE
See here: http://jsfiddle.net/aFPHL/ an example of this working (the .load() was monkeypatched to avoid having to call an actual URL, but its behavior is pretty much the same as the real one).

"change" event gets fired when the input element loses focus. If you want ajax call at the end of each key input, try using keyboard events

Postpone the execution of Javascript wired to a control event in favour of external jQuery function

I have an ASP.NET Web Form application developed by another developer.
This developer made extensive use of ASP.NET controls therefore there are many automatically generated Javascript functions wired to HTML elements' event.
Now I have been asked to add a functionality: disable the submit button upon first stroke, in order to avoid the users to click several times on the button.
Here is the jQuery code that I use http://jsfiddle.net/2hgnZ/80/ and the HTML DOM is identical to the one I use:
$('#form1').submit(function(e) {
$(this).find('input[type=submit]').attr('disabled', 'disabled');
// this is to prevent the actual submit
e.preventDefault();
return false;
});
This script in my code does not work and after many attempts I am sure it depends on the JavaScript event wired to the onSubmit event of the button.
How can I postpone the execution of this Javascript on favour of the jQuery unobtrusive function?

hmm. Can you confirm that your event is firing? I cheked the submit docs, and it is bound rather than live, which is good.
How about wiring to the button, instead? It would not be perfect, because the enter key doesn't use the button, but if it works that way you'll learn something

Have you tried calling e.stopImmediatePropagation(); http://api.jquery.com/event.stopImmediatePropagation/

This piece of code delays the execution of function amount you want.
// delay code for one second
$(document).ready(function()
{
window.setTimeout(function()
{
// delayed code goes here
}, 1000);
});

This piece of code should help you get the original event and then trigger it after your desired code.
$(function(){
var $button = $('#actionButton'),
clickEvent = $button.data("events")['click'][0].handler; //saves the original click event handler
$button.unbind('click'); //and removes it from the button
//create a new click event.
$button.click(function(e){
// doWhatever we need to do
$.ajax({
url: url,
data: data,
success: function(){
$.proxy(clickEvent,$button)(e);//attach the original event to the button
}
});
});
});

jQuery override form submit not working when submit called by javascript on a element

I've got a page with a normal form with a submit button and some jQuery which binds to the form submit event and overrides it with e.preventDefault() and runs an AJAX command. This works fine when the submit button is clicked but when a link with onclick='document.formName.submit();' is clicked, the event is not caught by the AJAX form submit event handler. Any ideas why not or how to get this working without binding to all the a elements?

A couple of suggestions:
Overwrite the submit function to do your evil bidding
var oldSubmit = form.submit;
form.submit = function() {
$(form).trigger("submit");
oldSubmit.call(form, arguments);
}
Why not bind to all the <a> tags? Then you don't have to do any monkey patching, and it could be as simple as (assuming all the links are inside the form tag):
$("form a").click(function() {
$(this).parents().filter("form").trigger("submit");
});

If you are using jQuery, you should be attaching events via it's own event mechanism and not by using "on" properties (onclick etc.). It also has its own event triggering method, aptly named 'trigger', which you should use to activate the form submission event.

Thanks Eran
I am using this event binding code
this._form.bind('submit', Delegate.create(this, function(e) {
e.preventDefault();
this._searchFadeOut();
this.__onFormSubmit.invoke(this, new ZD.Core.GenericEventArgs(this._dateField.attr('value')));
});
but there is legacy onclick code on the HTML and I would prefer not to change it as there are just so many links.

This worked for me:
Make a dummy button, hide the real submit with the name submit,
and then:
$("#mySubmit").click(function(){
$("#submit").trigger("click"); });
set an event handler on your dummy to trigger click on the form submit button. let the browser figure out how to submit the form... This way you don't need to preventDefault on the form submit which is where the trouble starts.
This seemed to work around the problem.