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
– Jasper Mogg, Commented Jun 20, 2012 at 19:29

Ajay Singh Beniwal · Accepted Answer · 2012-06-20 18:48:08Z

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, 2012 at 18:48

Ajay Singh Beniwal

19k11 gold badges84 silver badges100 bronze badges

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

2 Comments

breakit2fixit Over a year ago

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 Over a year ago

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.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related