Red Is A Flavor

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>

Permalink