Reload this javascript file after an ajax page load (YITH Infinite Scroll)

Question

I have a woocommerce shop that has an ajax page load navigation. So a user clicks next page and more products are loaded via ajax.

However, I have a javascript file that manipulates the colors on each product on a page load. But since I have introduced this ajax page load, the script no longer loads after a next page is requested.

I am using YITH Infinite Page scroll. They have a trigger yith_infs_added_elem that I can use to do some code after the ajax has been loaded.

So I currently have:

jQuery(document).on('yith_infs_added_elem', function() {

});

This is the YITH trigger I have to use to run my script after the ajax has loaded.

But I am stuck. I have read many other solutions for other people, but I cannot seem to figure out how to reload my javascript file - /js/javascript/colors/dominant-color-shop.js .

My javascript file that normally runs on page load is:

jQuery( document ).ready( function( $ ) {
    var image = new Image;
    var colorThief = new ColorThief();
    var bg;
    var vibrant_color;
    var vibrantText;

    $('.post-image-hidden-container').each(function() {
        bg = $(this).text();
        var rgbs_text = [];

        image.onload = function() {

            $('.shop-page-item-thumb').each(function() {
                var thumb = $(this);
                var rgbs = [];

                thumb.find('img').each(function() {
                    var vibrant = new Vibrant(this);
                    var swatches = vibrant.swatches();

                    var dominantColor = colorThief.getColor(this);
                    var productColorPalette = colorThief.getPalette(this, 12);
                    var productLightestColor = productColorPalette.reduce(function(previousValue, currentValue) {
                        var currLightNess = (0.2126*currentValue[0] + 0.7152*currentValue[1] + 0.0722*currentValue[2]);
                        var prevLightNess = (0.2126*previousValue[0] + 0.7152*previousValue[1] + 0.0722*previousValue[2]);
                        return (prevLightNess < currLightNess) ? currentValue : previousValue;
                    });

                    /* Create Shades and Tints of Lightest Color */
                    var lightShadeRGB = productLightestColor.join();
                        lightShadeRGB = lightShadeRGB.split(',');
                    var r = lightShadeRGB[0],
                        g = lightShadeRGB[1],
                        b = lightShadeRGB[2];
                    var rpt = lightShadeRGB[0] - 35,
                        gpt = lightShadeRGB[1] - 35,
                        bpt = lightShadeRGB[2] - 35;
                    var tintDk = 'rgb('+rpt+', '+gpt+', '+bpt+')';

                    for (var swatch in swatches) {
                        if (swatches.hasOwnProperty(swatch) && swatches[swatch]) {
                            rgbs.push(swatches[swatch].getHex());
                            rgbs_text.push(swatches[swatch].getTitleTextColor());
                        }
                    }

                    vibrant_color = rgbs[0];
                    vibrant_color_2 = rgbs[1];
                    darkVibrant = rgbs[2];
                    darkMuted = rgbs[3];
                    lightVibrant = rgbs[4];

                    vibrantText = rgbs_text[0];
                    vibrantText_2 = rgbs_text[1];
                    darkVibrantText = rgbs_text[2];
                    darkMutedText = rgbs_text[3];
                    lightVibrantText = rgbs_text[4];

                    thumb.parent().find('.product-bottom-info-container').css({
                        borderTop: '4px solid ' + vibrant_color
                    });

                    thumb.parent().find('.hot-badge').css({
                        backgroundColor: darkMuted,
                        color: darkMutedText
                    });

                    thumb.parent().find('.mp3-badge').css({
                        backgroundColor: vibrant_color,
                        color: vibrantText
                    });

                    thumb.parent().find('.mp3-badge-link').css({
                        color: vibrantText
                    });

                    thumb.parent().find('.wav-badge').css({
                        backgroundColor: vibrant_color_2,
                        color: vibrantText_2
                    });

                    thumb.parent().find('.wav-badge-link').css({
                        color: vibrantText_2
                    });

                    thumb.parent().find('.hot-post-bookmark').css({
                        color: vibrant_color
                    });

                    thumb.parent().find('.the-rating-stars-icons').css({
                        color: vibrant_color
                    });

                    thumb.parent().find('.progress-bar').css({
                        backgroundColor: vibrant_color
                    });
                });
            });
        }
        image.src = bg;
    });

    $('#player-toggler-id').css({
        backgroundColor: '#181f24'
    });
});

