Jquery dynamic buttons dialog for in loop doesn't populate function

Question

I am creating dynamic buttons for a jQuery dialog. A json object contains the info for the buttons. I am using a for in loop to loop through each property in the object. The anonymous function that is being populated for each button is blank when I loop through the new object, but shows that each function is being populated with the last value when actually clicked on in the dialog.

Code for the dialog:

$('#dialogDiv').dialog({
        autoOpen:false,
        modal:true,
        resizable:false,
        width: 600,
        height:100,
        position:"center",
        overlay: { 
            opacity: 0.2, 
            background: "black" 
        } 
});

Code to create the buttons from a json object:

var obj1 = {but1:{Label:"button1"},but2:{Label:"button2"},but3:{Label:"button3"}};
var newObj = {};
for(var k in obj1){
    if (obj1.hasOwnProperty(k)){ 
        var ob2 = obj1[k];
        for(var x in ob2){
            var nl = ob2[x];
             newObj[nl] = function(){
                $(this).dialog("close");
                console.log(nl);
             }
        }
    }
}

If I loop through the newObj each function is blank.

for(var z in newObj){
    console.log(newObj[z]);
}

Adding the button object to the dialog, and opening it.

$('#dialogDiv').dialog({buttons : newObj});             
$('#dialogDiv').dialog("open");

When any of the buttons are clicked the console shows that they all have the same value for the nl variable inside the function. Why is this not being set correctly? Variable scope? I know this could have been written easier not using the second for loop, but I thought it was a scope problem with nested loops. I also didn't include the code for the click event that fires the function that does this, but that isn't the problem.

would this have worked if you had inserted 'var ' in front of the anonymous function you were assigning? — Jasper Mogg, Jun 20 '12 at 19:29

score 1 · Accepted Answer · answered Jun 20 '12 at 18:48

1

var obj1 = { but1: { Label: "button1" }, but2: { Label: "button2" }, but3: { Label: "button3" } };
    var newObj = {};
    for (var k in obj1) {
        if (obj1.hasOwnProperty(k)) {
            var ob2 = obj1[k];
            for (var x in ob2) {
                var nl = ob2[x];
                var testfn = function (j) {
                    return function () {
                        alert("clicked on" + j);
                    }
                }
                newObj[nl] = testfn(nl);
            }
        }
    }


    for (var z in newObj) {
        newObj[z]();
    }

answered Jun 20 '12 at 18:48

Ajay Beniwal

18,857
9
81
99

Thanks! You that did it. I see now to set the return function separately than trying to do it at the same time as adding to the new object. – breakit2fixit Jun 20 '12 at 18:57
It didn't work originally because of the for loop being faster than the return function, so it finished before the function could be set. – breakit2fixit Jun 26 '12 at 18:54

Jquery dynamic buttons dialog for in loop doesn't populate function

1 Answers1

Linked