0

I have a simple ajax complete call. It's supposed to append some text after an ajax load is complete. It works minus the fact that sometimes it displays the information two or more times. I think I need to include something, but I am not quite sure.

Should I make the jQuery into a function and have called once ajax is done? Any suggestion would be great.

Here is an example of how it's deployed on a site I am developing https://dev.staging.idgadvertising.com/sgwcorp/products

here is my code

jQuery(document).ajaxComplete(function($) {
  jQuery('.woof_container_inner_shade').append('<div class="smalldesc">1=Lightest 6=Darkest,7=Multicolor</div>');
  jQuery('.woof_shortcode_output .products .product').each(function() {
    if (jQuery(this).hasClass('product_cat-everlast')) {
      jQuery(this).find('a.product-images').append('<div class="prodBadge">Everlast</div>');
    }

    if (jQuery(this).hasClass('product_cat-tigerturf')) {
      jQuery(this).find('a.product-images').append('<div class="prodBadge">TigerTurf</div>');
    }
  });
});
Barmar
  • 741,623
  • 53
  • 500
  • 612
Jason Ayala
  • 152
  • 7
  • 1
    Why are you using `ajaxComplete` instead of just using the callback argument to `.load()`? – Barmar Dec 22 '22 at 17:53
  • 1
    What do I have to do to see the problem on the dev site? – Barmar Dec 22 '22 at 18:00
  • because I have product filter that uses ajax to sort products and when I do that..it removes the custom code I added in the append – Jason Ayala Dec 22 '22 at 18:01
  • @Barmar go ahead and try again.refresh the page and you will see the added code display twice. and then click on the items in the side bar and you will see that it displays correctly – Jason Ayala Dec 22 '22 at 18:03
  • 1
    You must be doing multiple AJAX calls. After each of them completes, it appends to the `.woof_container_inner_shade`. – Barmar Dec 22 '22 at 18:05
  • 1
    Instead of appending elements dynamically, it's usually better to have them in the original HTML. Then you can use `.hide()` and `.show()` as needed. – Barmar Dec 22 '22 at 18:06
  • I cannot do that the hide() show() since the information being displayed is dynamic and it would require me to essentially break the plug-in being used. – Jason Ayala Dec 22 '22 at 18:09
  • 1
    if you want a specific ajax call to "ignore" the ajaxComplete function, then specify the global option = false: ``` $.ajax({ global: false, url: ... })``` – jet_24 Dec 22 '22 at 18:11
  • @Barmar since this is a wordpress site, and there many plugins in here that has ajax in it..how do make it where it runs after the last ajax? is there something I can do to make it run only once or on click? – Jason Ayala Dec 22 '22 at 18:23
  • 1
    If you're doing multiple AJAX calls in a row, make an array of them and use `$.when()` to wait for all of them to complete. Then execute your code. – Barmar Dec 22 '22 at 18:25
  • 1
    See https://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done – Barmar Dec 22 '22 at 18:25
  • @JosephTroy do I have to specify a URL? it's kind of hard since its a wordpress site – Jason Ayala Dec 22 '22 at 18:26
  • @Barmar here is the thing...its a wordpress and ever single portion of the site including plugins has ajax in it..so I don't know where its coming from – Jason Ayala Dec 22 '22 at 18:28
  • 1
    Maybe WP has a way to hook into this. Unfortunately, I don't know WP. – Barmar Dec 22 '22 at 18:31

1 Answers1

1

one thing you can do is look to see if it has already ben appended before possibly re-appending. there's a couple ways this can be checked... Here's one possible way:

jQuery(document).ajaxComplete(function($) {
  jQuery('.woof_container_inner_shade').append('<div class="smalldesc">1=Lightest 6=Darkest,7=Multicolor</div>');

  jQuery('.woof_shortcode_output .products .product').each(function() {
    if (jQuery(this).hasClass('product_cat-everlast') && !jQuery(this).find('.prodBadge').length) {
      jQuery(this).find('a.product-images').append('<div class="prodBadge">Everlast</div>');
    }
    ...
  });
});
jet_24
  • 598
  • 3
  • 8
  • Yoooo this is brilliant! I didnt think about testing it. I need to also test the .smalldesc as well, but I think I can figure it out from here! thank you!!! – Jason Ayala Dec 22 '22 at 18:59
  • 1
    for the first appended I tested this way and it worked. Not sure if there is a cleaner way in doing it but it worked. `if (jQuery('.woof_container_shade') && !jQuery('.woof_container_inner_shade').find('.smalldesc').length) { jQuery('.woof_container_inner_shade').append('
    1=Lightest 6=Darkest,7=Multicolor
    ');` }     – Jason Ayala Dec 22 '22 at 19:13