I am using Ruby on Rails
3.1.0
, jquery-rails
and WillPaginate
gems in order to paginate items via AJAX.
开发者_开发问答I am trying to keep check box checked statuses in an AJAX "paginated" view. That is, in a view it is displayed a list of items and (for performance reasons - since those items can be a lot) for those it is implemented pagination (10 items per page) so to have an output like the following:
# * `[ ]` represents a check box
# * `[X]` represents a checked check box
# * `Item<N>` represents a check box label
# * `Previous`, `Next`, `1`, `2`, `...` are WillPaginate links to switch
# between pages
[X] Item1
[X] Item2
[X] Item3
[ ] Item4
[ ] ...
[ ] Item10
← Previous 1 2 3 Next →
Normally, when the user click on the Next
link it happens that it is loaded and rendered (by performing an AJAX HTTP GET request) the next page including next 10 items. My problem is that if a user check some item (say Item1
, Item2
,Item3
have a status of checked) and then he\she switchs page those checked item statuses are lost. That is, when the user go back to the previous page then Item1
, Item2
,Item3
are not more checked (as well as it should be since I have not implemented nothing to keep them statuses).
I would like to keep checked statuses on switching pages. How can I do that? What approach do you advice to use (maybe Ruby on Rails session
...)?
You could assign the entire DOM tree for the page to an array item (keyed by page number) when you leave it. Then when (if) your visitors go back to that page, you can load that straight back into the DOM from the array without an AJAX request, keeping your checkboxes as they were and making the page far snappier.
This will work fine as long as the onclick listener for your checkboxes is on a DOM node that is further up the tree than the stuff you are swapping out. If that makes no sense, look up event bubbling - it rocks! :)
If your app has more complicated UI like this, maybe it is better to provide some javascript MVC library like sproutcore or backbone? Then each of checkbox would be an instance of model stored internally by library.
精彩评论