Fixing error in JavaScript

JavaScript
1 
function custom_infinite_scroll_js() {
	if ( ! is_singular() ) { ?>
	<script>
	var infinite_scroll = {
		loading: {
			img: "<?php echo get_template_directory_uri(); ?>/images/ajax-loader.gif",
			msgText: "<?php _e( 'Loading the next set of posts...', 'blewspaper' ); ?>",
			finishedMsg: "<?php _e( 'All posts loaded.', 'blewspaper' ); ?>"
		},
		"nextSelector":"#nav-below .nav-previous a",
		"navSelector":"#nav-below",
		"itemSelector":"article",
		"contentSelector":"#content"
	};
	jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
	</script>
	<?php
	}
}
add_action( 'wp_footer', 'custom_infinite_scroll_js', 100 );

Error in console →

Uncaught TypeError: jQuery(...).infinitescroll is not a function
    at (index):571

when I clicked the line it shows is this one →

jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );

1152Ă—366 26.5 KB

Please help me to fix this.

Additional information:

This is relying on this:
https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js

which is included in wordpress →

function custom_theme_js() {
	wp_register_script(
		'infinite_scroll',
		get_template_directory_uri() . '/js/infinite-scroll.pkgd.min.js',
		array('jquery'),
		null,
		true
	);

	if ( ! is_singular() ) {
		wp_enqueue_script( 'infinite_scroll' );
	}
}
add_action( 'wp_enqueue_scripts', 'custom_theme_js' );
2

Does infinite_scroll exist after the page loads? If so, you might need to delay your custom script until after the page has finished loading.

3

Ok. how can we accomplish this?
May be like this →

Or maybe when we register this in WordPress:

WordPress provides some technique.

4

Before doing that, please make sure that the infinite scroll does get correctly loaded by the page.

5

You mean this:
infinite-scroll.pkgd.min.js ?

1 Like
6

Can you guide me how should I verify if it is loading correctly?

7

You should be able to use the browser console to check that an InfiniteScroll() function exists

1 Like
8

I think that I spotted the problem.

After examining the scripting code on the site that you PM’d to me, I checked that the InfiniteScroll() function existed.

On examining the Infinite Scroll API page I saw that you are using infinitescroll, but the API says that you need to use infiniteScroll instead.

That explains why you are being told: Uncaught TypeError: jQuery(...).infinitescroll is not a function

2 Likes
9

so it is “s” vs “S” → small and capital letters?

1 Like
10

That Javascript issue has indeed disappeared. My next question may be a bit deviation from the Javascript, but do you have any clue How should we implement this in our them →

"nextSelector":"#nav-below .nav-previous a",
"navSelector":"#nav-below",
"itemSelector":"article",
"contentSelector":"#content"

The author of this article hasn’t given any clarity or thrown any light →

I tried to find these selectors in the js file, but they do not exist even there. Could not understand how to connect them to my theme.

Any clue? Or any guidance how to troubleshoot them?

11

Really? Don’t they say the following about them?

nextSelector: Selector for the “previous posts” link.
navSelector: Containing selector for the previous/next navigation links.
itemSelector: Selector for posts. This might be .hentry, .post, .etc
contentSelector: Containing div for your posts.
1 Like
12

Yeah, Yeah I read them, but it looks like that he has tested this with his theme.

when he says this:

nextSelector: Selector for the “previous posts” link.

what is “nextSelector” it doesn’t seem to be defined anywhere in the JS file or the functions file? How is this getting implemented? I am unable to mentally connected to the flow. Are these selectors part of the core in Wordpress.

13

The article was written in 2012 and the infiniteScroll code has changed quite a bit since then.

I recommend that you go by the API instead of what seems to be an out of date tutorial.

1 Like
14

Aha! When examining their releases for code from 2012, I found that InfiniteScroll gives details on upgrading from Version2 to Version3, which deals with the selectors.

1 Like
15

Thank you so much. Let me try to take the best out of that. I will update you If I succeeded or not.

1 Like
16

The upgrade example really helps to bring it all together.

1 Like
18

After a couple of days of striving, I couldn’t get this one working on my WP theme.

However, I find another solution by Bill Erickson and looks like that they are working for me.

However, there are a couple of questions.

This is a portion of the load-more.js script that bill is using →

jQuery(function($){

	$('.class1').append( '<span class="load-more"></span>' );
	var button = $('.class1.load-more');

.class1 → There are a couple of templates and each template has this class different so accordingly the javascript should be written.

I know the simple solution:
Write three load-more.js like
load-more1.js etc

and then load this(different versions of load-more.js based on the template selected) based on the condition that which template is selected →

/*Enqueue Load more JS*/
function be_load_more_js() {
	global $wp_query;
	$args = array(
		'nonce' => wp_create_nonce( 'be-load-more-nonce' ),
		'url'   => admin_url( 'admin-ajax.php' ),
		'query' => $wp_query->query,
	);

	wp_enqueue_script( 'be-load-more', get_stylesheet_directory_uri() . '/js/load-more.js', array( 'jquery' ), '1.0', true );
	wp_localize_script( 'be-load-more', 'beloadmore', $args );

}
add_action( 'wp_enqueue_scripts', 'be_load_more_js' );

But that looks like that, in that case, we will be creating too many JS file when we have to just change the class name.

Can we implement a PHP condition in a JS file →

<?php if ( true == get_theme_mod( 'checkbox_setting', true ) ) : ?>
	$('.class1').append( '<span class="load-more"></span>' );
	var button = $('.class1.load-more');
<?php else : ?>
	$('.class2').append( '<span class="load-more"></span>' );
	var button = $('.class2.load-more');
<?php endif; ?>
19

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