flaviusmatis / flaviusmatis/simplePagination.js
Pagination element losing pagination attribute after dialog open and close
- Dominant language
- JavaScript
- Stars
- 777
- Forks
- 397
- PR merge metrics
- No merged PRs in 30d
Description
Hi there,

I'm paginating pet tiles on the home page of my application, and for each pet tile, I attach a click handler to open a dialog for more information regarding that pet. On load of the page, I attach the pagination with my options onto the two elements that float on the top and bottom of the page, like so:
``` javascript
//Setup PetReport Pagination here.
$(".pagination").pagination({
items:PETREPORT_COUNT,
itemsOnPage:50,
cssStyle:"light-theme",
onPageClick: function(pageNum){
fetch_PetReports(pageNum);
}
});
```
When I flip through pages, I go and fetch more pets from the server, and I also call this helper function to redraw and readjust pagination width:
``` javascript
86 function update_pagination(){
87 //It's important to adjust pagination width for centering.
88 var numPages = $(".pagination").pagination("getPagesCount");
89 numPages = (numPages > 10) ? 10 : numPages;
90 $(".pagination_container").css("width", 110 + 35 * numPages);
91 $(".pagination").pagination("redraw");
92 }
```
So that's background on the problem. The problem itself comes up when the click handler for a pet tile gets triggered and the pet dialog is shown. When I go to close that dialog and then try to flip through pages, I get an error like this:
**epm-base.js:88: Uncaught TypeError: Object [object Object] has no method 'pagination'**

which refers to the line where my two pagination elements are trying to access their pagination attribute, but yet it doesn't exist.
Any ideas here? I initially thought that loading simplePagination JS and CSS on the pet dialog page might be causing the issue, but after removing them, I'm still getting the error. I'm also not doing anything after the dialog close callback, besides just destroying the dialog div.
Contributor guide
No contributing guide indexed for this repository
Research direction
Reproduce the pagination and pet-dialog lifecycle described in the issue, starting with epm-base.js around line 88, the .pagination initialization, and update_pagination(). Inspect what happens to the pagination elements when the dialog is opened and destroyed; done means pagination methods remain available and page switching works after the dialog closes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, jquery
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100