jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs
JqueryJquery UiModal DialogJquery Problem Overview
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.
Jquery Solutions
Solution 1 - Jquery
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
Solution 2 - Jquery
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;
});`
Solution 3 - Jquery
//Properly Formatted
<script type="text/Javascript">
$(function ()
{
$('<div>').dialog({
modal: true,
open: function ()
{
$(this).load('mypage.html');
},
height: 400,
width: 600,
title: 'Ajax Page'
});
});
Solution 4 - Jquery
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>
Solution 5 - Jquery
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;
});
});
Solution 6 - Jquery
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
Solution 7 - Jquery
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.
- openDialogwithiFrame(url) :- This can open any external url in the model dialog. But it uses iframe.
- 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"
Solution 8 - Jquery
<a href="javascript:void(0)" onclick="$('#myDialog').dialog();">
Open as dialog
</a>
<div id="myDialog">
I have a dialog!
</div>