[Note: These are more in-depth (read: tedious) write-ups of my experience with each section of the Zyring project, leading on from my intro post on Zyring. This is mostly for my own benefit but could conceivably be of use to someone doing the project.]
Using the pager element to navigate (cont’d)
OK, I’m awake, reasonably alert, and well-fortified by the supermarket garlic naan I ate cold out of the bag on a bench in the shopping centre. Apparently this is not what the well-dressed ladies of Clifton generally do for breakfast, or so I gather from the odd looks, but hopefully it’s helped put me in the right frame of mind for going back and looking at the off-by-one error I had weeks ago.
First, let’s work out exactly what the problem is. Take Seattle as an example. There are 165 apartments listed, so that should make 18 pages of 9 apartments plus a 19th page with 3 apartments. Looking at the backend data, the first apartment on each page should be:
Page 1: Avalon Kirkland
Page 2: Kerry Park Apartments
Page 3: Lexicon
Page 17: The Dakota at Rainier Court
Page 18: The Century
Page 19: Alcyone
However what’s actually happening is this:
- On first loading
cities/Seattle, I get Avalon Kirkland as expected.
- But if I now click on page 2, I get Lexicon which should be page 3…
- …and if I click back to 1 I get Kerry Park Apartments. 😦
- Also, the list of pages only goes up to 17, The Dakota. The pages above that are just not displayed.
Same stuff if I click on ‘Next’ and ‘Previous’ instead of the page numbers. So I’m initialising it correctly, which makes sense as I’m explicitly setting
$scope.currentPage = 0;, but then it’s off by one after that. Not sure what’s going on with the last pages missing.
Looking at the AngularUI Bootstrap documentation, I see that
ng-model expects the first page to be 1, whereas mine start at 0, so that is one of the problems, so I fix that. After fixing this Avalon Kirkland is consistently the first page as expected, which is good, but I now have a “TypeError: Cannot read property ‘push’ of undefined” message, and the pager element loads stuck on page 17, which is still the last page. So I’ve fixed one thing and now something else is broken – progress of a sort.
OK, now I’m having a look at the array of pages
$scope.pages. It looks OK before I push any information into it, but then there’s a problem. It should look like
[Array, Array, Array,...] but instead there’s an
Array at the beginning. Bummer. This might explain why I’m getting the ‘TypeError’ message, though, as there isn’t enough space in the array for everything I want to push to it, so I’m making progress.
Indeed, I find my
while loop goes one too high, and I get rid of the TypeError problem and the carousel loads at the first page with Avalon Kirkland as expected. STILL having the problem with the highest pages missing though.
Let’s look at all the cities…
- Seattle: 165 apartments, should be 19 pages, displaying 17, out by -2
- Redmond: 65 apartments, should be 8 pages, displaying 7, out by -1
- Bellevue: 164 apartments, should be 19 pages, displaying 17, out by -2
- Kirkland: 172 apartments, should be 20 pages, displaying 18, out by -2
- Tacoma: 141 apartments, should be 16 pages, displaying 15, out by -1
- Olympia: 52 apartments, should be 6 pages, displaying 6, correct
So it seems to be more wrong the larger the number of apartments, but why is not obvious to me.
I also find another problem, possibly related. When I click on some apartments, the data doesn’t load. Instead I get an empty page like this:
This happens only with apartments on later pages.
I fiddle about with this all day but cannot work out what the problem is. It might finally be time to ask for help… but I want to finish off the remaining bits of styling first.