javascript - jQuery UI Dialog not opening a second time

Question

I am using jqueryui for a dialog box. Clicking on the 'Click for a modal' link the first time works. When pressing the ESC key, the dialog box disappears. But the clicks after that don't work. I want those to work as well. Refreshing the page makes everything OK.

HTML:

<a href="" class="click_me" style="font-size:15px;"> Click for a modal</a><br />

<div class="demo" ">

<div id="dialog" title="&nbsp;&nbsp;&nbsp;Upload Your Profile Picture" style="border1111:1px solid red; width:640px;">

       this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is   


</div><!-- end of id dialog -->
</div><!-- End demo -->

jQuery snippet:

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>   
<script type="text/javascript" src="js/jquery-ui.min.js"></script>

<script  type="text/javascript">

$(document).ready(function () {

    $(".click_me").bind('click', function (e) {
        e.preventDefault();
        $("#dialog").css('border', '5px solid #848484');
        $("#dialog").dialog({
            width: 460
        });
        //$( "#dialog" ).dialog( "option", "height", 180 );
    });

    $("body").bind("keyup#dialog", function (event) {
        // 27 == "esc"
        if (event.which == 27) {
            // TODO: close the dialog
            // unbind the event
            $("body").unbind("keyup.myDialog");
        }
    });

});
</script>   

How can I make multiple clicks work?

Answer 1

Four things.

Firstly, if the dialog should be reusable, you'll want to create it before the first click and set the autoOpen option to false. To open the dialog, you should use dialog('open').

For example:

$(document).ready(function () {

    var dialog = $('#dialog');

    dialog.dialog({              // <-- create the dialog
        width:    460,
        autoOpen: false
    });

    $(".click_me").bind('click', function (e) {
        e.preventDefault();
        dialog.dialog('open');   // <-- open the dialog
    });
});

Note that I create a var dialog to save $('#dialog'). This is more efficient, because otherwise, jQuery would have to look for #dialog multiple times in one piece of code.

Secondly, you have an error in your HTML: there is one quote too many here:

<div class="demo" ">

This might cause unexpected behaviour in some browsers (but not all), which makes it hard to debug. Remove the extra quote.

Thirdly, if I recall correctly, jQuery UI Dialog already handles the ESC key, so you don't have to do that yourself. If you want to do something other than close the dialog when exscape is pressed, you should actually use the dialog's beforeClose event. If all you want to do is close the dialog; you're all set. :-)

And finally, it's good practice not to use inline styles. So instead of this:

<a href="" class="click_me" style="font-size:15px;">Click for a modal</a>

Create a CSS file with the following:

.click_me {
    font-size:15px;
}

You can do the same for #dialog, including the border you're now applying with JavaScript:

#dialog {
    border: 5px solid #848484;
    width:640px;
}

Hope this helps.

---

Here is a working example which applies the four points I mentioned: http://jsfiddle.net/PPvG/yHTJw/

Note that the jQuery UI styles are missing, so the dialog is a bit ugly. :-)

---

To ensure the Dialog works as expected, make sure that you are using the latest versions of jQuery and jQuery UI and that you include a jQuery UI Theme.

Here is an example where everything is loaded via Google CDN:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />

Include these in the <head> of your HTML. The result should look like this. If it doesn't, you can try a couple of things:

• Have a look at your browser's JavaScript console (every modern browser has one; Google it).
• Try a different browser.
• Try a different way of loading the page (e.g. via file:// versus via localhost).
• (Extreme case:) Try a different computer and a different internet connection.

If none of those work, I'm sorry to say, but... "you're doing it wrong". :-P

Note that the snippet above will include the default jQuery UI theme called "base". If it doesn't fit your needs, you can use Google CDN for a few other default themes (see this blog post), or you can create your own theme using ThemeRoller.

---

Edit:

To make sure the Dialog retains focus (and thus is closed when the user presses ESC, even if the user clicked somewhere else on the page), try setting modal to true:

 $('#dialog').dialog({
    autoOpen: false,
    modal: true
});

jsFiddle: http://jsfiddle.net/PPvG/yHTJw/3/

Normally, the user can still interact with other items on the page (and, consequently, those items can grab focus away from the Dialog). When the modal option is set to true, the user can no longer iteract with the rest of the page and the Dialog will keep focus no matter what.

Hope this helps.