While working on a project recently, I needed a simple way of reusing a jQuery ajax dialog. The problem with the default jQuery UI dialog is that when it is closed, it is destroyed, making it unusable again.  I wanted a way to basically pass any URL to it and have it load in the dialog.

There are lots of plugins to accomplish this, but here is a dead simple way. Just surround the dialog div with a containing div (id=dialogcontainer), and recreate the dialog div (id= dialog) on each call.  The URL is passed via the value attribute.

<link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="ui/ui.core.js"></script>
<script type="text/javascript" src="ui/ui.draggable.js"></script>
<script type="text/javascript" src="ui/ui.resizable.js"></script>
<script type="text/javascript" src="ui/ui.dialog.js"></script>
<script type="text/javascript" src="external/bgiframe/jquery.bgiframe.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".ajaxdialog").click(function () {
	$("#dialog").destroy;
	$("#dialogcontainer").html("<div id="dialog"></div>");
	$("#dialog").load($(this).attr("value")+" form");
	$("#dialog").dialog({
		bgiframe: true,
		height: 400,
		width: 600,
		title:$(this).attr("title"),
		modal: true
	});
});
</script>
<div id="dialogcontainer"></div>
<h1>Reusable Ajax Dialog using jQuery</h1>
<div class="ajaxdialog" value="dialog/page1.aspx" title="Dialog Title1">Reusable Ajax Dialog 1</div>
<div class="ajaxdialog" value="dialog/page2.aspx" title="Dialog Title2">Reusable Ajax Dialog 1</div>
<div class="ajaxdialog" value="dialog/page3.aspx" title="Dialog Title3">Reusable Ajax Dialog 1</div>
<div class="ajaxdialog" value="dialog/page4.aspx" title="Dialog Title4">Reusable Ajax Dialog 1</div>

Leave a Reply

Your email address will not be published. Required fields are marked *