How do you open a URL in a dialog box JQUERY UI

Question

I've been looking for a simple solution for quite some time. I want a page (for example http://www.google.com) to be displayed in a JQuery UI Dialog window. The plan is to later add the URL dynamically so all links from my site will be displayed in said window.

I tried the following, but the dialog window is empty when clicking on the link.

<!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 a few examples, but none actually worked. I'd really appreciate some help.

Thanks in advance.

basically you want an ajax call is it?

Anubhab
– Anubhab

2013-03-17 09:27:38 +00:00
Commented Mar 17, 2013 at 9:27 — Anubhab
– Anubhab, Commented Mar 17, 2013 at 9:27

Sid M · Accepted Answer · 2015-07-01 07:07:52Z

15

You don't need an iframe as has been suggested, but you should read the documentation on dialogs here.

Instead, you need to load the content on the .open property --

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

Also, you seem to use .each with an id -- the id is supposed to be unique within the page. use class instead.

edited Jul 1, 2015 at 7:07

Sid M

4,3744 gold badges33 silver badges51 bronze badges

answered Mar 17, 2013 at 9:16

Nick Andriopoulos

10.7k6 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Barmar Over a year ago

You can't use .load() if the URL is in another domain, because of cross-domain AJAX restrictions.

The Alpha · Accepted Answer · 2013-03-17 11:16:07Z

7

You may 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();
    });
});

Above code will create a new dialog on clicking on any link on your page and also add a class name myDlgClass and an unique id for each dialog like link-1, link-2 and so on, but remember that only page link will be loaded not external link because of same origin policy.

Update :

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

edited Mar 17, 2013 at 11:16

answered Mar 17, 2013 at 9:37

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:25:13Z

1

This might help.. Here what i am doing is i am hovering on a link and the url is opening in a dialog box.. You should use class instead of id if multiple same tags are getting created dynamically..ohterwise it will work for only single 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
                }
              });
        });

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Mar 17, 2013 at 9:34

Anubhab

1,7862 gold badges18 silver badges28 bronze badges

Comments

Ram · Accepted Answer · 2013-03-17 09:15:18Z

0

You can use iframe:

 $("#iframeId").attr("src", $(this).attr("href"));
 $('#dialogId').dialog('open');

<div id="divId" >
    <IFRAME id="iframeId"  SRC="" width="" height = "" >
</div>

edited Mar 17, 2013 at 9:15

Ram

145k16 gold badges174 silver badges201 bronze badges

answered Mar 17, 2013 at 9:10

PSR

40.4k43 gold badges115 silver badges154 bronze badges

Comments

user2989397 · Accepted Answer · 2022-05-12 20:09:48Z

I know this is old, but none of the above suggestions worked for me. After much investigation, I found this very simple solution. Add a link object to the document, set the href param on it, and click it, programmatically. No iframe, no dialog, just the download. I needed to fetch a signed S3 url based on user action on the page and provide for the download of the file. I wasn't allowed to populate the page with signatures that would last a long time. Here is my ajax:

$.ajax({
    type: "GET",
    url: actionUrl,
    complete: function(data) {
        var signedS3url = data.responseText;
        var link=document.createElement('a');
        document.body.appendChild(link);
        link.href=signedS3url;
        link.click();                               
    }
});

Collectives™ on Stack Overflow

How do you open a URL in a dialog box JQUERY UI

5 Answers 5

1 Comment

Update :

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Update :

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related