jQuery code not being run after second AJAX call

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.

You have syntax errors--run your code through a tool like JSLint to find them. — Andrew Whitaker, Jan 23 '12 at 21:40

score 1 · Accepted Answer · answered Jan 23 '12 at 22:27

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

Thanks for your reply.!! I cannot initiate the dialog in the beginning because I am passing a var with the post which is retrieved from the button object. So I need to call "someFunction" from within button click event. However, you trigerred me with the DOM remark. So I added some code to remove the element from the DOM before creating it. And it works!!! '$("dialog").remove();' — Adamski, Jan 23 '12 at 22:46

score 1 · Answer 2 · answered Jan 24 '12 at 00:45

I just ran into this too.

Looks like tabs keep some state between calls, subsequent calls increment each tab id causing confusion in the internal state. So in short you have to call tabs("destroy")

So your dialog close code might look like:

   close : function(){
         $("#tabs").dialog("destroy");
         $(this).dialog("destroy");
   },

score 0 · Answer 3 · edited May 23 '17 at 12:03

0

Should the }, be }; before openFunction() ?

Additionally, the question and answer listed here : How to call second jQuery.ajax instance on success of first and update page

may be of use.

edited May 23 '17 at 12:03

Community

1
1

answered Jan 23 '12 at 21:34

Dreamling

215
2
11

jQuery code not being run after second AJAX call

3 Answers3