Let user select the number of posts shown per page jquery error

I want the user to be able to chose to display 10, 20, or 30 posts per page.

I found this Let user change posts per page but it doesn’t work.

I found this and implemented it but I get a jquery error. Uncaught TypeError: e.indexOf is not a function

Here is my code: (I’m using Bootstrap 4)

<?php

if( isset($_GET[‘pageVal’]) ) {
$showposts = esc_sql($_GET[‘pageVal’]);
} else {
$showposts = 10;
}

$paged = (get_query_var(‘paged’)) ? get_query_var(‘paged’) : 1;
$newsposts = array(
‘posts_per_page’ => $showposts,
‘paged’ => $paged,
‘category_name’ => ‘News’
);
query_posts($newsposts);
?>
<?php if ( have_posts(‘newsposts’) ) : ?>
<section class=”blue”>
<div class=”container”>
<div class=”row”>
<div class=”col d-flex justify-content-start px-sm-4 white-text”>
<span class=”font-weight-bold p-2 mr-3″>Title Filter</span>
<?php echo do_shortcode(‘[wpdreams_ajaxsearchlite]’); ?>
<span class=”font-weight-bold p-2″>Display #</span>
<select id=”news-posts-per-page” class=”page-select”>
<option value=”10″>10</option>
<option value=”20″>20</option>
<option value=”30″>30</option>
</select>
<script>
jQuery(document).ready(function( $ ) {
$(‘.page-select’).change(function(){
var checkIndex = window.location.href.indexOf(‘?’);
if( checkIndex > -1 ){
var Link = window.location.href.substr(0, checkIndex-1);
$(location).attr(‘href’, Link+’?page=’+$(‘.page-select’).val());
} else {
$(location).attr(‘href’, window.location.href+’?page=’+$(‘.page-select’).val());
}
});

});
</script>
<span class=”font-weight-bold pl-1 py-2″><i class=”fas fa-sort”></i></span>
</div>
</div>
</div>
</section>

Read more here:: Let user select the number of posts shown per page jquery error

Leave a Reply

Your email address will not be published. Required fields are marked *