Search code examples
jquerycordovajquery-mobileloadpage-init

jQuery Mobile scripts wont run on external page load, how to?

i have 2 pages, index.html and about.html in a jQuery Mobile and Phonegap app

index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 
    ... load jquery and jquery mobile...
</head> 

<body> 
    <div data-role="page" id="index">
    ...content goes here...
        <a href="about.html"  data-role="button">about</a>
    </div>
</body>
</html>

and about.html has just the page data-role

<div data-role="page" id="about">
<a href="index.html" data-rel="back" data-icon="back" data-transition="slide">Back</a>
...content goes here...

<a href="#dialog" id="form_dialog" data-rel="popup">qweqwe</a>
<div data-role="popup" id="dialog" data-overlay-theme="a" data-position-to="window">
    <div data-role="content" data-theme="c">
        <a href="#page" data-role="button" data-theme="c" >Ok</a>
    </div>
</div>

</div>

the issue i am having is that once i load the about page the dialog and the back link don't work.

if i place the popup html in the index it will work.

Also when the new page loads the styles are there so that means that jquery mobile is loaded.

Any ideas on this issue?

thanks

Solution

  • From what I have seen your code works just fine.

    I have created these to files from your example_

    index.html

    <!DOCTYPE html>
<html>
  <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"/></script>    
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"/></script>
  </head>
  <body>
        <div data-role="page" id="index">
        ...content goes here...
            <a href="about.html"  data-role="button">about</a>
        </div>  
  </body>
</html>

    about.html

        <div data-role="page" id="about">
            <a href="index.html" data-rel="back" data-icon="back" data-transition="slide">Back</a>
            ...content goes here...

            <a href="#dialog" id="form_dialog" data-rel="popup">qweqwe</a>
            <div data-role="popup" id="dialog" data-overlay-theme="a" data-position-to="window">
                <div data-role="content" data-theme="c">
                    <a href="#page" data-role="button" data-theme="c" >Ok</a>
                </div>
            </div>              
    </div>

    Above code works just fine. Maybe you have a problem with a jQuery Mobile and jQuery version mismatch? Only problematic part of your code was this back button:

    <a href="index.html" data-rel="back" data-icon="back" data-transition="slide">Back</a>

    Do not use a href location with a data-rel="back", data-rel="back" has a bigger priority, so it is not an error. Also this back button is not working correctly after popup has been closed. If you click it after popup has been closed it will first lead you back to about.html and second click lead you back to the index.html. This is not an error, popup counts as an another page action.

    So in case of your back button remove data-rel="back". This will fix it to work correctly on about.html page.