Geek Answers Handbook

JQuery not working in downloadable AJAX DIVs

In HEAD of my document, I load jQuery.js, as well as the blockUI jQuery plugin.

In PHP, I use regular AJAX to load other PHP content into a DIV. In the original PHP module, jQuery and blockUI works fine, but in any of the ajax loaded divs, jQuery and blockUI both do absolutely nothing. There is no error in the console, no warning - nothing.

I'm starting jQuery, and none of the other articles I found on this topic could put me on the verge of solving this, so I am helping someone else. In my code below you will see that I did some hits in live () ...

This is at the top of my PHP file, which loads in a DIV

<script type="text/javascript"> $(document).ready(function() { $('#crazy').live('click',function() { $.blockUI({ message: $('#question'), css: { width: '275px' } }); }); $('#yes').live('click',function() { // update the block message $.blockUI({ message: "<h1>Remote call in progress...</h1>" }); $.ajax({ url: 'wait.php', cache: false, complete: function() { // unblock when remote call returns $.unblockUI(); } }); }); $('#no').live('click',function() { $.unblockUI(); return false; }); }); </script>

Here is the HTML from this PHP file (loaded in the DIV):

 <input id="crazy" type="submit" value="Show Dialog" /> <div id="question" style="display:none; cursor: default"> <h1>Would you like to contine?.</h1> <input type="button" id="yes" value="Yes" /> <input type="button" id="no" value="No" /> </div>
+4
source share
2 answers

The document ready function is loaded when the DOM is loaded, before the AJAX calls are completed. Thus, it only applies .live() calls to elements that exist before AJAX calls.

If you want to apply things to content loaded with AJAX calls, specify a callback function for AJAX that applies the appropriate materials after the download is complete.

+5
source

What is the problem with the live version? Is he still failing?

Is it possible that the AJAX request in the #yes event #yes does not work?

I took your code and simplified it on jsfiddle here , and it seems to work fine. There is no problem using live , and it should fix this event handler for elements inserted through AJAX.

Have you tried just throwing warnings in event methods to see if they are called at all?

+2
source

More articles:


All Articles