jQuery Mobile changePage() not working in Windows Phone

Question

I am developing an application using Phonegap for Windows Phone 8.

I've used jQuery Mobile for interface design.

the $.mobile.changePage() is not working. The page is not being changed.

Is there any other way to change the page? Is there any other framework to design the interface for mobile?

$("#btnSearch").bind('click', function() {
    showSpinner();
    $.mobile.changePage("#pageSearch");
});

Answer 1

I think this problem is the same as in WP7 described here.

CHECK FOR PATH PROBLEM:

if($.mobile.path.getLocation("x-wmapp1:/app/www/index.html") != "x-wmapp1:/app/www/index.html")
{
    console.log('there is path problem');
}
else
{
    console.log('everything is OK with paths');
}

SOLUTION:

As described in github, problem is path on WP7 differs from other platforms. Basically on WP7 getLocation prints relative paths with double slashes, which causes this issue at first place. To fix, open jquery.mobile-1.3.1.js and refactor following:

-        var uri = url ? this.parseUrl( url ) : location,
-          hash = this.parseUrl( url || location.href ).hash;
+        var uri = this.parseUrl( url || location.href ),
+          hash = uri.hash;

and:

-        return uri.protocol + "//" + uri.host + uri.pathname + uri.search + hash;
+        return uri.protocol + uri.doubleSlash + uri.host + uri.pathname + uri.search + hash;

After making this changes, check should display "everything is OK".

PS This is tested on WP7 and totally fixed my issue with $.mobile.changePage().

PS2 This issue is fixed at github version of jQuery, although I've just checked latest stable version(1.3.2) and unfortunately it is NOT fixed there.

Regards,

Hristo Todorov

Answer 2

I did have the paths problem mentioned in the answer above, but this didn't solve my problem. I discovered after a lot of trial and error that it was the protocol on the begining of the URL that was causing the problem.

A change page for "mypage.html" will send an Ajax request for

x-wmapp0://www/mypage.html

It needs to be just

www/mypage.html

I made a modifcation to the jQuery Mobile source to manipulate the string to cut off the protocol and now it works perfectly.

To apply the fix, in the un-minified jQuery Mobile js file, search for "$.ajax" and add the following just before it:

var parts = fileUrl.split("www/");
fileUrl = "www/" + parts[parts.length-1];

This actually removes "x-wmapp0://www/" and puts the "www/" back on again. Removing just "x-wmapp0://" does not always work because of the way jQuery Mobile works with urls, resulting in "www/www/..." in some cases.

This is confirmed to work with Cordova 3.1 and 3.3 with jQuery Mobile 1.3.2