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?

Solution 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.

Solution 2

try using $("#dialog").close(); instead of $("body").unbind("keyup.myDialog");

Comments

[Istiaque Ahmed]

actually if I exclude the 'esc' key bind and unbind , thoings remain the same . What would be the solution if i exclude that?

[redmoon7777]

the problem comes from some other part of your code (I tested this bit and it works fine). Are the ".click_me" links newly created (after ajax call or some event)

[Istiaque Ahmed]

not newly created.. oh in that case i have to check the posted snippet again. but Chris has an informative answer. I am yet to go through tha

[Istiaque Ahmed]

When the dialog appears after a click, if u click outside of the dialog area itself, then pressing the 'Esc' key does not make it disappear. And the 'close' option does not appear when I tried in localhost. solution?

[Peter-Paul van Gemerden]

@IstiaqueAhmed: works fine for me (appart from the styles, as mentioned). Try this: pastie.org/3116949. You will need internet to load jQuery or change the <script> URL's to point to local versions of jQuery and jQuery UI.

[Istiaque Ahmed]

probable I could not make it clear to u. I just copied the code from pastie and pasted it on to my editor and ran in localhost. same problem exists

[Peter-Paul van Gemerden]

@IstiaqueAhmed: you made it perfectly clear, but as I said: it works fine for me. Both when opening locally (i.e. via file://) and when viewing via an httpd on localhost. So it's probably a configuration problem on your end. Note: when I say it works perfectly, I mean that there is an working, but unstyled "close" link. Not a button. This is because you still have to choose and load a theme.

[Istiaque Ahmed]

i tested ur theme url(jqueryui.com/themeroller) in chrome and FF. same is true for me. What prob on my end? the jqueryui site delivers the same prob. And in the mean time I have been awarded 2 minus ratings

[Peter-Paul van Gemerden]

let us continue this discussion in chat

[Peter-Paul van Gemerden]

I'm sorry, but I can't stay in chat forever. Have a look at my newest edit. What do you mean by "the jQuery UI site delivers the same problem"?

[Istiaque Ahmed]

i did not notice that u asked for chat. when i click on the link to open up in a new window in th jquery ui site, then the dialog window appears. now if click on the webpage except on the modal window, and press the 'esc' keu, the dialog window does not disapear. if i click on the dialog window again and press the 'esc' key, then the window disappears

[Peter-Paul van Gemerden]

@IstiaqueAhmed: Ah, I see. Try setting modal to true. See my latest edit.

[Peter-Paul van Gemerden]

@IstiaqueAhmed: in the answer above: "To make sure the Dialog retains focus [...], try setting modal to true" and in the jsFiddle.