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 l开发者_如何学运维ast time.

Is this some dialog weirdness?

Thanks.

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

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)

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