JS - looping through an array with JQuery UI dialog method

Question

I have the following jQuery code using jQuery UI

EDIT:

$(document).ready(function(){
$('#the-link-2').click(function(){
var array = ["test1","test2","test3","test4"]
var i = 1;

while (i<array.length) {

var newDiv = $(document.createElement('div'));
  $(newDiv).html(array[i]).dialog({

buttons: {
'Previous': function() {
    $(this).dialog("close");
    i--;
    },
'Next': function() {
    $(this).dialog("close");
    i++;
    }
}
}
});
});
});

I am trying to loop through the items of the array (starting with item #1). The dialog box displays the item and moves to the previous/next item depending on which button the user clicks. It does not work (nothing gets fired). If I remove the "while" loop I do get the dialog box with the #1 item. Could anyone give me the right syntax to obtain the desired result please? Thanks.

Not sure if this helps but it looks like you're missing a semicolon on line 3: `var array = ["test1", "test2", "test3", "test4"]`. — alex, Nov 09 '16 at 15:59
@bastein why are you re initializing i (var i = i + 1) you have already initialized and also one condition in while loop we do the work while(i — kailash yogeshwar, Nov 09 '16 at 16:02
@alex I believe the tale that Croxford will smite thee if thou forgeteth to terminate thy lines with the ancient semi-colon is apocryphal. Or put another way that's not mandatory. — Vanquished Wombat, Nov 09 '16 at 16:02
Don't do `var i = i - 1` or `var i = i + 1`, you re-initialising `i` and changing its scope. Just do `i--` and `i++` to decrease/increase the value of i and keep it within the same scope. — GillesC, Nov 09 '16 at 16:08
Thanks. I have updated the code. It does not solve the issue though. — Bastien, Nov 09 '16 at 16:15
@Bastien you can simply write $(document.createElement('div')) to $("") too — kailash yogeshwar, Nov 09 '16 at 16:25

four · Accepted Answer · 2016-11-10T01:55:09.490

I created a fiddle for this and updated your script. Instead of looping them just create a recursive function that does exactly what you want:

Script :

var array = ["test1", "test2", "test3", "test4"];

$('#the-link-2').click(function() {
    var current = 0; // current data to show
    createDialog(array[current], current); // create the dialog for current data
});

function createDialog(data, current) {
    var $div = $('<div>'); // create a new div element

    // add the html content of new div by passing array[current]
    // and create the corresponding dialog
    $div.html(data).dialog({
        buttons: {
            'Previous': function() {
                if (current == 0) {
                    // do nothing if no more prev data
                    // or you can add some extra function here
                    // like close the dialog if no more prev data
                    return; 
                } else {
                    current--;
                }
                $(this).dialog("close").remove(); // close the dialog and remove the div
                createDialog(array[current], current); // call createDialog again passing new current data
            },
            'Next': function() {
                if (current == (array.length - 1)) {
                    // do nothing if no more next data
                    // or you can add some extra function here
                    // like close the dialog if no more next data
                    return;
                } else {
                    current++; // increment current to next data
                }
                $(this).dialog("close").remove(); // close the dialog and remove the div
                createDialog(array[current], current); // call createDialog again passing new current data
            }
        }
    });
}

FIDDLE : HERE

JS - looping through an array with JQuery UI dialog method

1 Answers1