It works fine until I request the next page. The javscript no longer works. How exactly can I call this script all over again, once the yith ajax has loaded with this trigger - yith_infs_added_elem .

I have read up on .on() .live() (which is deprecated), etc. Can anyone help?

Answer 1

Your function only runs on page load...
To trigger it again later, you should make it a named function.

So the script stays exactly the same, but wrapped with function arrangeColors(){ (You can name it as you wish) and } .

Then, in the ajax success callback, call this function again.

jQuery( document ).ready( function( $ ) {

  function arrangeColors(){ // Make the script a named function

    var image = new Image;
    var colorThief = new ColorThief();
    var bg;
    var vibrant_color;
    var vibrantText;

    $('.post-image-hidden-container').each(function() {
        bg = $(this).text();
        var rgbs_text = [];

        image.onload = function() {

            $('.shop-page-item-thumb').each(function() {
                var thumb = $(this);
                var rgbs = [];

                thumb.find('img').each(function() {
                    var vibrant = new Vibrant(this);
                    var swatches = vibrant.swatches();

                    var dominantColor = colorThief.getColor(this);
                    var productColorPalette = colorThief.getPalette(this, 12);
                    var productLightestColor = productColorPalette.reduce(function(previousValue, currentValue) {
                        var currLightNess = (0.2126*currentValue[0] + 0.7152*currentValue[1] + 0.0722*currentValue[2]);
                        var prevLightNess = (0.2126*previousValue[0] + 0.7152*previousValue[1] + 0.0722*previousValue[2]);
                        return (prevLightNess < currLightNess) ? currentValue : previousValue;
                    });

                    /* Create Shades and Tints of Lightest Color */
                    var lightShadeRGB = productLightestColor.join();
                        lightShadeRGB = lightShadeRGB.split(',');
                    var r = lightShadeRGB[0],
                        g = lightShadeRGB[1],
                        b = lightShadeRGB[2];
                    var rpt = lightShadeRGB[0] - 35,
                        gpt = lightShadeRGB[1] - 35,
                        bpt = lightShadeRGB[2] - 35;
                    var tintDk = 'rgb('+rpt+', '+gpt+', '+bpt+')';

                    for (var swatch in swatches) {
                        if (swatches.hasOwnProperty(swatch) && swatches[swatch]) {
                            rgbs.push(swatches[swatch].getHex());
                            rgbs_text.push(swatches[swatch].getTitleTextColor());
                        }
                    }

                    vibrant_color = rgbs[0];
                    vibrant_color_2 = rgbs[1];
                    darkVibrant = rgbs[2];
                    darkMuted = rgbs[3];
                    lightVibrant = rgbs[4];

                    vibrantText = rgbs_text[0];
                    vibrantText_2 = rgbs_text[1];
                    darkVibrantText = rgbs_text[2];
                    darkMutedText = rgbs_text[3];
                    lightVibrantText = rgbs_text[4];

                    thumb.parent().find('.product-bottom-info-container').css({
                        borderTop: '4px solid ' + vibrant_color
                    });

                    thumb.parent().find('.hot-badge').css({
                        backgroundColor: darkMuted,
                        color: darkMutedText
                    });

                    thumb.parent().find('.mp3-badge').css({
                        backgroundColor: vibrant_color,
                        color: vibrantText
                    });

                    thumb.parent().find('.mp3-badge-link').css({
                        color: vibrantText
                    });

                    thumb.parent().find('.wav-badge').css({
                        backgroundColor: vibrant_color_2,
                        color: vibrantText_2
                    });

                    thumb.parent().find('.wav-badge-link').css({
                        color: vibrantText_2
                    });

                    thumb.parent().find('.hot-post-bookmark').css({
                        color: vibrant_color
                    });

                    thumb.parent().find('.the-rating-stars-icons').css({
                        color: vibrant_color
                    });

                    thumb.parent().find('.progress-bar').css({
                        backgroundColor: vibrant_color
                    });
                });
            });
        }
        image.src = bg;
    });

    $('#player-toggler-id').css({
        backgroundColor: '#181f24'
    });

  } // Add this closing bracket

  // Call the function on load
  arrangeColors();

});

Answer 2

I make it work now like this:

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        loadAnimation();
        jQuery(document).on("yith_infs_added_elem", function () {
            loadAnimation();
        });
        function loadAnimation() {
            //here put your code for something to doin my case .add-to-cart trigger
        }
        //here other functions for example flyToElement
    });
</script>