Infinite Scrolling, Parse Link Error

[awaisilyastkxel]

Hello, I am trying to add infinite scrolling in my page, everything is working fine. Here is what i am doing.

@collection = new ChozAdmin.Collections.Accounts()
@collection.getFirstPage()

But when i do
@collection.getnextPage()

It gives me following error RangeError: No link found for page 1.. I believe the issue is with my collection where i am overriding the parseLink as follow.

  parseLinks: (resp, xhr) ->
    "https://localhost:3000/api/accounts?page=2&per_page=10"

Will somebody please example me how to override the parseLink and what Linkheader format it will return. Or if there is something other problem, then please explain. I shall be very thankful to you guys.

here is my collection code

class ChozAdmin.Collections.Accounts extends Backbone.PageableCollection
  model: ChozAdmin.Models.Account
  url: "/api/accounts"
  mode: "infinite"

  state:
    firstPage: 0,
    pageSize: 15

  queryParams:
    currentPage: null,

    offset: ->
      @state.currentPage * @state.pageSize

  parseLinks: (resp, xhr) ->
    { next: "http://localhost:3000/api/accounts?per_page=10&skip=20" }

[wyuenho]

http://backbone-paginator.github.io/backbone-pageable/api/#!/api/Backbone.PageableCollection

You just need to return an object with a next link like this {next: '...'}

[awaisilyastkxel]

@wyuenho thank you so much for quick response, i have been banging my head from last 4 5 hours. @wyuenho i have updated my question and added the my collection code, will please tell me what mistake i am doing.

[wyuenho]

The links must be a URL, not an HTML anchor fragment. You must also construct the links object using the data from the resp object, which is what your server will pass down. You can pass down JSON from the server, as long as it contains the information needed to construct the links and data.

[awaisilyastkxel]

@wyuenho i have tried with URL also but still it gives the same error Uncaught RangeError: No link found for page 2

[wyuenho]

That's because you need to return a new link for every page you fetch. parseLinks gets called on every fetch.

Also, I'm not sure CoffeeScript's class syntax is compatible with Backbone's extend. You might just want to use Backbone.PageableCollection.extend instead.

[awaisilyastkxel]

Hey @wyuenho I have gone through documentation of parseLink
http://backbone-paginator.github.io/backbone-pageable/api/#!/api/Backbone.PageableCollection-method-parseLinks

it is sayint that it returns an Object, what kind of object does it needs to be return, or what would be the format of Object.

Moreoever you are saying i need to return a new link for everypage I fetch. I am just calling it 2 times, as follow

collection = ChozAdmin.Collections.Accounts()
collection.getFirstPage() # till here everything works OK
collection.getNextPage() # here it gives me the error
# OR if i do
collection.getPage(2) # still it gives me the error

[wyuenho]

The format of the object is just what the document says:

{ "next": "http://...", "first":  "http://...", "last": "http://..." }

first and last are optional. Return {} when there's no more links.

parseLinks is called when the results come back from the server after you've fetched, so if you've called getFirstPage, as your pages are 0-indexed, parseLinks should return {next: "http://... url for page 1..."}, and then when you call getNextPage, parseLinks should return {next: "http:// ... url for page 2..."}. Does that make sense? Return an empty object when there are no more pages. Use the resp parameters, which is the data coming back from the server to determine how to construct the links on the client-side.

[awaisilyastkxel]

Thank you so much @wyuenho, now everything is working fine, i am fetching the collection and appending in the view, the only issue i am left with is, its still giving me the same error,

Uncaught RangeError: No link found for page 4
Uncaught RangeError: No link found for page 5
Uncaught RangeError: No link found for page 6

while the data fetching and showing perfectly in browser. Also this time my URL is dynamic as follow,

{ next: "http://localhost:3000/api/accounts?to=#{xhr.to}" }

[wyuenho]

parseLinks's second parameter is not an xhr. It's an options object. The options.xhr is jQuery's jqXHR.

[awaisilyastkxel]

@wyuenho thank you so much for helping, @wyuenho that's just a variable name, the url i m create is dynamic, moreover if I return

{ }

from parseLink method, still it gives the same error,

Uncaught RangeError: No link found for page 2

[wyuenho]

If you return an empty object you are suppose to get an error. How else do I signal the end of infinite paging?

Your xhr.to is the to number pageable passed to the options object when you paginate. By the time parseLinks is called, you've already reached the page to and processing the metadata and the records.

Which version of backbone-pageable are you using anyway?

[awaisilyastkxel]

@wyuenho I am using latest version Version 1.4.5, @wyuenho I believe it my stupidness 👎 for me, I still have the same error :(.

Will you please elaborate how can i detect the end of page ? Or what would be the format of hash that parseLink has to return when last page is shown ? Another question is, does getNextPage() make another call to server when final page is show ?