Home/ Questions/Q 8557047
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T15:29:11+00:00

I am developing an application by using phonegap and jQuery Mobile. Phonegap recommends a

  • 0

I am developing an application by using phonegap and jQuery Mobile. Phonegap recommends a single document structure. As 5 divs or more in a document are pretty unclear, I’m trying to split up my pages (the div’s) into multiple documents. As soon as phonegap loads the app, I want to insert these documents into the index.html.

function loadPage(external_document) {
    var docname=external_document+".html";
    $.get(docname, function(data) {
        console.log(docname+" loading");
        $("body").append($(data).find("body"));
        $("head").append($(data).find("head"));
        console.log(docname+" loaded");
    });

}

document.addEventListener("deviceready", function(){
    loadPage("DialogCredentials");
}, false);

DialogCredentials.html

<html>
<head>
     <script type="text/javascript" src="js/DialogCredentials.js"></script>
</head>
<body>  
    <div data-role="page" id="dlg_credentials">
    <div data-role="header"><h1>Login</h1></div>
    <div data-role="content">
    ... 
</div>
</div><!-- /page -->
</body>
</html>

As soon as the loadPage gets executed there should be a <div id="dlg_credentials"… and the corresponding javascript tag in the dom of my main document. But it isn’t. There are no errors shown in the web inspector.
So what am I doing wrong here?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Without setting up a test case for you, if you really want to separate your pages to make your coding easier I would recommend to load the pages the standard way for jQuery Mobile i.e. 

    $.mobile.changePage( "about/us.html", { transition: "slideup"} );

    This way you aren’t reinventing the wheel and it satisfies your request. The overhead will be negligible compared to your proposed solution in any case let alone taking into account you want the first page to render quickly rather than to be blocked by inserting many pages before any html is rendered in any case. Since they will be local on the device in any case Phonegap will be able to serve them very quickly.

    One thing to remember when loading pages through jQuery Mobile is that it strips out anything in the target page outside of the 

    data-role="page|dialog|popup"

    tag and therefore to load custom page-specific javascript I would recommend you include the script tag directly below the 

    data-role="page"

    opening tag and set any page initialization to occur on “pageinit”

    <div data-role="page" id="options" data-theme="a">
<script type="text/javascript">
    $(document).bind('pageinit', initializeOptions());
    function initializeOptions() {
        // do your page initialization here . . . 
    }
</script>
<!-- rest of page continues here . . . . -->

    and then continue with the rest of your page as needed. That way it will be parsed when the page is loaded via the $.mobile.changePage method.

    Hope that helps.

    • 0