title: JQuery Dynamic Dialog Div
body: <p><strong>Background:</strong><br/>
  A table with rows is created dynamically with php on a page.
  Using <em>jquery-ui-1.8.14.custom.min.js</em> and <em>jquery-1.5.1.min.js</em><br/><br/>
  <strong>Goal:</strong>
  I'd like to be able to click on a row which would update the Jquery Ui dialog div with new content from a php page and then display this content in the Jquery Ui dialog box.</p>
  
  <pre><code>$(function(){
    $('tr').live('click', function(){
      $('.ui-dialog').load('&lt;?php echo base_url();?&gt;index.php/a/b/1');
      $('.ui-dialog').dialog('open');
    });
  });
  </code></pre>
  
  <p>This code makes the dialog appear and disappear very fast without halting.
  I've also tried the following which I thought would work:</p>
  
  <pre><code>$(function(){
    $('tr').live('click', function(){
      $('.ui-dialog').load('&lt;?php echo base_url();?&gt;index.php/a/b/1',
        function(){
          $('.ui-dialog').dialog('open')
      });
    });
  });
  </code></pre>
  
  <p>Dialog code:</p>
  
  <pre><code>$(function(){$('.ui-dialog').dialog({
          autoOpen: false,
          width: 600,
          draggable: true,
          resizable: true,
          open: function(){
                          $('.ui-widget-overlay').fadeIn();},
          beforeClose: function(){
                          $('.ui-widget-overlay').fadeOut();},
          show: "fade",
          hide: "fade", 
          buttons: {
          "Back to search": function() { 
              $(this).dialog("close"); }
          }
      })});
  </code></pre>
  
  <p>Any help is very much appreciated. Thanks.</p>