Question

Hi (I may not be doing this correctly) – I am trying to and having problems navigating to a page in my JQuery Mobile (JQM) application when trying to load the page as a dialog using “changePage()”. I have looked around and have tried a few alternatives with no luck 🙁

E.g. I have a login page that opens successfully as a dialog on the application init:

$.mobile.changePage(page, {transition: 'pop', role: 'dialog' }); 

the login screen has a login button, which when clocked forwards to a normal (non dialog) page, again successfully and again using changePage:

$.mobile.changePage( page );

The problem occurs when I again try to load the login page in the dialog (e.g. when logging out). I have a logout button, which when clicked navigates back to the login page:

$.mobile.changePage(page, {transition: 'pop', role: 'dialog' }); 

However this time I get the following exception in the JQM lib: “Uncaught TypeError: Cannot call method ‘indexOf’ of undefined”

Here is some example code that recreates the problem:

<script type="text/javascript">

$(function()  {
    createPage("login");
});

function createPage( pageStr ) {  
    var page = $("<div id='pageWrapper' class='pageWrapper' data-role='page' ></div>");
    var header = createHeader( pageStr );
    var content = createContent( pageStr );

    page.append(header, content);

    $("body").append( page );

    if(pageStr == "login") {     
        $.mobile.changePage(page, {transition: 'pop', role: 'dialog' }); 
    }
    else {
        $.mobile.changePage( page );
    }
}

function createHeader( pageStr ) {
    var headerContainer = $("<div id='header' class='header' data-role='header' data-position='fixed'></div>");

    if(pageStr != "login") {
        var logOutButton = $("<a onclick='logout()' class='ui-btn-right' data-rel='dialog'>Logout</a>");
        headerContainer.append(logOutButton);
    }

    var headerTitle = $("<h1>Page: " + pageStr + "</h1>");
    headerContainer.append(headerTitle);
    return headerContainer;
}

function createContent( pageStr ) {
    var contentDiv = $("<div id='content' class='content' data-role='content'></div>");
    var contentBuilder = $("<div></div>");

    if(pageStr == "login") {
        contentBuilder.append(createloginForm());
    }
    else {
        contentBuilder.append(createWrapper());
    }
    contentDiv.append(contentBuilder);
    return contentDiv;
}

function createloginForm() {
    var form = $("<form id='loginForm' method='post'></form>");
    var loginButton = $("<p><input type='button' value='Login' onclick='login()'></input></p>");
    form.append(loginButton);
    return form;
}

function createWrapper() {
    var tmpText = $("<h2>some content ...</h2>");
    return tmpText;
}

function login() {
    createPage("main")
}

function logout() {
    createPage("login"); // pages[0] = login page
}

</script>

Thanks,
Jon.

Answer 1

thanks for the comment – I did not mention / include in the example, that I am cleaning the pages each time therefore no duplicate elements or ids are being added (only one page is added / rendered at any one time).

I think I have fixed the problem by manually initialising the page before hanging it – not sure if its a “cosier” fix, but appears to work:

Before calling the changePage() method, I need to first initialize the new page: E.mobile.initializePage();

Thanks again,
Jon.