Using .trigger in a loop multiple times

Question

I am looking to loop through items in a select box, to see if any of them already have quantity saved in the API, and append said item to the page.

My code does this with the use of .trigger('change'), however it then exit the for loop.

Without .trigger('change'), the for loop itself will complete, however without the .trigger('change'), no item is appended.

$(window).on('load', function(e) {
    if (Basket) {
        var lineItemArray = [11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 4];
        for (i=0; i < lineItemArray.length; i++) {
            if (Basket.LineItems[lineItemArray[i]].Quantity > 0) {
                // Append item to page (function elsewhere takes care of this)
                $('#select-other-items-section').find('option[value="' + lineItemArray[i] + '"]').attr("selected",true).trigger('change');
                }
            }
        }
    });

Is anyone kindly able to advise what is wrong? Or perhaps it is not even possible to use .trigger within a loop?

I think you'd be better off using something other than a "change" event to trigger appending your items -- why not just call the append function directly? — Daniel Beck
– Daniel Beck, Commented Jul 12, 2017 at 15:30
Update your 'change' handler so that it does a console.log('change');return; (ie nothing else) and re-run your code. If it then works then it's something in the change handler itself which you've not included here. — fdomn-m
– fdomn-m, Commented Jul 12, 2017 at 15:33
Your i variable is global. Change for (i=0; to for (var i=0;. (or use something other than i, eg j or ii). If your change event (or some other code, such as jquery internal code) also has a for (i=0.. loop (or any code than affects i) then it will reset the i and break this loop. — fdomn-m
– fdomn-m, Commented Jul 12, 2017 at 15:36

fdomn-m · Accepted Answer · 2017-07-12 15:47:51Z

1

In this line:

for (i=0; i < lineItemArray.length; i++)

the i variable becomes global. If the global i is set anywhere else while inside the loop (in this case within the change event handler) then it will also change the i used here.

Fix by changing i to the current scope:

for (var i=0; i < lineItemArray.length; i++)

answered Jul 12, 2017 at 15:47

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

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

Comments

charlietfl · Accepted Answer · 2017-07-12 15:29:46Z

1

You can pass a filtered array directly to a multiple <select> using val(). Then trigger the change on the <select>

var filteredVals = lineItemArray.filter(function(val, i){
    if(!Basket.LineItems[val].Quantity){
          return false; // don't want this one
     }
     // Append item to page here
     return true;
});

$('#select-other-items-section').val(filteredVals).change();

edited Jul 12, 2017 at 15:29

answered Jul 12, 2017 at 15:24

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

Using .trigger in a loop multiple times

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related