Question

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.

Answer 1

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