Geek Answers Handbook

Reopen the jQuery div dialog box

I have a button that, when clicked, loads an external page (the same domain) into a div and displays that div as a jQuery interface 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 you press a button, a fine opens. After its closure, it will no longer return.

At first I made sure that it was actually closed by pressing the "X" button

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

And a warning was shown. Then I tried using my regular code, but didn’t load on the page

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

At this point, the dialog will open and close properly without any problems. Although I do not think this is important, I even tried to separate the download and dialog commands

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

The window will be displayed again for the first time, but will not appear after that.

My external file looks something 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>

Only to find out the problem, the problem arises, can I submit my form.

Why won't the dialog box open after I have loaded (and, as far as I know, unloaded) the page into it?

+4
source share
2 answers

Remove the line to insert jquery.js from the external file. This line will load jQuery again, overwrite the existing jQuery, which will destroy the already created dialog object, because it is registered in the rewritten jQuery instance.

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

+6
source 
  $(function() { $( "#btnCallCompany" ).button().click(function() { $( "#divOpenConversation" ).dialog({ autoOpen: true, height: 500, width: 650, modal: true }); $.get("/Conversation.aspx",function(data){ $( "#divOpenConversation" ).html(data); }); }); });//end func
0
source

More articles:


All Articles