Search code examples
jqueryajaxwordpressbuddypress

Add JQuery effect for WP ADMIN AJAX response in buddypress

In buddypress have sort by option in members loop, We added class for members list for design purpose using jquery. When sort by changed from default sort the response will override our customisation by AJAX response.

I replaced "block" text by image URL using below script,

<script type="text/javascript">

    jQuery('body .block-member a').each(function() {
        var text = jQuery(this).text();    
        if(text == 'UnBlock'){
            jQuery(this).html(text.replace('UnBlock', "<img src='http://localhost/resttest/images/unblock.png' />"));       
        }else{
            jQuery(this).html(text.replace('Block', "<img src='http://localhost/resttest/images/block.png' />"));
        }
    });
</script>

Below view is my initial page load, enter image description here

After order by changed image automatically override by admin-ajax.php response. like below, enter image description here

Solution

  • Following on from ADyson's comment you should look at a global ajax event - JQuery Documentation

    So when any ajax response ends you can reload your images using AjaxComplete e.g.

    $(document).ajaxComplete(function() {
    $('.block-member a').each(function() {
            var text = jQuery(this).text();    
            if(text == 'UnBlock'){
                jQuery(this).html(text.replace('UnBlock', "<img src='http://localhost/resttest/images/unblock.png' />"));       
            }else{
                jQuery(this).html(text.replace('Block', "<img src='http://localhost/resttest/images/block.png' />"));
            }
        });
});

    The AjaxComplete handler been used successfully before in Buddypress based on these forum comments - link