How to Load an External Page Into a jQuery Dialog

You may already know how to operate jQuery dialog within a web page, but actually, you can load an external page or url into a dialog. Here are the steps that how I implement it:

In HTML section, you should:

  • Import 2 jQuery API cdn: They are jQuery and jQuery UI.
  • Import 1 jQuery UI CSS cdn: We choose "smoothness" for our theme in this example.
  • Import 1 customized local jquery file.
  • Add 1 listener element: I use a button to listen users' click and make the dialog opening.
  • Add 1 empty <div> element: For containing the external page.

Here is the code snippet of HTML section:

<html>
  <head>
    ...
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="js/jquery-local.js"></script>
  </head>
  <body>
    ...
    <button id='open-dialog'>
      Show Login Form
    </button>
    <div id='dialog-form' title='Login'>
    </div>
    ...
  </body>
</html>

In local jQuery section, you should customize jquery codes in the file "js/jquery-local.js", you need two blocks of codes under "document" ready:

  • The first block: To define and configure the div#dialog-form as a dialog.
  • The second block: It's an event function which belongs to the button#open-dialog for listening users' clicks and loading external page to the right dialog.

Here is the code snippet of local jQuery section:

$(document).ready(function() {
...
  //The first block of code.
  $("#dialog-form").dialog({
    autoOpen : false,
    height : 300,
    width : 350,
    modal : true,
  });

  //The second block of code.

  $("#open-dialog").click(function() {
    $("#dialog-form").load("login/login.php").dialog("open");
  });
...
});

The key step is in the second block of codes (highlighted), which means the jQuery will load a page content before we open the dialog.

Since .load() is a simplified ajax function in essence, you can use .ajax() to customize more details instead.

Leave a Reply

Your email address will not be published. Required fields are marked *