title: How can I dynamically control jquery UI dialog box?
body: <p>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.</p>
  
  <p>I want to make a call the roll program that would keep track of each selection and modify the Javascript object accordingly. </p>
  
  <p>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.</p>
  
  <p>Thanks for any kind helpers. </p>
  
  <pre><code>$(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    
  
          }
  
      });
  
  
  });
  </code></pre>
  
  <p>Here is my jsfiddle:
  <a href="http://jsfiddle.net/dennisboys/TtJdC/1/" rel="nofollow">http://jsfiddle.net/dennisboys/TtJdC/1/</a></p>