Posted At : March 19, 2009 11:33 AM | Posted By : Admin
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;
}
);
});
The "example" div is within the page. It's blank. But, get's populated by the open option within the dialog options. That's how I got around it.
Can anyone tell me if this is the "best practices" way of doing this? Is there a better more efficient way?
Dialog Demo