Home/ Questions/Q 6726599
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T09:56:46+00:00

I have 2 pages. The first page has a dialog that gets populated with

  • 0

I have 2 pages. The first page has a dialog that gets populated with content from another page via jQuery’s load(). This content also has a dialog in it. For some reason, the first time the content is loaded, it works just fine, but if it is used again, the dialog content from the second page is being shown as a section of that page instead of just being a hidden dialog.

Here is a sample I whipped up quick just to see if it was something else on the page or if it’s something wrong with how I am doing it. It’s obviously me. 🙂

Page 1:

<!DOCTYPE html>
<html>
<head>
    <link id="Link1" type="text/css"     href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
</head>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<div>
    Document 1.
    <a class="ajax" href="http://localhost/doc2.html" >Click Here</a>
</div>

<script>
    $(document).ready(function () {
        $('a.ajax').click(function () {
        var url = this.href;
        var dialog = $('<div></div>').appendTo('body');
        dialog.load(
                url,
                null,
                function (responseText, textStatus, XMLHttpRequest) {

                  dialog.dialog({
                    resizable: false,
                    modal: true,
                    width: '600',
                    height: 'auto',
                    position: 'center',
                    show: "fade",
                    hide: "fade",
                    center: true,
                    close: function (event, ui) {
                      dialog.remove();
                    }
                  });
                }
        );

        return false;
      });
    });
</script>

</body>
</html>

Page 2:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<div>
    document 2
    <button id="popupButton">Click here to show popup</button>
</div>

<div id="dialog-message">
   This is the popup in document 2.
</div>

<script>
      $(document).ready(function () {
        $("#dialog-message").dialog({
          show: 'blind',
          autoOpen: false,
          modal: true,
          resizable: false,
          width: 900,
          height: 400,
          buttons: {
            Ok: function () {
              $(this).dialog("close");
            }
          }
        });

       $("#popupButton")
              .button()
              .click(function () {
                $("#dialog-message").dialog("open");
              });
      });
</script>

</body>
</html>

*Note – for some reason the dialog in page 2 is not working, but it is in my other pages, so I’m not worried about that. I’m just worried about the strange behavior of the dialog content showing up in the page.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I found a work around, but unsure this is the proper solution. Since it works, I’m going to run with it.

    In page 1 I changed the javascript:

    <script>
    $(document).ready(function () {
        $('a.ajax').click(function () {
            var url = this.href;
            var dialog1 = $('<div></div>').appendTo('body');
            dialog1.load(url, null,
                    function (responseText, textStatus, XMLHttpRequest) {
                      dialog1.dialog({
                        resizable: false,
                        modal: true,
                        width: '600',
                        height: 'auto',
                        position: 'center',
                        show: "fade",
                        hide: "fade",
                        center: true,
                        close: function (event, ui) { 
                            dialog1.remove(); 
                            $("#dialog-message").remove();
                        }
                      });
                    }
            );

            return false;
        });
    });
</script>

    In page 2, I had to do this to make the popup work:

    <script>
    $(document).ready(function () {
        $("#dialog-message").hide();

        $("#popupButton").button().click(function () {
            $("#dialog-message").dialog({
              show: 'blind',
              autoOpen: true,
              modal: true,
              resizable: false,
              width: 900,
              height: 400,
              zIndex: 9999,
              open: function(event, ui) { $("dialog-message").show(); },
              buttons: {
                Ok: function () {
                  $(this).dialog("close");
                }
              }
            });
        });
    });
</script>
    • 0