58

The AJAX tabs work perfectly well. It's pretty straightforward with that part. However, getting the AJAX UI Dialog modal window to trigger off of a link has been unsuccessful.

Any help in this would be appreciated.

Improve this question

8 Answers 8

Reset to default
120

Nothing easier than that man. Try this one:

<?xml version="1.0" encoding="iso-8859-1"?> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script> <style> .loading { background: url(/img/spinner.gif) center no-repeat !important} </style> </head> <body> <a class="ajax" href="http://www.google.com"> Open as dialog </a> <script type="text/javascript"> $(function (){ $('a.ajax').click(function() { var url = this.href; // show a spinner or something via css var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body'); // open the dialog dialog.dialog({ // add a close listener to prevent adding multiple divs to the document close: function(event, ui) { // remove div with all data and events dialog.remove(); }, modal: true }); // load remote content dialog.load( url, {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object function (responseText, textStatus, XMLHttpRequest) { // remove the loading class dialog.removeClass('loading'); } ); //prevent the browser to follow the link return false; }); }); </script> </body> </html>

Note that you can't load remote from local, so you'll have to upload this to a server or whatever. Also note that you can't load from foreign domains, so you should replace href of the link to a document hosted on the same domain (and here's the workaround).

Cheers

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

14 Comments

@FFish updated answer with a note about cross domain ajax. You cannot just copy'n'paste the source unless you can upload files to google.com ;)
Ok, cheers. Got it working on localhost (XAMPP) loading a file with a relative path.
jquery.load does not seem to ejecute the javascript contained in the remote content
regarding embedded <script></script> tags i've never got any problems to get those executed. even multiple occurences worked fine. nevertheless debugging those script chunks is indeed a hazzle, e.g. a syntax error won't show as js error in the browsers console but just avoids the script execution.
curious - why doesn't the 'nothing easier than this' answer (above) not work? it looks logical? 206.251.38.181/jquery-learn/ajax/iframe.html
|
34

To avoid adding extra divs when clicking on the link multiple times, and avoid problems when using the script to display forms, you could try a variation of @jek's code. 

$('a.ajax').live('click', function() { var url = this.href; var dialog = $("#dialog"); if ($("#dialog").length == 0) { dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body'); } // load remote content dialog.load( url, {}, function(responseText, textStatus, XMLHttpRequest) { dialog.dialog(); } ); //prevent the browser to follow the link return false; });`
Improve this answer

2 Comments

Good point indeed.. would you mind if I include this tweak in my original answer?
The following page diggs nicely into such issues and uses jQuery's one() function to accomplish the same functionality: blog.nemikor.com/category/jquery-ui/jquery-ui-dialog Since it uses dialog('open') it does not need special close() treatment.
25

//Properly Formatted 

<script type="text/Javascript"> $(function () { $('<div>').dialog({ modal: true, open: function () { $(this).load('mypage.html'); }, height: 400, width: 600, title: 'Ajax Page' }); });

Improve this answer

2 Comments

This is definitely the best and cleanest answer.
a couple of things missing; you should "return false", and jQuery recommend explicitly closing tags $("<div></div>")
11

Just an addition to nicktea's answer. This code loads the content of a remote page (without redirecting there), and also cleans up when closing it.

<script type="text/javascript"> function showDialog() { $('<div>').dialog({ modal: true, open: function () { $(this).load('AccessRightsConfig.htm'); }, close: function(event, ui) { $(this).remove(); }, height: 400, width: 600, title: 'Ajax Page' }); return false; } </script>
Improve this answer

Comments

5

Neither of the first two answers worked for me with multiple elements that can open dialogs that point to different pages.

This feels like the cleanest solution, only creates the dialog object once on load and then uses the events to open/close/display appropriately:

$(function () { var ajaxDialog = $('<div id="ajax-dialog" style="display:hidden"></div>').appendTo('body'); ajaxDialog.dialog({autoOpen: false}); $('a.ajax-dialog-opener').live('click', function() { // load remote content ajaxDialog.load(this.href); ajaxDialog.dialog("open"); //prevent the browser from following the link return false; }); });
Improve this answer

2 Comments

You can actually prevent the default action in the function by using: $('..').live('click', function(event) { event.preventDefault(); ... }); This way you can omit the return false; and prevent accidental triggery of the default click event.
As stated in response to CGK's answer, you may also be interested in this solution: blog.nemikor.com/2009/08/07/creating-dialogs-on-demand/… especially for multiple dialog elements
0

curious - why doesn't the 'nothing easier than this' answer (above) not work? it looks logical? http://206.251.38.181/jquery-learn/ajax/iframe.html

Improve this answer

Comments

0

I have combinded few of the answer and came up with below is JQuery code to open the external url in modal dialog box.

<html> <head> <script src="https://code.jquery.com/jquery-1.9.1.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js" integrity="sha256-PsB+5ZEsBlDx9Fi/GXc1bZmC7wEQzZK4bM/VwNm1L6c=" crossorigin="anonymous"></script> <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <body> <a href="https://wikipedia.com/" class="test">comment #1</a> <br> <a href="https://ebay.com/" class="test">comment #2</a> <br> <a href="https://ask.com/" class="test">comment #3</a> <br> <a class="ajax" href="https://api.github.com">Open github</a> <br> <a class="ajax" href="https://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity">Open code google</a> <br> <a class="ajax" href="https://enable-cors.org/">Open enable-cors</a> <br> <div id="somediv" title="this is a dialog" style="display:none;"> <iframe id="thedialog" width="350" height="350"></iframe> </div> <script type="text/javascript"> $(document).ready(function () { $(".test").click(function () { var url = $(this).attr("href"); return openDialogwithiFrame(url); }); }); </script> <script type="text/javascript"> $(function (){ $('a.ajax').click(function() { var url = this.href; return openDialogwithiFrame(url); }); }); function openDialogwithiFrame(url) { $("#thedialog").attr('src', url); $("#somediv").dialog({ width: 400, height: 450, modal: true, close: function () { $("#thedialog").attr('src', "about:blank"); } }); return false; } function openDialogwithoutiFrame(url) { // show a spinner or something via css var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body'); // open the dialog dialog.dialog({ // add a close listener to prevent adding multiple divs to the document close: function(event, ui) { // remove div with all data and events dialog.remove(); }, modal: true }); // load remote content dialog.load( url, //{}, omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object function (responseText, textStatus, XMLHttpRequest) { // remove the loading class dialog.removeClass('loading'); } ); //prevent the browser to follow the link return false; } </script> </body> </html>

The code has two function.

  1. openDialogwithiFrame(url) :- This can open any external url in the model dialog. But it uses iframe.
  2. openDialogwithoutiFrame(url):-This also open the external urls in the model dialog but one which has header “Access-Control-Allow-Origin” to correct value. I have put such url in the code for samples. This setting needs to be done at web server. Ref https://medium.com/pareture/simple-local-cors-test-tool-544f108311c5. For setting header “Access-Control-Allow-Origin” at Apache web server following below should de added in .htaccess of Apache server.
 Header set Access-Control-Allow-Origin “*” //Replace domain of host sites separated by comma for * Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS" Header always set Access-Control-Allow-Headers "content-type " Header always set Access-Control-Allow-Credentials "true"
Improve this answer

Comments

-1 
<a href="javascript:void(0)" onclick="$('#myDialog').dialog();"> Open as dialog </a> <div id="myDialog"> I have a dialog! </div>

See the example I posted on jsbin.com.

Improve this answer

1 Comment

Actually, I'm not sure this is what you're looking for, I'll come back and update unless someone else picked it up. Can you clarify what is causing the issue?