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/

So you want to make the name loop and keep the buttons appearing for eg. Carol [ yes or no ?] , Zoe [ yes or no?] and so forth. ? — Drixson Oseña
– Drixson Oseña, Commented Aug 7, 2013 at 2:54
Hi Drixson, Yes, I have been trying to do that for a whole day but with no luck. — Dennisboys
– Dennisboys, Commented Aug 7, 2013 at 2:55

Funk Forty Niner · Accepted Answer · 2013-08-07 08:06:47Z

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

    });




});

edited Aug 7, 2013 at 8:06

Funk Forty Niner

74.2k14 gold badges71 silver badges146 bronze badges

answered Aug 7, 2013 at 3:25

Drixson Oseña

3,6313 gold badges25 silver badges36 bronze badges

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

2 Comments

Dennisboys Over a year ago

Drixson! Thank you very very much. This is almost what I want, if I can just click the 'call the roll' button once and then the dialog appears one by one from beginning to end. That would be perfect! But you have helped me a real lot, I will try to figure out if I can make it perfect!

Drixson Oseña Over a year ago

My pleasure to help you :), I am also in learning. Just found your work to be fun. Don't forget to mark it an answer. Thanks!

kai han · Accepted Answer · 2013-08-07 03:28:29Z

1

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/

answered Aug 7, 2013 at 3:28

kai han

71 bronze badge

3 Comments

Dennisboys Over a year ago

OMG, kai han, you really save my day! Thanks for your solution! This is a perfect solution and is exactly what I want. Thank you again for your help!

Dennisboys Over a year ago

Your code is very difficult to understand though, quite beyond me.

kai han Over a year ago

It is my honor to help you :)!

Collectives™ on Stack Overflow

How can I dynamically control jquery UI dialog box?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related