jQuery and Ajax reacting only to first element!

Question

I have multiple forms on this page I am optionally submitting with ajax. Problem is only the first object select by jQuery is being executed!

Here's the js:

$(function() {
var input = 'table td input[type="checkbox"]';
var form = 'form.update_done';
var isDone = 0;

$(input).each(function() {
    if($(this).attr('checked')) { $(this).parents('tr').removeClass('unDone'); }
    else { $(this).parents('tr').addClass('unDone'); }
});

$(input).each(function() {
    $(this).click(function update() {
        if($(this).attr('checked')) {
            isDone = 1;
            $(form).submit();
            $(this).parents('tr').removeClass('unDone');
        }
        else {
            isDone = 0;
            $(form).submit();
            $(this).parents('tr').addClass('unDone');
        }
    });
});

$(form).submit(function() {
    $.post(
        'set_done.cfm',
        { id: $('input[name="id"]').val(), done: isDone },
        function(responseText){  
            // $(this).parents('tr').toggleClass('unDone'); 
        },  
        "html"
    );
    return false;
});
});

and the html:

<td>
<form class="update_done">
<input type="hidden" name="id" value="#jobs.id#" />
<input type="checkbox" <cfif jobs.done IS 1>checked="checked" </cfif>/>
</form>
</td>

Anyone know where I went off track? If I wasn't very clear, please let me know.

Answer 1

Are you saying that you're trying to submit multiple forms on the same click event? If so, I believe the problem is that your return false; in your submit() (in order to cancel the form submit, right?). However, with jQuery, return false; is equivalent to calling event.stopPropagation() and event.preventDefault(). In your case, you do not want to stop propagation of this event since it stops your other forms from being submitted.

I believe changing submit handler to the following should fix your problem:

$(form).submit(function(e) {
    $.post(
        'set_done.cfm',
        { id: $('input[name="id"]').val(), done: isDone },
        function(responseText){  
            // $(this).parents('tr').toggleClass('unDone'); 
        },  
        "html"
    );
    e.preventDefault();
});

---

Karim explains:

return false from within a jQuery event handler is effectively the same as calling both e.preventDefault and e.stopPropagation on the passed jQuery.Event object.

e.preventDefault() will prevent the default event from occuring, e.stopPropagation() will prevent the event from bubbling up and return false will do both. Note that this behaviour differs from normal (non-jQuery) event handlers, in which, notably, return false does not stop the event from bubbling up.

Answer 2

Finally found it!

$(form).submit(function(e) {
    e.preventDefault();
    $.post(
        'set_done.cfm',
        { id: $(this).children('input[type="hidden"]').val(), done: isDone },
        function(responseText){  
            // $(this).parents('tr').toggleClass('unDone'); 
        },  
        "html"
    );
});

My mistake was that I originally set the "POST id" to the first input found! So much for small mistakes in big code! Thanks everyone for helping. If not for @no.good.at.coding I would still be with no answer

Answer 3

As far as I understand, you would like to submit the form on toggling true of the check box in each row.

I would suggest you to get the form of the row and submit it rather than submitting all the forms using the form selector. Here is the code:

$(input).each(function() {
    $(this).click(function update() {
        if($(this).attr('checked')) {
            isDone = 1;
            $(this).parents("tr").find(form).submit();
            $(this).parents('tr').removeClass('unDone');
        }
        else {
            isDone = 0;
            //$(form).submit();
            $(this).parents('tr').addClass('unDone');
        }
    });
});

I did not understand the need to submit the form on uncheck operation of the checkbox. So, I have commented the form submit in uncheck operation. Also, use the even.preventDefault() than returning false in the form submit operation.

Answer 4

I'd simplify your var input. It doesn't match the HTML you provided as closely as it may need. I'd simplify it to this:

var input = 'input[type="checkbox"]'; // probably specific enough

I would also use $(input).bind() or $(input).live() instead of .each(). I think it will work a bit more like what you are looking for.

http://api.jquery.com/bind/

http://api.jquery.com/live/