JavaScript queue up click events

Question

I have a long list of checkboxes like so:

 <input class='masterCheckbox' type='checkbox' onclick='clickAll()' />

 <input class='modifyDb' type='checkbox' onclick='ajaxCall(someId)' />
 <input class='modifyDb' type='checkbox' onclick='ajaxCall(someId)' checked />
 <input class='modifyDb' type='checkbox' onclick='ajaxCall(someId)' checked />
 ... lets say there's exactly 100 ...
 <input class='modifyDb' type='checkbox' onclick='ajaxCall(someId)' />
 <input class='modifyDb' type='checkbox' onclick='ajaxCall(someId)' />
 <input class='modifyDb' type='checkbox' onclick='ajaxCall(someId)' checked />

The ajaxCall() function makes an ajax call (using jQuery) to a PHP page to make some change in the DB.

I want the masterCheckbox checkbox, when checked, to go through all the unchecked checkboxes and click them all, so that they each make a separate ajax call.

Using jQuery, I managed to get all the modifyDb checkboxes and then with the .each() function called a .click() on each element. This works visually; the checkboxes are toggled, but the ajax call is not made.

Is this because the ajax calls are made too fast? Can I queue up the function calls somehow?

Ricardo Lohmann · Accepted Answer · 2013-03-28 18:25:32Z

4

Use trigger.
The following code reuns onclick of all .modifyDb

function clickAll() {
    $('.modifyDb').trigger('click');
}

Refference

http://api.jquery.com/trigger/

answered Mar 28, 2013 at 18:25

Ricardo Lohmann

26.4k7 gold badges86 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

SoluableNonagon Over a year ago

ah, I completely forgot about trigger

Matt Burland Over a year ago

Does this actually work? According to the docs .click() is just a shortcut for .trigger('click'), so either should work.

Roatin Marth Over a year ago

The OP is already using $.fn.click, which simply routes to $.fn.trigger, FYI: github.com/jquery/jquery/blob/1.9.1/src/event-alias.js#L9

SoluableNonagon Over a year ago

so what you're saying is that I onclick='' will not trigger?

Matt Burland Over a year ago

@EliteOctagon: Actually I just checked, and it seems to work fine at triggering onclick. So I'm not sure why .click() wasn't working for you.

|

Matt Burland · Accepted Answer · 2013-03-28 18:31:15Z

2

I'd reorder this and get rid of all the inline event handlers. Something like this:

<input class='masterCheckbox' type='checkbox' />

<input class='modifyDb' type='checkbox' data-id='someId)' />
<!-- .... -->

And then bind them:

$(".modifyDb").click(function() {
    var id = $(this).data("id");
    ajaxCall(id);
});

And for the master check box:

$(".masterCheckbox").click(function() {
    $(".modifyDb").each(function() {
        var id = $(this).data("id");
        ajaxCall(id);
        // or if you really must, you could use trigger() here
    })
});

answered Mar 28, 2013 at 18:31

Matt Burland

45.3k18 gold badges110 silver badges182 bronze badges

1 Comment

SoluableNonagon Over a year ago

this helps out quite a bit

nitedmn · Accepted Answer · 2013-03-28 18:30:08Z

1

This would trigger the click event on boxes that are not already checked

function clickAllUnchecked(){
    $('.modyfDb').not(':checked').trigger('click')
}

answered Mar 28, 2013 at 18:30

nitedmn

9410 bronze badges

1 Comment

SoluableNonagon Over a year ago

I like the not() modifier, awesome attention to details

Collectives™ on Stack Overflow

JavaScript queue up click events

3 Answers 3

7 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related