jquery mobile #someLink not working in android browser

jonneymendoza · 11 Jul 2013 at 21:27

i am creating a basic html5 jquery mobile webpage that uses 3 jquery mobile pages where users can navigate to depending on the href they click on.

in the safari and google chrome web browser this feature works perfect i.e it will load the correct page using:

Code:

    <li>
        <h3>Type:</h3>
        <h4><a href="#itemTypeList" data-role="button" data-icon="arrow-r" data-iconpos="right">Select Type</a></h4>
      </li>

In this case it will load #itemTypeList page that is inside the same html5 file as the above code that invoked the web request call.

For some bizare reason this call does work on an android webview. It never displays or even attempt to display the #itemTypeList page

here is the itemType page

Code:

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

And here is the original content page that gets displayed initially

Code:

div data-role="page" id="mainPage">
      <div data-role="header" data-inset="true" data-position="fixed" data-theme="b" > <a href=""  onclick="history.back(-1); return false;">Back</a>
        <h1><span style="margin-left:1em">Item Detail</span></h1>
      </div>
      <div data-role="content">
        <ul data-role="listview" id="itemFieldslist" data-inset="true"  data-scroll="true" >
          <li data-role="list-divider">
            <h2>Item Detail Title</h2>
          </li>
          <li>
            <h3>Type:</h3>
            <h4><a href="#itemTypeList" data-role="button" data-icon="arrow-r" data-iconpos="right">Select Type</a></h4>
          </li>
          <li>
            <h3>Some Field</h3>
            <h4>e3e3e3e</h4>
          </li>6
        </ul>
      </div>
    </div>

Thanks

agent_paul · 11 Jul 2013 at 22:51

Jquery mobile wants you to have each div that's defined with a data role page to be in the same file. So add the page contents into that file and the #link will work. If you'd prefer each page to be in their own separate file then you will need to provide proper href's. jquery will then get the links content and inject the data pages content into the current Dom. Hope that helps

jonneymendoza · 11 Jul 2013 at 23:39

All of it is in the same file already.i just highlighted the above code sample in parts so it is easy to read and understand but all code below is under one HTML file

agent_paul · 12 Jul 2013 at 08:01

Do you get an animation when you select the button?

I would check if your have any other elements on the page with the same id and make sure your html is syntactically correct.

Putting it on something like jsfiddle may help other people understand what your on about

jonneymendoza · 12 Jul 2013 at 20:52

No no animation. nothing happens

agent_paul · 12 Jul 2013 at 21:02

Do the demos work ok in the jqm documentation site ?

If you could create a js fiddle and share it, then I'll be able to help without guessing