linking pages in different html files in same directory in jquery mobile

Question

I have two .html files in my jQuery Mobile app directory (myapp/html/...) .In main.html i have a page which i declared as:

<!--Home page-->
<div data-role="page" id="home" >
...
</div>

and in the second .html file which is just a login page, i have a button which i want to wire to the home page in main.html.

I have tried:

<link href="html/main.html"/>

and then:

<ul data-role="listview" data-theme="b" data-inset="true">
        <li><a href="html/main.html/home">Login</a></li>
    </ul>

but i get an error message saying "error loading page" . I have also tried adding # just before home in the link but then the error message doesn't even show.

I know that in "normal" html, if the two html files are in the same folder, all i have to do is

<a href="thefile.html">my link</a>

But since one html file has several pages embedded in it in jQuery Mobile, how do i do this?

Answer 1

To be able to solve this problem you need to understand how jQuery Mobile page handling works, and you can't solve this problem.

When jQuery Mobile handles pages only first HTML files is fully loaded into the DOM , all intermediate files are loaded only partially. When I say partially I mean HEAD will be stripped away and only FIRST data-role="page" will be loaded.

So if you have 2 pages, for example lets say first one is called main.html and second one is called second.html , and lats say both of them hava 5 data-role="page" div containers.

All pages inside main.html will be loaded into the DOM during app initialization, but when you you change page to second.html only first data-role="page" div container will be loaded into the DOM , everything else is going to be discarded.

Read more about it here .