How to reset initialized jQuery plugin variables on some other event?

Question

I am having trouble to initialize twbs-pagination jQuery plugin. In document.ready section it works fine but if i need to reset or re-initialize plugin variable in a function (after document loaded) or button click event it gives not a function error. Here is my code

This works fine

jQuery(document).ready(function ($) {    
    $('#paging-cont').twbsPagination({
        visiblePages: 7,
        totalPages: 12,
    });
});

problem is when i am trying to initialize plugin after document.ready

function ShowPagger(totalRec) {
    $('#paging-cont').twbsPagination({
        visiblePages: 7,
        totalPages: totalRec,
    });
}

this give error of not a function

here this guy is trying to do the same thing http://stackoverflow.com/questions/24961833/reset-total-pages-in-jquery-pagination-plugin — Praveen Rawat, Sep 18 '14 at 06:52

score 1 · Accepted Answer · edited May 23 '17 at 12:00

1

I made a workaround for similar issue. Checkout the answer here:

Reset total pages in jquery pagination plugin

The essential idea behind this is to reconstruct the pagination control each time. For this I am using a container, clearing and filling each time when I receive the data

$('#paginationholder').html('');
$('#paginationholder').html('<ul id="pagination" class="pagination-sm"></ul>');
$('#pagination').twbsPagination({
    startPage: data.page,
    totalPages: data.total,
    visiblePages: 5,
});

edited May 23 '17 at 12:00

Community

1
1

answered Sep 19 '14 at 01:51

Krishna Sarma

1,852
2
29
52

@KrishnaSarma thanks for fast reply.I tried to empty and create html every time as you have mentioned but still same error. – Praveen Rawat Sep 19 '14 at 05:20
Can you share some more codes relevant to the situation? Probably if the function is defined in different scope (like inside jq ready) and trying to access it from outside, this could happen. – Krishna Sarma Sep 19 '14 at 10:34

score 1 · Answer 2 · answered Oct 07 '16 at 08:19

First I'm sending ajax request and retrieve totalPages, visiblePages and startPage. Then:

jQuery(document).ready(function ($) {

$('#pagination-for-posts-bottom').twbsPagination({
    totalPages: totalPostPages,
    visiblePages: visiblePostPages,
    startPage: currentPage,
    onPageClick: function (event, page) {
        console.log("document.ready: " + totalPostPages);
        console.log("document.ready current page: " + page);
        offset = (page - 1) * 10;

score 0 · Answer 3 · answered Sep 18 '14 at 06:46

0

A typo

--> fucntion should be

function ShowPagger(totalRec) {
    $('#paging-cont').twbsPagination({
        visiblePages: 7,
        totalPages: totalRec // remove , from here
    });
}

and remove that trailing , after total pages in function.

$('#paging-cont').twbsPagination({
    visiblePages: 7,
    totalPages: 12 // remove , from here
});

answered Sep 18 '14 at 06:46

Dhaval Marthak

17,246
6
46
68

1

That's a typing mistake over here. Its fine in code. – Praveen Rawat Sep 18 '14 at 06:48
@PraveenRawat Updated answer as well – Dhaval Marthak Sep 18 '14 at 06:49

How to reset initialized jQuery plugin variables on some other event?

3 Answers3