One-page website (JQuery Mobile): how to manage multiple instances of one page in DOM?

Question

I am creating a social website based on jquery mobile. Pages are loaded dynamically using AJAX and are cached in DOM (jQM manages this). I have a chat system on the site: when user click on a name on the contact list page (/chat/), a page with the conversation history with the selected contact loads (/char/msg/?u=user_name).

The problem: when user is chatting with multiple (n) users at the same page, n instances of the conversation page will be loaded and stored on the DOM (/chat/msg/?u=user_1, /chat/msg/?u=user_2, ..., /chat/msg/?u=user_n). IDs of elements on the conversation page will inevitably conflict which will break the chatting functionality.

How should I manage the conversation pages to avoid ID conflicts? Destroying all other conversation pages when switching to one is not an option — I would like to support fast-switching between the conversations. I noticed that GMail and Facebook assign random unique ID in such cases but that's the best practices of doing this? Is there a pattern that I can make use of? And is there a simpler solution?

Thank you.

score 1 · Answer 1 · edited May 23 '17 at 12:21

1

There is a reference to the current page via $.mobile.activePage, any selectors should search from the current page as the root, e.g. $.mobile.activePage.find('#myElement')

You also need to ensure you're properly using pageinit/pageshow to bind your on listeners properly - in which case you have a reference to the current page too.

edit Thought I'd add this in case it helps: https://stackoverflow.com/a/9085014/737023 This is how I've managed to handle multiple pages and id conflicts, I assume you're also using DOM caching = true? I've never worked with that but there shouldn't be any new issues.

edited May 23 '17 at 12:21

Community

1
1

answered Feb 27 '12 at 23:11

Clarence Liu

3,874
2
25
29

Thank you for response. I noticed that the JavaScript app breaks when there are just two elements with the same ID (e.g. ). This is not related to how the elements are selected using jQuery or whatever. This is the major challenge. – Alex Avrutin Feb 27 '12 at 23:26
You shouldn't have two elements with the same id within one page, I added a link to a more detailed solution I posted before to the answer – Clarence Liu Feb 27 '12 at 23:29

score 1 · Accepted Answer · answered Feb 27 '12 at 23:29

This is a common issue when getting used to jQuery Mobile. The solution is that if you find yourself using the same ID on multiple pseudo-pages, then stop, and make them classes instead. It's as easy as changing the id attribute to class for any element that uses an ID in a non-unique way.

Here is an example:

<div data-role="page" id="some-page">
    <div data-role="content">
        <ul class="page-list">
            <li class="first-list-item"></li>
        </ul>
        <a class="back-btn" data-role="button" href="#">Back</a>
    </div>
</div>

You can then use $.mobile.activePage.find('.back-btn') to find the back button for the current page, or you could use $('#some-page').find('.back-btn') to target a specific back button.

Basically my suggestion boils down to using page ids as the unique part of your selectors and then using classes for anything more specific so each page can have the same structure. This will help you write re-usable code as well.

One-page website (JQuery Mobile): how to manage multiple instances of one page in DOM?

2 Answers2