jQuery Forum

You've probably duplicated an ID. The HTML specification does not permit duplication of IDs, and the browser handling of such is inconsistent.

It's better to use classes instead of IDs with jQuery Mobile. See the jQuery Mobile forum for *many* posts on this subject.

BTW, this is the wrong forum for these questions. Please use the 'jQuery Mobile' forum.

im definitely sure i have not plus why does it work in a desktop browser like chrome and safari but not on android webview?

If you check other examples on how to load multiple pages in a single html file, they all use ID's

I hadn't noticed  that you had multiple pages in a single file.

That's not something that I recommend. The problem is, you cannot mix multi-page files with single-page files. (Well, you *can*, but then you have to use data-rel="external" or data-ajax="false" when going between files, and that reloads the entire jQuery/jQuery Mobile platform.)

And your site will eventually grow to the point that you will need to switch to single-page files. Then it is a refactoring nightmare.

Unfortunately, you haven't provided a complete example, so impossible to diagnose further. You're giving us little bits and pieces. It's unclear whether this is all in one file, or multiple files?

http://forum.jquery.com/topic/how-to-ask-for-jquery-mobile-help

-----

P.S. You do, indeed have duplicated IDs. You've used the same ID for both your page and your list. This won't work - it is invalid HTML. The reason it is different in different browsers is because different browsers deal with invalid HTML differently.

jQuery uses the underlying getElementByID() function present in all browsers. Notibly, getElementByID() only ever returns, at most, *one* element. If there are duplicates, what should be browser do? Some return the first one defined, some the last, some might return a random choice, and others might return none at all. It is invalid HTML, and the browser has no obligation to try to guess what you meant. The specification does not state how the browser should handle this invalid HTML.

1.    <div data-role="page" id="itemTypeList">
2.       <div data-role="header" data-inset="true" data-position="fixed" data-theme="b" > <a href="" onclick="history.back(-1); return false;">Back</a>
3.         <h1>Item type</h1>
4.       </div>
5.       <div data-role="content">
6.         <ul data-role="listview" data-inset="true"  data-scroll="true" id="itemtypeList">
7.           <li><a href="hello1.html">hello 1</a></li>
8.           <li><a href="hello2.html">hello 2/a></li>
9.         </ul>
10.       </div>
11.     </div>
12.     </div>

If you check other examples on how to load multiple pages in a single html file, they all use ID's

Unfortunately, the examples are full of bad practices. This is the worst, though. IMO, the examples should not use IDs, and it is the first thing that should be mentioned in the documentation, because the idea of ditching IDs is so foreign to most web developers and most are very resistant about the idea of switching from IDs to classes. But using IDs is the surest way of making your jQuery Mobile project fail.

Cool thanks for the post. i will try and check that my ID is not the same and see if it fixed the issue.