jQuery-UI Dialog only showing last iteration of the for loop

Question

Don't know if I'm being blind but every time I look at this code the logic makes sense. I am trying to iterate through this for loop and for each iteration generate a dialog box with the ID of #dialog-(i) but it only show's the last iteration of 200. The code is below:

var i; 
    for(i=1;i<200;i++){
        $("#dialog-" + i).hide();
        $('#meetings_box-' + i).click(function() {
            var dialog = $("#dialog-" + i).dialog();
            if (dialog) {
                console.log('yay');
                console.log(dialog);
            } else {
                console.log('nay');
            }
        });
    };

Any help to finding the issue, probably something really dumb

I would suggest using callbacks. After each iteration you could call a show and on that dialogs callback you can iterate one higher. — BRO_THOM, Sep 04 '18 at 09:52

score 2 · Accepted Answer · answered Sep 04 '18 at 09:51

2

This is because click will happen sometime in the future and by then the loop has already finished it's execution and the value of i is updated to the last value. Instead of var you can use let

answered Sep 04 '18 at 09:51

brk

48,835
10
56
78

Cheers mate, this helped me figure out the issue – Tom Sep 04 '18 at 15:41

jQuery-UI Dialog only showing last iteration of the for loop

1 Answers1