Question

I have the following scenario:

A button opens a modal dialog which contains a checkbox. When I click on this checkbox, I want another modal dialog (a warning) to be displayed, but I also want to keep the new checkbox state (either checked or unchecked). For example, if the checkbox is unchecked and is clicked on, I expect the warning to be displayed and the checkbox to become checked.

The first part (opening a modal dialog over an existing modal dialog) is working correctly, but the second part isn’t (the checkbox never becomes checked). To be honest, while debugging I noticed the checkbox actually does become checked during event handling, but for some reason which I was unable to determine, it is reverted back to its original state.

I also noticed that the revert problem doesn’t happen if I have a select field or a radio button instead of a checkbox, and it also doesn’t happen if either dialog is not modal.

Here’s my code (demo: http://jsbin.com/amiyu4/2):

$(document).ready(function() {
  $('#myButton').button();

  $('#myButton').click(function() {
    var $dialog = $('<div><input type="checkbox" id="myCheckbox"/> <label for="myCheckbox">Show warning</label></div>');
    $dialog.dialog({
      modal: true,
      title: 'Modal dialog',
      buttons: {
        'Ok': function() {
          $(this).dialog('close');
        }
      },
      width: 600
    });

    $dialog.find('#myCheckbox').change(function() {
      var $alert = $('<div>Warning!</div>');
      $alert.dialog({
        autoOpen: true,
        modal: true,
        title: 'Warning',
        buttons: {
          'Ok': function() {
            $(this).dialog('close');
          }
        }
      });
    });

    $dialog.dialog('open');
  });
});

My actual questions are:

1) Why doesn’t the checkbox ever become checked?

2) What can I do to make it both become checked and display the warning?

EDIT: I forgot to mention: this was tested in Chrome. In Firefox the code above works. In Internet Explorer it fails.

Answer 1

I’ll answer your questions:

1) Why doesn’t the checkbox ever
become checked?

There’s a jquery-ui bug related to this with that happens only in IE, related to execution order. If you run your code in other browsers, it’ll do fine.

2) What can I do to make it both
become checked and display the
warning?

You should add a small delay when clicking the checkbox. So you’ll have:

$dialog.find('#myCheckbox').change(function() {
      setTimeout(function(){  //This does the trick!!
        var $alert = $('<div>Now it works!!</div>');
          $alert.dialog({
            autoOpen: true,
            modal: true,
            title: 'Warning',
            buttons: {
              'Ok': function() {
                $(this).dialog('close');
              }
            }
        });
      }, 10);
    });

I tested it and it works as expected.
Hope this helps.
Cheers