Question

I have a button that when clicked loads an external page (same domain) in to a div and displays that div as a jQuery UI dialog box.

<div id="Dialog_box"></div>

<script type="text/javascript">
    $(function() {
        $("#Dialog_box").dialog({
            autoOpen: false,
            modal: true,
            width: 500,
            height: 400,
            title: "Dialog",
            close: function(event, ui) {
                $("#Dialog_box").html(""); // Ensure the page is no longer loaded
            }
        });
    });

    function openDialog() {
        $(document).ready(function() {
            $("#Dialog_box").load("dialog.php").dialog('open');
        });
    }
</script>

<button onclick="openDialog();">Open Dialog</button>

The first time the button is clicked it opens fine. After closing it then it will no longer come back up.

First I verified that it was in fact being closed upon hitting the ‘X’

$("#Dialog_box").dialog({
    ...
    close: function(event, ui) {
        alert("Closed");
    }
});

And the alert was being shown. I then tried using my normal code but did not load in the page

$("#Dialog_box").dialog('open');

At this point, the dialog would open and close properly without any problems. Although I don’t believe it should matter, I even tried separating out the load and dialog commands

    function openDialog() {
        $(document).ready(function() {
            $("#Dialog_box").load("dialog.php");
            $("#Dialog_box").dialog('open');
        });
    }

Once again, the box would display the first time but would not reappear after that.

My external file essentially looks like this

<link type="text/css" href="path/to/style.css" rel="stylesheet" />
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $("#Submit_button").click(function() {
        // Do stuff with form data
        // POST data without changing page
    });
});
</script>

<form action=''>
    // Input fields
    <input type="button" id="Submit_button" />
</form>

Just for clarification, the problem occurs whether or not I post my form.

Why won’t the dialog box re-open after I’ve loaded (and to my understanding, unloaded) a page in to it?

Answer 1

Remove the line to embed jquery.js from the external file.
This line will load jQuery again, overwrite the existing jQuery, what will destroy the already instantiated dialog-object, because it’s registered in the overwritten jQuery-instance.

To clarify: you don’t need to embed jquery and jqueryui again, because if you use $.load() the returned fragment will be a part of the DOM of the requesting document(they already exist there).