CODEWITHSUNDEEP
phpjqueryajax
StealthRT
StealthRT

Reputation: 10542

jQuery dynamic content loaded via Ajax

Hey all i am trying to close a div that displays when the page loads. However, doing this:

jQuery(document).ready(function () {
   jQuery('#moreDetailsTable').slideUp("fast", function () {});
});

Doesnt seem to close it when the page loads since its dynamicly being populated via PHP code using ajax.

The php that ajax calls looks like this:

echo '<div id="moreDetailsTable" class="widefat fixed comments">
    Testing this out<br />
    Testing this out<br />
    Testing this out<br />
    Testing this out<br />
    Testing this out<br />
</div>
   ect ect.....

I know the code work because i just do this:

jQuery(document).on('click', '#moreDetailsTable', function() {
    jQuery('#moreDetailsTable').slideUp("fast", function () {
        console.log('done');
    });
});

And it slides up once i click on it.

How can i called the .slideUp since its dynamically populated and not on the page to start with?

Upvotes: 1

Views: 257

Answers (2)

Jordan
Jordan

Reputation: 3022

Please see the jQuery.ajaxComplete() event handler. This will do what you want.

Example:

jQuery(document).ajaxComplete(function () {
   jQuery('#moreDetailsTable').slideUp("fast", function () {});
});

Upvotes: 2

Jose Areas
Jose Areas

Reputation: 719

Call the function when the ajax returns. After load the content. Something like:

$('.ajaxLoading').show();
    $.ajax({
    type:'POST',
    url:'url',
    dataType: "json"}).done
    (function(response){
        alert(response.message);
        $('.ajaxLoading').hide();
        //window.location = "/dash_board";
            $('#moreDetailsTable').slideUp("fast", function () {});
    }).fail(function(response,textStatus){
        alert('Something goes wrong. Please try again.');
        $('.ajaxLoading').hide();
        //alert(textStatus);
    });

Upvotes: 0

Related Questions