jQuery mobile : 'pageinit' not firing

Question

I'm using jQueryMobile 1.4.4 on Worklight.

EDIT : I have a main html index.html which contains a div #pageContent. What I'd like to do is to include the external pages in this block, in order to maintain the header / footer and skeleton of the index page that should be generic to all the app.

I was facing an issue which is that when loading an external HTML page into a div in the main page, the Jquery style is not applied, because the styles / JS has not been interpreted yet. Using this :

function wlCommonInit () {
    $("#pageContent").load ("pages/login-view.html");
)};

then following the jquery mobile doc, to make sure that everything on the main page is being loaded before rendering an external HTML page I have changed it to :

function wlCommonInit () {

    $(document).on ("pageinit", function () {

        alert ("Hello there");

        $.mobile.loadPage (
            "pages/login-view.html"
            ,{ 
                "pageContainer": $("#pageContent")
            }
        )}
    );
}

but this code is not being fired and the alert doesn't appear.

Is something wrong with my code ?

@rajeshkakawat jQM UI (styles), read more about jQuery Mobile. — Omar, Oct 10 '14 at 10:30
Please clarify your question. You want to load another _External page_ once _current page_ is created? Or you want to load _external content_ into current page once created? — Omar, Oct 10 '14 at 10:34
@Omar, Thank you :) Please see my Edit. I'd like to load external content into the current page. and style the new loaded content with all the styles included in `index.html` — , Oct 10 '14 at 10:40

score 0 · Answer 1 · answered Oct 10 '14 at 10:58

0

Using jQuery Mobile, you'll need to replace the entire <div data-role="page" ...>. I don't think you can replace only part of the content (that is, keep the header and footer, and replace only the what's in between).

For example, in the below code snippets mainpage.html's contents is loaded/replaces that of index.html on application launch:

index.html

<!DOCTYPE HTML>
<html>
        <head>
            <meta charset="UTF-8">
            <title>index</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
            <link href="jqueryMobile/jquery.mobile-1.4.3.css" rel="stylesheet">
            <link rel="stylesheet" href="css/main.css">
            <script>window.$ = window.jQuery = WLJQ;</script>
            <script src="jqueryMobile/jquery.mobile-1.4.3.js"></script>
        </head>
        <body style="display: none;">
            <div data-role="page" id="mainpage" style="padding-top: 42px !important">
                <div data-role="content">
                </div>
            </div>

            <script src="js/initOptions.js"></script>
            <script src="js/main.js"></script>
            <script src="js/messages.js"></script>
        </body>
</html>

main.js

function wlCommonInit(){
    $(':mobile-pagecontainer').pagecontainer('change','pages/mainpage.html');
}

mainpage.html

<div data-role="page" id="mainpage" style="padding-top: 42px !important">
    <div data-role="header" id="header" data-position="fixed">
        <h3>jQuery Mobile Page Navigation</h3>
    </div>

    <div data-role="content" id="content" style="padding: 15px">
        In mainpage.html
    </div>
</div>

answered Oct 10 '14 at 10:58

Idan Adar

44,156
13
50
89

Thank you. what do you mean by `:mobile-pagecontainer` ? So if I understand, I'll need to load the footer and header everytime, right ? – Oct 10 '14 at 11:05
that's the way to load pages in jQuery Mobile 1.4 and above. Or one way, I suppose. – Idan Adar Oct 10 '14 at 11:05
So I'll need to include the header and footer div in every page, right ? – Oct 10 '14 at 11:07
Unfortunately. (Unless @Omar will have a better suggestion). – Idan Adar Oct 10 '14 at 11:08
That makes me confusing, so what could be the purpose of `loadPage` http://api.jquerymobile.com/jQuery.mobile.loadPage/ ? – Oct 10 '14 at 11:13
It is the 'old' way to load external content. Use page container. It is mentioned in the note section. – Idan Adar Oct 10 '14 at 11:14
I have found this one, http://stackoverflow.com/questions/22457764/issues-with-mobile-loadpage-and-external-page-in-jquery-mobile will try it, if doesn't work, I'll go with your answer and accept it :) – Oct 10 '14 at 11:20
I'm not saying that replacing pagecontainer with loadpage in my code above won't work. It might as well work, but you should not use deprecated API methods. – Idan Adar Oct 10 '14 at 11:21
@Andro-Begg [`:mobile-pagecontainer`](http://stackoverflow.com/a/24173950/1771795). If you want to load _contents_ you dont need to use `.loadPage` or `.pagecontainer("load")`. This [answer](http://stackoverflow.com/a/22458908/1771795) is to define a new _pageContainer_. – Omar Oct 10 '14 at 11:25
@Omar : then to load content, what Should I do ? Thank you. – Oct 10 '14 at 11:44

score 0 · Accepted Answer · answered Oct 10 '14 at 12:04

To load content into current page, use .load(). However, loaded content requires enhancement to load jQM UI (styles) .enhanceWithin(). This method applies jQM styles to all elements in spite of their type (widget).

$(document).on("pagecreate", "#pageID", function () {
    $(".selector").on("click", function () {
        $("#targetDIV")
            .load("page.html #specificDIV", function () {
            $(this).enhanceWithin(); /* apply styles */
        });
    });
});

Demo

jQuery mobile : 'pageinit' not firing

2 Answers2