Search jQuery

jQuery Forum

Pagination and Duplicate IDs

in jQuery Mobile • 6 months ago

So I have a bunch of video records that I load from a database, far too many to put on one page. In order to take advantage of the history feature of jQueryMobile, I have the pages dynamically generated on the server side with a query string such as "?start=10" or "?start=20". Users will have the ability to edit the title and description of the video through a handy little popup.

Here's the fun part. I bound the ajax 'save' function to the popup in the $(document).on('pageinit'... inside the <div data-role="page". Both ways that I've tried to do this offer unique problems. If I use an ID of the popup form, it will only execute the form submission on the FIRST page that's loaded, because all the other pages will load and have a duplicate id'd form. If I use a more lenient selector such as [name=blah] then I end up binding the same event to the form every time a new paginated page is loaded. So that fires the save event 10 times (or how many ever pages have been loaded).

I've got the same functionality for an indeterminate amount of pages, and it'd be nice to have the same IDs, but I don't know how to make the history manager recognize that I've gone to a new page...

So what is the correct way to handle something like this? I'd prefer to keep the history management in use, but if I've got to go to one page with javascript which loads the data and handles pagination, then I guess I'll have to do it that way.

Replies(5)

haga0054

Re: Pagination and Duplicate IDs

6 months ago

I guess I am a bit confused about your problem. This popup you are talking about, is it created each time the user gets to it?

I guess I just don't understand the process from your description. I would need to see what you are talking about. Can you create a demo on JSfiddle.net? I would try to use classes - the class name can be the same. If it's an issue with re-creating the form, why are you doing that? Just leave the form static and the popup dynamic.

johnwe

Re: Pagination and Duplicate IDs

6 months ago

Hey, thanks for your reply. Here's some clarification (I hope).

I can't use JSfiddle, because this involves more than just javascript.

Imagine you have one page that's dynamically generated by the server based on the query string. Then you have a button on the page that will perform an action. You tie a click event handler to the button. Easy enough.

Now, you load the page again, with a different query string. The javascript ties the event handler to the button again. Again, easy enough.

Now let's move to using jQueryMobile. It loads the first page into the DOM. Ties the event handler to the button. Everything works dandy. Then you go to the same page with a different query string. jQueryMobile correctly determines that it's a new page, and loads it into the DOM without unloading the first page. This is behavior I like, and approve of and would like to keep.

However, when we try to attach the event handler now, we run into my problem. There are two options (I've tried) to attach the event handler.

Use an id attribute of the button "#id". It works fine on the first page, but when we load the next page, we suddenly have two buttons with the same id. Problem! The event handler is tied to the first page's button a second time. This causes the event to be triggered twice for the first page's button (if we navigate back) and not at all for the second page's button.
Use a non-unique attribute of the button "input[type=button]". It works fine on the first page, but when we load the second page, the button event handler is tied to ALL the buttons with that selector. So when we navigate back to the first page, the event is run twice. This is a problem.

So my question is, what is the best practice for making certain I only attach the event handler once to each button? Let me know if I need to make it any clearer.

Thank you for your help.

nick.vrtis

Re: Pagination and Duplicate IDs

6 months ago

Not sure what 'best practice' is, but I have two suggestions.

If you can change the code on the server, have it create an id for the button based on the query string (id10, id20, etc). Then you could look at the query string and attach it to the correct id when the page loads.

A second option would be to find the button via the "input[type=button]" and find the one without an id and give it and id based on the query string. Then attach the code to it.

watusiware

Re: Pagination and Duplicate IDs

6 months ago

You actually don't need an ID on a popup, if you are opening it from JS with $.mobile.changePage().

You can provide a jQuery object instead of a string. So, you can find the popup on the page with a query, and then supply the JQM object.

$.mobile.changePage($.mobile.activePage.find(".my-popup"));

johnwe

Re: Pagination and Duplicate IDs

6 months ago

Thanks watusiware, that's the key I was looking for. I knew there was something small that I'd missed somewhere.

The great answer to my question is:

$.mobile.activePage

It lets me only bind to the unique page!

Top Reply

Response title

Attachments

jQuery Forum

Pagination and Duplicate IDs

Replies(5)

Re: Pagination and Duplicate IDs

Re: Pagination and Duplicate IDs

Re: Pagination and Duplicate IDs

Re: Pagination and Duplicate IDs

Re: Pagination and Duplicate IDs

Statistics

Tags

Actions

Related Posts