IBM Worklight - Navigation errors in a multipage app

Question

I am developing a hybrid application in IBM worklight using jQuery Mobile.

My application folder structure is like this:

carbikepooling.html (default file created in jquerymobile app)
pages folder, contain files: ownerProfile.html, passengerProfile.html, createPool.html
Also validateForm.js is associated with carbikepooling.html, ownerProfile.js with ownerProfile.html, createPool.js with createPool.js

From carbikepooling.html, I change page to ownerProfile.html placed in the pages folder: validationForm.js (associated with carbikepooling.html)

function redirectToProfile(profileId, profileType){
        if(profileId == null || profileId == ""){
            $("#failMessage").fadeIn();
        }
        else if(profileType == "Owner"){
            var dataurl = '?profileID='+profileId;
            $("#failMessage").fadeOut(200, function(){$("#loginSuccess").fadeIn(function(){$.mobile.changePage('pages/ownerProfile.html'+dataurl, {transition: "slide"});});});

        }
        else{
            var dataurl = '?profileID='+profileId;
            $("#failMessage").fadeOut(200, function(){$("#loginSuccess").fadeIn(function(){$.mobile.changePage('pages/passengerProfile.html'+dataurl, {transition: "slide"});});});

        }
    }

This works fine.

Now, I am in the ownerProfile.html file, from this file, when I change page to createPool.html file placed in the same pages folder as:

ownerProfile.js (associated with ownerProfile.html file)

$(document).undelegate('#crtPool', 'click').delegate('#crtPool', 'click', function() {
            if(update1 == 1 && update2 == 1){
                var dataurl1 = '?profileID='+profileId+'&name='+userName;
                $.mobile.changePage('pages/createPool.html'+dataurl1, {transition: "slide"});
            }
            else{
                alert("Oops! You have not updated all of your information. To create pool, first update your info (click the settings icon on the right top)");
            }
        });

Problem is that this time, the createPool.html file is not loaded because the path created to locate the file is wrong as:

GET http://192.168.42.239:10080/CarBikePooling/apps/services/preview/CarBikePooling/common/0/default/pages/pages/createPool.html

As you can see that the pages in the URL is shown two times, I don't understand why.

Idan Adar · Accepted Answer · 2014-01-14T18:05:18.373

You did not specify in the question where is the pages folder in the app structure.

Assuming it is like this:

apps\
--- yourApp\
------ android\
------ iphone\
------ common\
--------- css\
--------- js\
--------- my.html
------ pages\
--------- my1.html
--------- my2.html
--------- my3.html

I think it's because once you changePage from the main HTML file, which is at apps\yourApp\common you are now in apps\yourApp\pages...

So when you want to move from a file in pages\ to another file in pages\, since you are already in pages\, simply call to the HTML file. Meaning,

Change this:

$.mobile.changePage('pages/createPool.html'+dataurl1, {transition: "slide"});

To this:

$.mobile.changePage('createPool.html'+dataurl1, {transition: "slide"});

Alternatively, go a level up and back in, meaning: ../pages/createPool.html.

This problem is solved. I had tried your solution before asking this question, but nothing happens. So, how I debug this is as follows: I write - $.mobile.changePage('../pages/createPool.html'+dataurl1, {transition: "slide"}); and it works perfectely. — himanshu206, Jan 14 '14 at 18:03

IBM Worklight - Navigation errors in a multipage app

1 Answers1

Linked