I am trying to make an Ajax Load More function for my posts inside WordPress. The only thing is that I am getting an error:
custom.js?ver=5.5.1:11 Uncaught TypeError: $.ajax is not a function at HTMLAnchorElement. (custom.js?ver=5.5.1:11) at HTMLAnchorElement.dispatch (VM1605 jquery-3.2.1.slim.min.js:3) at HTMLAnchorElement.q.handle (VM1605 jquery-3.2.1.slim.min.js:3)
Code:
jQuery(function($){ // use jQuery code inside this to avoid "$ is not defined" error
$('.misha_loadmore').click(function(){
var button = $(this),
data = {
'action': 'loadmore',
'query': misha_loadmore_params.posts, // that's how we get params from wp_localize_script() function
'page' : misha_loadmore_params.current_page
};
$.ajax({ // you can also use $.post here
url : misha_loadmore_params.ajaxurl, // AJAX handler
data : data,
type : 'POST',
beforeSend : function ( xhr ) {
button.text('Loading...'); // change the button text, you can also add a preloader image
},
success : function( data ){
if( data ) {
button.text( 'More posts' ).prev().before(data); // insert new posts
misha_loadmore_params.current_page++;
if ( misha_loadmore_params.current_page == misha_loadmore_params.max_page )
button.remove(); // if last page, remove the button
// you can also fire the "post-load" event here if you use a plugin that requires it
// $( document.body ).trigger( 'post-load' );
} else {
button.remove(); // if no data, remove the button as well
}
}
});
});
});