Geek Answers Handbook

How to open url in JQUERY UI dialog

I have been looking for a simple solution for quite some time. I need a page (e.g. http://www.google.com ) that will be displayed in the JQuery UI dialog box. The plan is to subsequently add the URL dynamically, so that all links from my site will be displayed in the specified window.

I tried the following, but when I click on the link, the dialog box is empty.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Test</title> <meta charset="utf-8" /> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> <script> $(document).ready(function() { $('#openwindow').each(function() { var $link = $(this); var $dialog = $('<div></div>') .load($link.attr('href')) .dialog({ autoOpen: false, title: $link.attr('title'), width: 500, height: 300 }); $link.click(function() { $dialog.dialog('open'); return false; }); }); }); </script> </head> <body> <a id="openwindow" href="http://www.google.com">Click me to test.</a> </body> </html>

I found some examples, but none of them worked. I would really appreciate help.

Thanks in advance.

+7
source share
4 answers

You don't need an iframe as suggested, but you should read the dialog documentation here .

Instead, you need to load the contents in the .open property -

 $( "#openwindow" ).dialog({ open: function(event, ui) { $('#divInDialog').load('test.html', function() { alert('Load was performed.'); }); } });

Also, you seem to be using .each with id - id should be unique on the page. Use class instead.

+14
source

You can try this

 $(function(){ $('a').on('click', function(e){ e.preventDefault(); $('<div/>', {'class':'myDlgClass', 'id':'link-'+($(this).index()+1)}) .load($(this).attr('href')).appendTo('body').dialog(); }); });

A new dialog will be created above the code when you click on any link on your page, and also add the class name myDlgClass and a unique identifier for each dialog box, for example link-1 , link-2 , etc., but remember that only a link to the page will not be downloaded via an external link due to the same origin policy.

Update:

To use a link to an external site, you can use an iframe , here is an example using iframe .

+5
source

This may help .. Here, what I am doing, I am on the link, and the URL opens in a dialog box. You should use class instead of id if several identical tags are created dynamically .. Otherwise, it will work for only one id .

 $('.openwindow').click(function(){ var $this=$(this); $.ajax({ url: $this.attr('href');//You got the link here success: function(data) { //show the dialog here.. //"data" contains the html returned by the url }, error: function(jqXHR){ //Do something here } }); });
+1
source

You can use iframe:

  $("#iframeId").attr("src", $(this).attr("href")); $('#dialogId').dialog('open'); 
 <div id="divId" > <IFRAME id="iframeId" SRC="" width="" height = "" > </div>
0
source

More articles:


All Articles