Use js function twice on same page

Question

I use this javascript to paginate content between two div's. The pagination works great. But if I use the function twice on the same page, only one pagination shows up. I tried to rename the functions but that didn't helped. I know this may be a basic question but I didn't found a solution myself... any help is much apreciated.

$(document).ready(function(){

    var show_per_page = <?php echo json_encode($itemspp); ?>; 
    var number_of_items = $('#content').children().size();
    var number_of_pages = Math.ceil(number_of_items/show_per_page);

    $('#current_page').val(0);
    $('#show_per_page').val(show_per_page);

    var navigation_html = '<a class="previous_link" href="javascript:previous();">Vorige</a>';
    var current_link = 0;
    while(number_of_pages > current_link){
        navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
        current_link++;
    }
    navigation_html += '<a class="next_link" href="javascript:next();">Volgende</a>';

    $('#page_navigation').html(navigation_html);
    $('#page_navigation .page_link:first').addClass('active_page');
    $('#content').children().css('display', 'none');
    $('#content').children().slice(0, show_per_page).css('display', 'block');

});

function previous(){

    new_page = parseInt($('#current_page').val()) - 1;
    if($('.active_page').prev('.page_link').length==true){
        go_to_page(new_page);
    }

}

function next(){
    new_page = parseInt($('#current_page').val()) + 1;
    if($('.active_page').next('.page_link').length==true){
        go_to_page(new_page);
    }

}
function go_to_page(page_num){
    var show_per_page = parseInt($('#show_per_page').val());
    start_from = page_num * show_per_page;
    end_on = start_from + show_per_page;
    $('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
    $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
    $('#current_page').val(page_num);
}

If you're saying that you have two entities with an id of "page_navigation", that is not valid. An id must be unique. — Andrew Morton
– Andrew Morton, Commented Aug 26, 2014 at 20:31
yes, so what must i change to be able to have two paginations on the same page with this code? — Johan
– Johan, Commented Aug 26, 2014 at 20:35
Who were you replying to? You can use @name to direct your comment to a specific person: How do comment @ replies work? — Andrew Morton
– Andrew Morton, Commented Aug 26, 2014 at 20:44
You can assign the different divs with two different attributes, data-pageNav1 data-pageNav2 but the two divs can still share the same class- if that clears anything up @Johan — Truefeel
– Truefeel, Commented Aug 26, 2014 at 20:57

Andrew Morton · Accepted Answer · 2014-08-26 21:13:28Z

Assuming that you have tried to use two elements with the same id of "page_navigation", you cannot do that because each id is required to be unique.

All that you need to do is create a different id for each page navigation element, say "page_navigation_1" and "page_navigation_2". Then you just need to modify your code like this:

$('#page_navigation_1').html(navigation_html);
$('#page_navigation_1 .page_link:first').addClass('active_page');
$('#page_navigation_2').html(navigation_html);
$('#page_navigation_2 .page_link:first').addClass('active_page');

However, it could be that your page content is so short (for example, you have just one row of items) that it does not look good to have to have two page navigation elements. In that case, you could simply not set one or the other.

Edit: If you have a lot of items to display, it could be more efficient to do the pagination logic server-side because, as it is, you appear to be sending all the items for every page.

@Johan It might be that you could make your code more efficient overall. I edited my answer to point that out.

Collectives™ on Stack Overflow

Use js function twice on same page

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related