Question

Looking for some help on my AJAX/jQuery implementation.

I am trying to load some code dynamically into a jQuery Dialog.

There is some jQuery code inside which initializes the buttons and loads some tabs.

The problem is that the code inside the loaded content is not being executed on the second AJAX call. So everything works fine the first time, but not after closing the dialog and re-opening it again.

Basic Page:

$("#button").click(function () { someFunction(); });

function someFunction () {
    var dialogVar = $('<div id="dialog"></div>').appendTo('body');
    dialogVar.dialog({  autoOpen: true,
            modal: true,
            close : function(){
                $(this).dialog("destroy");
            },
            open : function(){
                        dialog.load("dialogcontent.php",{} , function(data){
                        // Some logic       
                    });
    }
}

Dynamically Loaded Content (dialogcontent.php)

<script type="text/javascript">
   $("#tabs").tabs();
</script>


<div id="tabs">
    <ul>
        <li><a href="#tabs-0">Tab1</a></li>
        <li><a href="#tabs-1">Tab2</a></li>
    </ul>
</div>


<div id="tabs-0">Tab1 Content</div>
<div id="tabs-1">Tab2 Content</div>

So again, tabs are created the first time but not the second time.
I can see the the POST call being send to the server and data being returned but the JS is not executed.

Answer 1

Your issue is likely that you’re recreating and appending the dialog node to the DOM every time the button is clicked. Restructure your code to instantiate the dialog once (on page load), set autoOpen to false so that it doesn’t pop up right away, and wire up the button to simply open the dialog.

$(function(){
  var dialogVar = $('<div id="dialog"></div>').appendTo('body');
  dialogVar.dialog({  
    autoOpen: false,
    modal: true,
      close : function(){
        $(this).dialog("destroy");
      },
      open : function(){
        dialog.load("dialogcontent.php",{} , function(data){
           // Some logic       
        });
      }
  });

  $("#button").click(function () { 
    $('#dialog').dialog('open');
  });

};

I’m assuming you’re using the jQuery UI Dialog, so I’ve referenced the docs available here: http://jqueryui.com/demos/dialog/#method-open