jQuery + ajax dialog + load external content
Posted At : March 19, 2009 11:33 AM | Posted By : Admin
Related Categories: Technology, Web20, Javascript
Related Categories: Technology, Web20, Javascript
I was intrigued by Ray Camden's blog about simple dialog popups with jQuery. I saw some of his examples and wanted to take them a step further.
http://www.coldfusionjedi.com/index.cfm/2009/2/1/Creating-a-Dialog-with-jQuery-UI
His example shows that the content is inline with the document and the jQuery code just extracts it from the page and shows it in a dialog box. Cool, yeah, but...what if you wanted to pull in external content?
This is what I came up with:
$(document).ready(function(){
//define config object
var dialogOpts = {
title: "My First AJAX dialog",
modal: true,
autoOpen: false,
height: 500,
width: 500,
open: function() {
//display correct dialog content
$("#example").load("beta/loremipsum.html");}
};
$("#example").dialog(dialogOpts); //end dialog
$('#showdialog').click(
function (){
$("#example").dialog("open");
return false;
}
);
});
Can anyone tell me if this is the "best practices" way of doing this? Is there a better more efficient way?
Dialog Demo
http://www.massimocorner.com/libraries/jquery/moda...
$("#example").load('beta/loremipsum.html').dialog({
title: "My First AJAX dialog",
modal: true,
autoOpen: false,
height: 500,
width: 500
});
Is it possible to load an external webpage such as http://www.google.com ?? I've tried, but the box disappears. What changes would it need to load a url?
Thanks in advance!
$(document).ready(function(){
var dialogOpts = {
modal: true,
bgiframe: true,
autoOpen: false,
height: 500,
width: 500,
draggable: true,
resizeable: true,
};
$("#example").dialog(dialogOpts); //end dialog
$('#showdialog').click(
function() {
$("#example").load("test.html", [], function(){
$("#example").dialog("open");
}
);
return false;
}
);
});
-jason
Please help me width this
Thanks