How do I close a dialog using jQuery?

Question

I am using the code below to create a jQuery UI Dialog widget dynamically:

 $(function () {
        var Selector = $(\"a:contains(\'sometext\')\");
        $(Sel         


        

Answer 1

Because this shows up early in the search for creating a dynamic dialog in jquery, I'd like to point out a better method to do this. Instead of adding your dialog div and content to the HTML and then calling it, you can do this much more easily by shoving the HTML directly into a jquery object, as so:

$(function () {
    $("a:contains('sometext')").click(function() {
        var NewDialog = $('
\
            
This is your dialog content, which can be multiline and dynamic.
\
        
');
        NewDialog.dialog({
            modal: true,
            title: "title",
            show: 'clip',
            hide: 'clip',
            buttons: [
                {text: "Submit", click: function() {doSomething()}},
                {text: "Cancel", click: function() {$(this).dialog("close")}}
            ]
        });
        return false;
    });
});

I've also showed how you can put multiple buttons with inline functions, instead of attaching a live() function to the button. I've used this method in a couple of places and it works great for me. It also supports forms (I grabbed the data in doSomething() and submitted through ajax, but other methods work too), etc.