JQuery: Combine multiple pages into one

Posted by k_wave on Stack Overflow See other posts from Stack Overflow or by k_wave
Published on 2012-09-18T09:49:33Z Indexed on 2012/09/18 15:38 UTC
Read the original article Hit count: 196

Filed under:
|
|
|

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?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery