1

I've made a jQuery Mobile (1.0 final) app, and I am having some issues with Flickering. I know this is a defined bug currently with jQM, but I wanted to see what I could do to resolve this issue.

The thread at here mentioned the following:

flickering can occur when using the same #id more than once in a page, which is not unlikely when you are using the one page template method. so be sure to not use #id's more than once.

This is a bit ambiguous to me... Obviously because jQM does AJAX loads, multiple pages may be in the DOM at any one time. In my case, my page-level IDs are all unique, but several IDs used WITHIN the pages are not (e.g. the data-role=content div has the ID of #mainPageContent for each page).

Is this an acceptable behavior, or should my IDs be unique globally?

PS: Sorry if this is a dupe, I found a few stackoverflow posts that were similar to this question but nothing I felt really answered this specifically.

Community
  • 1
  • 1
rbdrbd
  • 53
  • 1
  • 6
  • since it's all loaded into the DOM I would suspect the Id's a clashing. IMHO I would refactor the Id's for each page and make them unique to comply with HTML5 standards – Phill Pafford Dec 22 '11 at 14:11
  • thanks to both of you guys for your answers. That's what I figured was the case, I just wanted to check before I invested the time refactoring. :) – rbdrbd Dec 24 '11 at 22:22

2 Answers2

2

No duplicate Id's are not Okay as the Id attribute is to be a unique identifier.

3.2.3.1 The id attribute

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

An element's unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS.

If the value is not the empty string, user agents must associate the element with the given value (exactly, including any space characters) for the purposes of ID matching within the element's home subtree (e.g. for selectors in CSS or for the getElementById() method in the DOM).

Identifiers are opaque strings. Particular meanings should not be derived from the value of the id attribute.

This specification doesn't preclude an element having multiple IDs, if other mechanisms (e.g. DOM Core methods) can set an element's ID in a way that doesn't conflict with the id attribute.

The id IDL attribute must reflect the id content attribute.

Phill Pafford
  • 83,471
  • 91
  • 263
  • 383
1

Your IDs must be unique throughout your whole jQuery Mobile website to make sure that the same ID is not appended to the DOM as an element that already exists.

A good work-around for this (since you already have unique data-role="page" IDs is to change the rest of the IDs in your pages to classes:

<div data-role="page" id="home">
    <div class="mainPageContent" data-role="content"></div>
</div>

This way you can easily target elements with CSS/JS to make global changes to your site or target a specific page:

GLOBAL

<style>
.mainPageContent {
    color : gold;
}
</style>
<script>
$(document).delegate('.mainPageContent', 'click', function () {
    //...
});
</script>

PAGE SPECIFIC

<style>
#home > .mainPageContent {
    color : magenta;
}
</style>
<script>
$(document).delegate('#home > .mainPageContent', 'click', function () {
    //...
});
</script>
Jasper
  • 75,717
  • 14
  • 151
  • 146