filter by colour ( image ) ajax issue

  • Resolved mirwordpress

    (@mirwordpress)


    3 years ago

    I will have many colour images to be uploaded to my site & i noticed the plugin requires you to uplaod a separate image for each colour if the colour is an image.
    to overcome this, i wrote some jQuery ( below ), which finds the data name and places it in the image url.
    this works, however, upon clicking ‘Apply Filters’ or ‘Reset filters’, the styling goes away and the colour images disappear.

    Please can you tell me, which ajax calls i need to use to fix this.
    The following is my code that effectively sets the colour images upon initial load of the filter.

    
jQuery(function(){       
  jQuery('.bapf_body ul > li').each(function() {
     var getCol = jQuery('input', jQuery(this)).data('name');
     var imageUrl = "https://website/wp-content/uploads/2021/10/" + getCol + ".jpg";
     jQuery(".bapf_img_span", jQuery(this)).css('background-image', 'url("' + imageUrl + '")');
    console.log('CSS background-image =', jQuery(".bapf_img_span", jQuery(this)).css('background-image'));  
  });
});

    the type of attribute ( image ) is made available by another plugin, but i really just need to know which ajax calls i need to make custom code for to prevent the styling from disappearing.

    thank you

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter mirwordpress

    (@mirwordpress)

    I have tried this also: it doesn’t reset the jQuery styling to the colour images.

    add_action( 'wp_head', function () { ?>

    <script>
       var my_colours = function ( $ ) {            
          
       jQuery('.bapf_body ul > li').each(function() {
        var getCol = jQuery('input', jQuery(this)).data('name');
        var imageUrl = "https://website/wp-content/uploads/2021/10/" + getCol + ".jpg";
       jQuery(".bapf_img_span", jQuery(this)).css('background-image', 'url("' + imageUrl + '")');
        console.log('CSS background-image =', jQuery(".bapf_img_span", jQuery(this)).css('background-image'));  
});
       }
</script>
<?php }, 5 ); 

add_action( 'wp_footer', 'cv_theme_custom_script', 999999 );
function cv_theme_custom_script() { ?>
<script>
    jQuery( document ).ready( function ( $ ) {
        my_colours( $ );
    } );
</script>
<?php
}

add_action( 'wp_head', function () { ?>
    <script>
    
    $.ajaxComplete(function () {
        // trigger the other JS snippet again after AJAX.
        my_colours( $ );
    });
    
    </script>
    <?php }, 9999999 );
    Thread Starter mirwordpress

    (@mirwordpress)

    I figured it out, i was calling the ajaxComplete wrong, it should be

    `jQuery( document ).ajaxComplete(function () {…

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘filter by colour ( image ) ajax issue’ is closed to new replies.

Tags