1

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

Gnanasekaran Loganathan
  • 1,028
  • 8
  • 21
  • this is a very vague description. Without seeing some code it's almost impossible to give a meaningful answer. You wouldn't suggest how to fix a car without looking at the engine, especially if the description given by the owner contained as few specifics as this. – ADyson Jun 29 '17 at 08:57
  • buddypress have sort-by option, when you change sort by this result get by admin-ajax.php. I customised some html DOM by default load page but this AJAX result override my customisation. So i need to add some jQuery effect for this AJAX response. If this custom AJAX means we can edit the result but this is are default function. – Gnanasekaran Loganathan Jun 29 '17 at 10:25
  • that's not really much clearer TBH. We still need to see the code really and understand where the fault is. Otherwise we can't give you a solution in code, which is the purpose of this site. I would guess that you need to alter what the server sends, or intercept it in script before it's rendered to the DOM and edit it then to include your customisation. P.S. if you have extra info, please edit it into the main question instead of the comments. – ADyson Jun 29 '17 at 10:30
  • I updated my question, you can check now. – Gnanasekaran Loganathan Jun 29 '17 at 12:09
  • that's the code which works, right? Where's the problematic ajax code? – ADyson Jun 29 '17 at 12:17
  • Yes its work by page load. the problematic ajax code is buddypress default ajax functionality(order by functionality). So only I can't edit that response. – Gnanasekaran Loganathan Jun 29 '17 at 12:53
  • 1
    you could set your code to listen for the end of an ajax request, and then run your each loop again, in case the content has been replaced. https://api.jquery.com/ajaxStop/ will listen for the end of all ajax requests. If there is other ajax on the page, them sometimes it will run unnecessarily, but without altering the buddypress code there's not a lot else you can do I don't think. – ADyson Jun 29 '17 at 13:01

1 Answers1

2

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

majita
  • 1,278
  • 14
  • 24