Star not appearing

Hello!

What plugin are you using to load results with ajax?

Right now, YASR works with Catch Infinite Scroll https://www.ads-software.com/plugins/catch-infinite-scroll/

Hi @dudo,

Is a custom handwritten code.

Ok!

This is what you’ve to know:

When the ajax call is done, you’ve to get all elements that has the class yasr-rater-stars-vv and then pass this array to the function yasrSearchVVInDom

Here you can see how I added the support for Catch Infinite Scroll

https://plugins.trac.www.ads-software.com/browser/yet-another-stars-rating/tags/2.9.6/includes/js/src/catch-inifite-scroll.js

You’ve to do just like in function yasrCisVV

Hope this helps!

• This reply was modified 2 years, 11 months ago by dudo.
• This reply was modified 2 years, 11 months ago by dudo.

Hi @dudo,

Meaning to say I have to enqueue in catch-infinite-scroll script to be able to work with my ajax loading?

No, it was just an example.

You’ve to call the function yasrSearchVVInDom when you do your ajax call, just in the same way I do for catch infinite scroll

Hi @dudo,

After I call in the function if it still not loading the stars, where else do you think is the issue? Thanks.

Hard to say without seeing the code, can you paste it here?

Hi @dudo,

Here is the code.

yasrSearchVVInDom (yasrRaterInDom);
			}
			
			data = jQuery.parseJSON( response );
			if( data.product != null ) {
				content = jQuery( data.product );
				jQuery( '.load-more-recipe-holder' ).append( content );
				
				pageNumber++;
				jQuery('#load-more-products').attr( 'data-value', pageNumber );

                if( ( postsPerPage > data.count ) || ( data.total_recipe == ( postsPerPage * pageNumber ) ) ) {
                    jQuery('#load-more-products').parent('.tp-load-more').hide();
                } else {
                    jQuery('#load-more-products').parent('.tp-load-more').show();
                }
				
			} else {
				jQuery('#load-more-products').parent('.tp-load-more').hide();
			}
		}
	});
}
function yasrSearchVVInDom(yasrRaterInDom) {
    if (yasrRaterInDom.length > 0) {
        yasrVisitorVotesFront(yasrRaterInDom);
        if (yasrCommonData.visitorStatsEnabled === 'yes') {
            let yasrStatsInDom = document.getElementsByClassName('yasr-dashicons-visitor-stats');
            if (yasrStatsInDom) {
                yasrVvStats (yasrStatsInDom);
            }
        }
    }
}

• This reply was modified 2 years, 11 months ago by Steven Stern (sterndata).

Please, stop mention me on every post, I’m already following this thread and this is not abolutelly needed.

about your code:
1) seems like it is incolpete at the begin / pasted wrong
2) you don’t need to copy and redeclare function yasrSearchVVInDom, you just need to import it.

After the ajax call has been done, what you’ve to do is to do is to create an array with all elements that has class yasr-rater-stars-vv and then pass this array to the function,

if( data.product != null ) {
    content = jQuery( data.product );
    jQuery( '.load-more-recipe-holder' ).append( content );		
    pageNumber++;

    //get all the dome elements with class yasr-rater-stars-vv
    const yasrRaterInDom = document.getElementsByClassName('yasr-rater-stars-vv');
    //apply the stars on that elements
    yasrSearchVVInDom (yasrRaterInDom);

    jQuery('#load-more-products').attr( 'data-value', pageNumber );

    if( ( postsPerPage > data.count ) || ( data.total_recipe == ( postsPerPage * pageNumber ) ) ) {
        jQuery('#load-more-products').parent('.tp-load-more').hide();
    } else {
        jQuery('#load-more-products').parent('.tp-load-more').show();
    }
} else {
    jQuery('#load-more-products').parent('.tp-load-more').hide();
}

Hi again, you mean something like this?

import {yasrSearchVVInDom} from "../shortcodes/visitorVotes";

jQuery(document).ready(function($){
	jQuery('#load-more-products').on('click', function(e){
		e.preventDefault();
		var pageNumber = parseInt($(this).attr('data-value'));
		var postsPerPage = parseInt($(this).attr('data-posts'));
		var dataTerms = $(this).attr('data-term');
		var dataFeatured = $(this).attr('data-featured');

		ajaxLoadProduct(pageNumber, postsPerPage, dataTerms, dataFeatured);
	});
});

function ajaxLoadProduct(pageNumber, postsPerPage, dataTerms, dataFeatured) {
	jQuery.ajax({
		type: 'post',
		url: ajaxurl,
		data: {
			action: 		'load_more_product',
			pageNumber: 	pageNumber,
			postPerPage:	postsPerPage,
			dataTerms: 		dataTerms,
			dataFeatured: 	dataFeatured
		},
		success: function(response) {
			
			data = jQuery.parseJSON( response );
			if( data.product != null ) {
				
				//get all the dome elements with class yasr-rater-stars-vv
				const yasrRaterInDom = document.getElementsByClassName('yasr-rater-stars-vv');
				//apply the stars on that elements
				yasrSearchVVInDom (yasrRaterInDom);
				
				content = jQuery( data.product );
				jQuery( '.load-more-recipe-holder' ).append( content );
				
				pageNumber++;
				jQuery('#load-more-products').attr( 'data-value', pageNumber );

                if( ( postsPerPage > data.count ) || ( data.total_recipe == ( postsPerPage * pageNumber ) ) ) {
                    jQuery('#load-more-products').parent('.tp-load-more').hide();
                } else {
                    jQuery('#load-more-products').parent('.tp-load-more').show();
                }
				
			} else {
				jQuery('#load-more-products').parent('.tp-load-more').hide();
			}
		}
	});
}

Yes, something like that.

Merry Christmas!

Hi, Merry Christmas and have a great new year ahead.

However, when I inspect console. I got the import not a module error. So it didn’t pickup that import class. Can advise? Thanks.

Sorry, have been a long day.

Tomorrow I will send you a compiled file that should work.

Thanks for your patience!

Try to download this file https://gist.github.com/Dudo1985/de71616ca9b50ac9f928672b1811f2f2 and upload it into wp-content/plugins/yet-another-stars-rating/includes/js/shortcodes/visitorVotes.js overwriting the existing one

Hi dudo,

Many thanks it works!!! thank you so much