jQuery Loses Function During Ajax Filter

JavaScript
1

On this page, I’ve developed an integration where an icon would be appended to each blog post. On page load the icons do display. However, if a user was to click on any of the category filters, the icons are no longer appended. Not sure why this wouldn’t be stored within the cache but could use some help with this.

Code:

<script>
var webinaryellow = 'https://insightsnow.com/wp-content/uploads/2023/09/webinar-yellow-icon.png';
var whitepaperyellow = 'https://insightsnow.com/wp-content/uploads/2023/11/white-paper-yellow-icon.png';
var postyellow = 'https://insightsnow.com/wp-content/uploads/2023/11/post-yellow-icon.png';
jQuery(document).ready(function() {
  $(`<img class="post-icon" src='${webinaryellow}'>`).appendTo('.et_pb_post.category-webinar .post-media-container .entry-featured-image-url');
  $(`<img class="post-icon" src='${whitepaperyellow}'>`).appendTo('.et_pb_post.category-white-paper .post-media-container .entry-featured-image-url');
    $(`<img class="post-icon" src='${postyellow}'>`).appendTo('.et_pb_post.category-news .post-media-container .entry-featured-image-url');
});
</script>
2

I would guess that when clicking on a category filter the page is refreshed and the icons are not being appended anew.

3

Hello, @dennisjn.
The page itself doesn’t refresh because it’s the Ajax filter that is working. The script I’m using gets lost after the Ajax activates. So I’m not sure how to retain that.

4

The filter function basically reloads the page and replaces the content, it just does so with a background request which means the page loaded events don’t trigger so your code doesn’t run again.

Probably the easiest way to solve the problem would be to use a MutationObserver to monitor the page for the changes and re-run your code whenever the content is changed.

5

Just throwing it out there, but couldn’t this be done with CSS if you want it to be persistent. Something along the lines of this?

.post-media a::after {
  position: absolute;
  content: '';
  bottom: 0px;
  left: 0px;
  width: 60px;
  height: 60px;
  background: yellow no-repeat center;
  background-size: cover;
}

.et_pb_post.category-webinar .post-media a::after {
  background-image: url('https://insightsnow.com/wp-content/uploads/2023/09/webinar-yellow-icon.png');
}

.et_pb_post.category-white-paper .post-media a::after {
  background-image: url('https://insightsnow.com/wp-content/uploads/2023/11/white-paper-yellow-icon.png');
}

.et_pb_post.category-news .post-media a::after {
  background-image: url('https://insightsnow.com/wp-content/uploads/2023/11/post-yellow-icon.png');
}

Then no JS needed. I’m sure our resident CSS experts could improve on this :slight_smile:

2 Likes
6

As long as you dont want the image to do anything HTML-y later on, yeah.

1 Like
7

Hello, @rpg_digital.
Thank you for the suggestion! That actually worked better than my making things more difficult using jQuery.

2 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.