How can I dynamically control jquery UI dialog box?

Question

I have been on this a whole day. I have figured out how to change the dialog text dynamically, however, I really have no idea how I can make each student name show on the dialog box, waiting user to select from 'yes' or 'no'? Now the alert shows that the for in loop works, but the result on dialog is not what I want.

I want to make a call the roll program that would keep track of each selection and modify the Javascript object accordingly.

Like on dialog it appears Dennis [ yes or no ?] , Zoe [ yes or no?] and so forth... When the user click 'no', the JS object will be modified to reflect the change.

Thanks for any kind helpers.

$(document).ready(function(){

    var students = {
        "dennis":true,
        "zoe":true,
        "ken":true, 
        "carol":true
    };

    // a function to count elements in an JS object
    function countObject(obj) {

        var size = 0, key;

        for (key in obj) {
            if (obj.hasOwnProperty(key)) size++;
        }

        return size;
    };

    // get the number of elements in an object
    var studentTotal = countObject(students);

    // display the initial text on the page
    $('#totalStudent').text("Our class has " + studentTotal + " students in total.");

    // click event
    $('#callTheRoll').click(function(){

        // use a for loop to call everyone in the object
        for(var element in students){

            alert("Is " + element + " in class?");

            $('#dialogText').text("Is " + element + " in class?");

            // pop up the dialog
            $( "#dialog-confirm" ).dialog({
                resizable: false,
                height:210,
                modal: true,
                buttons: {
                    "Yes": function() {
                        $( this ).dialog( "close" );
                    },
                    "No": function() {
                        $( this ).dialog( "close" );
                    }
                } 
            }); // end of the custom-made confirm button setting    

        }

    });


});

Here is my jsfiddle: http://jsfiddle.net/dennisboys/TtJdC/1/

Answer 1

Please see my fiddle jsfiddle.net/G6FXe/1/ for your solution.

Your script should be like this:

$(document).ready(function(){

    //Make the object in array 
    var students = [
        {"name" : "dennis", "class" : true},
        {"name" :"zoe" , "class":true},
        {"name" :"ken", "class":true},  
        {"name" :"carol", "class":true}
    ];



    // get the numbers of students
    var studentTotal = students.length;

    // display the initial text on the page
    $('#totalStudent').text("Our class has " + studentTotal + " students in total.");

    click_counter = 0;

     // click event
    $('#callTheRoll').click(function(){
        // alert("Is " + element + " in class?");

        if(click_counter >= studentTotal){
         click_counter = 0; //if all process you can reset the counter to run the students again
        }
       // set element on what object
        element = students[click_counter].name;
            $('#dialogText').text("Is " + element + " in class?");

            // pop up the dialog
            $( "#dialog-confirm" ).dialog({
                resizable: false,
                height:210,
                modal: true,
                buttons: {
                    "Yes": function() {
                         students[click_counter].class = true;
                        click_counter++;
                        $( this ).dialog( "close" );
                        //alert(JSON.stingify(students));
                    },
                    "No": function() {
                        students[click_counter].class = false;
                        click_counter++;
                        $( this ).dialog( "close" );
                        alert(JSON.stringify(students));
                    }
                } 
            }); // end of the custom-made confirm button setting

    });




});

Answer 2

I think you can change your code like this.

$(document).ready(function(){

    var students = {
        "dennis":true,
        "zoe":true,
        "ken":true, 
        "carol":true
    };

    // a function to count elements in an JS object
    function countObject(obj) {

        var size = 0, key;

        for (key in obj) {
            if (obj.hasOwnProperty(key)) size++;
        }

        return size;
    };

    // get the number of elements in an object
    var studentTotal = countObject(students);

    // display the initial text on the page
    $('#totalStudent').text("Our class has " + studentTotal + " students in total.");
    function showDialog(name, callback) {
        return function() {
            $('#dialogText').text('Is ' + name + 'in the class?');
            $( "#dialog-confirm" ).dialog({
                resizable: false,
                height:210,
                modal: true,
                buttons: {
                    "Yes": function() {
                        $( this ).dialog( "close" );
                        callback && callback();
                    },
                    "No": function() {
                        $( this ).dialog( "close" );
                        callback && callback();
                    }
                } 
            }); // end of the custom-made confirm button setting
        }
    }

    // click event
    $('#callTheRoll').click(function(){
        var queue = [];
        for (var name in students) {
            queue.push(
                showDialog(name, function() {
                                            var fn = queue.shift();
                                            if (fn) {
                                                fn();
                                            }
                                        }
                )
            );
        }
        var fn = queue.shift();
        if(fn) {
            fn();
        }
    });


});

I have tested it. http://jsfiddle.net/TtJdC/2/