CODEWITHSUNDEEP
jqueryhtmljquery-dialog
slandau
slandau

Reputation: 24052

JQuery Dialog Help

So I have a button on my UI that calls this Javascript function:

function OpenHistory(transactionId, spanThatWasClicked)
    {   
        $.ajax({
            type: "POST",
            url: "<%= Url.Action("ViewHistory", "Indications") %>",
            data : { transactionId : transactionId },
            success: function(data) {
                $("#history").html(data);
                $("#history").dialog({
                    modal: true,
                    resizable: false,
                    title: "Valuation History",
                    width: 850,
                    height: 500,
                    autoOpen: true,
                    buttons: { "Close": function () { $(this).dialog("close"); } }
                });
            }
        });
    }

The #history it's setting just looks like this on the page: <div id="history"></div>

First time I click it -- makes the AJAX call, opens the dialog, everything looks perfect.

Close the dialog

Second time I click it -- nothing happens. It makes the AJAX calls and everything, but no dialog appears on the screen.

Refresh the page

It goes back to working again on the FIRST click only, just like last time.

Is this some dialog weirdness?

Thanks.

Upvotes: 2

Views: 237

Answers (3)

ebrown
ebrown

Reputation: 801

You should only call this once to create the dialog

           $("#history").dialog({
                modal: true,
                resizable: false,
                title: "Valuation History",
                width: 850,
                height: 500,
                autoOpen: true,
                buttons: { "Close": function () { $(this).dialog("close"); } }
            });

To open the dialog call $("#history").dialog("open");

I recommend creating your dialogs when the page is first loaded with autoOpen: false and opening them as needed

Upvotes: 0

Naftali
Naftali

Reputation: 146302

Try changing the success code to this:

      success: function(data) {
            $("#history").html(data)
             .dialog({
                modal: true,
                resizable: false,
                title: "Valuation History",
                width: 850,
                height: 500,
                autoOpen: true,
                buttons: { "Close": function () { $(this).dialog("close"); } }
            }).dialog('open');
        }

This way it will make sure its open with the dialog('open') call

Upvotes: 2

Marek Karbarz
Marek Karbarz

Reputation: 29294

I think it's because the dialog was already created once the autoOpen doesn't trigger on subsequent calls. Try adding $("#history").dialog("open") in the ajax call and see if that helps. You could add some optimization to make sure you don't call the original dialog creation code twice (some kind of a boolean variable)

Upvotes: 0

Related Questions