IBM Worklight 6.0.0.1 - JavaScript not executing in a jQuery Mobile multipage app

Question

I am using IBM Worklight Studio version_6.0.0.20130926-2018.

In my app I am using the jQuery Mobile framework.
My problem is that when I try to load a data-role="page" using $.mobile.changePage, the page is not refreshed by itself. When I refresh this page, the JavaScript code is not working.

Instead, I get the following errors:

 ReferenceError: WLJQ is not defined profile.html:11
 TypeError: $ is undefined jquery.mobile-1.3.2.js:28
 ReferenceError: $ is not defined profile.js:3
 ReferenceError: WL is not defined

The $.mobile.changePage code:

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

        }
    }
}); 

How to solve this in Worklight?

Answer 1

If I understand correctly you created another HTML page that you navigated to. It is not the right way to do navigation when using Worklight. Worklight is a single-page application!, so you need to use a div element that switches the content instead of navigating between pages. More information regarding this can be found here: http://public.dhe.ibm.com/software/mobile-solutions/worklight/docs/v610/03_02_Building_a_multi_page_application.pdf