AJAX navigation not working on Windows phone #6574

Closed
santhoshinit opened this Issue Oct 8, 2013 · 58 comments
@santhoshinit

Hi All,

I am working on cross platform applications using Jquery Mobile (1.3.1), Jquery (1.9.1) and Phonegap (2.8.0). The application works fine on Android, iOS and Blackberry platforms. But, on the Windows platform the ajax transitions do not seem to work. Navigation from index.html to LoginPage.html () does not happen. Its like the 2nd HTML page doesn't even load.

Can someone please let me know why or what changes I will have to make i this platform. I have set globally $.support.cors to true and $.mobile.allowCrossDomainPages to true.

Any help will be greatly appreciated. Thanks a million.

Regards,
Santhosh

@gabrielschulhof
Contributor

In order to help you we need to know if the problem you're experiencing is with jQuery Mobile. To do that, please use our jsbin template to create a simple example that reproduces the problem you're experiencing. If you cannot use jsbin because AJAX is involved in your problem, please nevertheless provide a test page which uses the latest jQuery Mobile (http://code.jquery.com/mobile/jquery.mobile-git.js and http://code.jquery.com/mobile/jquery.mobile-git.css) to illustrate the problem you're experiencing.

@gabrielschulhof
Contributor

Also, please tell us which version of Windows Phone (make, model, OS version, browser version) has the problem!

@santhoshinit

Hi Gabriel,

Thanks for the reply. Please find the attached test files.

The Index_TEST.html ->Starting page
Login_TEST.html -> Navigating page
Javascript_TEST.js -> JavaScript referring page.

Also we are testing the pages in Windows emulator and find the below
details,

Device name: undefined
Device Cordova: 2.8.0
Device Platform: Win32NT
Device UUID: 546a5032-f490-48c6-8099-e390e356c0e9
Device Model: XDeviceEmulator
Device Version: 8.0.9903.0

Kindly let me know if you need any additional details.

Thanks,
Santhosh

On Tue, Oct 8, 2013 at 5:38 PM, gabrielschulhof notifications@github.comwrote:

In order to help you we need to know if the problem you're experiencing is
with jQuery Mobile. To do that, please use our jsbin templatehttp://jsbin.com/ofuhaw/editto create a simple example that reproduces the problem you're experiencing.
If you cannot use jsbin because AJAX is involved in your problem, please
nevertheless provide a test page which uses the latest jQuery Mobile (
http://code.jquery.com/mobile/jquery.mobile-git.js and
http://code.jquery.com/mobile/jquery.mobile-git.css) to illustrate the
problem you're experiencing.


Reply to this email directly or view it on GitHubhttps://github.com/jquery/jquery-mobile/issues/6574#issuecomment-25884125
.

@gabrielschulhof
Contributor

@santhoshinit I don't believe github posts attachments to the comments for an issue. Can you please post the attached files somewhere and set them up as a demo?

@santhoshinit santhoshinit reopened this Oct 9, 2013
@santhoshinit

Hi Gabriel,

Sorry I am unable to post the files in a specific location for demo but please find the below link and consider it as an sample example with reference to the issue.

http://jsfiddle.net/yRheJ/90/

In the Windows Mobile 8 if we try to navigate with any other HTML it will not navigate to the next page and it shows "Error Loading page" error or AJAX gif loading image continuously.

Only if we declare $.mobile.ajaxEnabled = false; the HTML navigation works to another pages.

So in Windows mobile, I want to navigate within HTML files without any issues like andriod, IOS, Blackberry mobile platforms.

Kindly share your input on this. Thanks a lot .

Regards,
Santhosh

@jaspermdegroot
Member

@santhoshinit

It looks like you are testing with jQuery Mobile version 1.0. Latest stable release is 1.3.2. Please test with the the latest JS and CSS (see links in @gabrielschulhof his comment). Thanks!

@santhoshinit

@uGoMobi,

Yes I tried with latest release as well but the navigation not works in Windows Mobile.

Any other thoughts please?. Thanks.

Regards,
Santhosh

@jaspermdegroot
Member

@santhoshinit

Please provide a simple test page that uses latest code and shows the issue. So if the problem is AJAX navigation, don't disable that. See the contributing guidelines for our JS Bin template.

Is it only a problem when using PhoneGap or do you also see the problem when testing in the IE browser?

PS. I am changing the title of this ticket because it's about AJAX navigation, not about transitions (the animation).

@jaspermdegroot
Member

I am closing this ticket for now because we can't reproduce it. We re-open when a test page has been provided that shows the problem while using latest code. Thanks.

@santhoshinit

Hello Jasper,

Apologies for delay reply. I was trying to upload the html files in JSbin but not sure how to add multiple HTML files, instead i uploaded the source code in github that I tried using latest codes.

Please find the below github link and kindly provide your valuable inputs.

https://github.com/santhoshinit/crossplatform

The uploaded HTML files and Javascript file has been used for testing and the navigation doesn't works in the Windows mobile phone 7/8. It shows "Error loading Page" when clicked on Login link from Index_TEST.html and it will not navigate to Login_TEST.html.

But in the other platforms like Android, IOS, Blackberry it is working fine without any issues.

Your help will be much appreciated. Thanks a lot in advance.

Thanks,
Santhosh

@jaspermdegroot
Member

@santhoshinit

The test page in that repo is not using latest code, but version 1.3.1. Also, jQuery UI doesn't seem relevant here.

Here is a test case:
index.html: http://jsbin.com/AKOmUxa/28/edit
login.html: http://jsbin.com/AKOmUxa/29/edit

If you test with those to files while adding nothing else besides Cordova JS, does navigation work or not?

@santhoshinit

@uGoMobi,

Yes I tested these 2 files with only adding the Cordova JS the navigation doesn't works and the "Error loading page" or Ajax loading gif pops when I click on Login link as per the attached image.

windowsnavigation

@jaspermdegroot
Member

@santhoshinit

Thanks for testing again. I'll reopen the ticket.

Can you please help debugging, and test with these options set to false as well?

    $(document).on( "mobileinit", function() {
      $.support.cors = true;
      $.mobile.allowCrossDomainPages = true;
      $.mobile.phonegapNavigationEnabled = true;
    });

Thanks!

@santhoshinit

@uGoMobi,

Thanks for re-opening the ticket. Yes we have tested the above options to "false" as well but the same error popped up as "Error-loading page".

Regards,
Santhosh

@santhoshinit

@uGoMobi,

How are you doing today?

Please let me know if I want to test anything further and if you have any thoughts kindly share it which will be very helpful for my project.

Thanks.

@Ionas83
Ionas83 commented Nov 28, 2013

I have the same issue. Is this post on still open?

My application works fine on android and iphone devices but doesn't work on microsoft windows 8 phone (Nokia Lumia 520). By doesn't work I mean, it doesn't navigate at all, when ajax is enabled (Showing an "error loading page" message). But since JQuery Mobile works fully with ajax, disabling it is not an option.

I use Phonegap 3.1.0, Jquery 1.10.2, JQuery Mobile 1.3.2 which are the latest stable versions.

I can provide code anywhere you prefer... I had this issue one year ago when I was developing an other application and due to this problem I didn't publish it for Windows Phones. I thought that JQM didn't support windows 7.5 at that time but it seems that the same issue exists on windows 8.

@santhoshinit

@Ionas83,

This post is still open and I believe it can be closed.

The issue behind ajax calls not working on Windows phone 8 is due to from release of Phonegap 2.8.0 version. I would recommend you to have a test in the earlier versions of Phonegap (2.5.0, 2.6.0, 2.7.0) with your project and the ajax calls will work fine without any issues.

Feel free to reach me if you have any queries.

@jamesjnadeau

@santhoshinit

I'm very curios as to why downgrading phonegap makes this work. Can you point to specific changes in phonegap that happened that breaks this functionality?

I tracked down this issue for "phonegap" that I think outlines the same issue here(this is what I'm thinking the problem is):
https://issues.apache.org/jira/browse/CB-5456

Just curios, no rush. Thank you so much for your time.

@Ionas83
Ionas83 commented Dec 2, 2013

@santhoshinit thank you very much. Indeed downgrading phonegap seems to resolve the issue. I tried several phonegap versions using "Phonegap Build" and below you can see my findings:

Versions:
2.9.0, 2.7.0, 2.5.0 -> AJAX NAVIGATION WORKS!!!
3.1.0, 3.0.0, 2.3.0 -> CONFLICT

This is a major issue (Phonegap conflicting with Jquery Mobile ajax navigation) and since JQM is quite popular I don't know why this remains an issue.

@santhoshinit

@jamesjnadeau

I'm not sure on the specific changes but when I tried my projects with the earlier version I found the difference.

I believe in the next latest release of phonegap version it should be fixed

Cheers,
Santhosh

@santhoshinit

@Ionas83

You are Welcome! .Yes this is a major issue and I believe in the next latest release of phonegap version it should be fixed. Currently I am testing the application using cordova 3.2.0 and will share my thoughts. Please give a try and have a check in this version.

Regards,
Santhosh

@Ionas83
Ionas83 commented Dec 3, 2013

@santhoshinit I m using phonegap build which up to now, supports up to ver.3.1.0 so I cannot test ver.3.2.0 yet. If you can, let me know whether ver.3.2.0 has fixed this issue. If yes I ll probably download newest version and stop using phonegap build.

Another issue that I recently discovered is that phonegap ver.2.9.0 has a problem in showing alerts (navigator.notification.alert) in Windows Phones!!! ...so i had to even downgrade to ver.2.7.0 which does.

Btw, window.alerts are not supported in either 2.5.0, 2.7.0, or 2.9.0 in Windows Phones and doesn't seem to work even if i set window.alert = navigator.notification.alert.

You know it gets really frustrating with Windows Phones/Phonegap because right now I can use only ver.2.5.0 and ver2.7.0 if I want phonegap to properly support navigation and alerts. But what if in the future during the development I need to use a function that is supported only in, lets say ver3.0.0??? I will be stucked :(

@Ionas83
Ionas83 commented Dec 3, 2013

In addition, I have found another problem regarding navigation that exists only on windows phones.

It seems that when I add parameters in my URLs to pass values to the next page, windows phone cannot navigate properly and shows the default JQM's "Error Loading Page" message.

e.g <a href="info.html?city=paris"> Info </a> 

The above will not work on my windows phone but works just fine on my android, iOS phones.

There is a workaround using localStorage but never the less it seems quite important issue as well. Does anyone know anything about this issue, or can suggest any other workarounds?

@santhoshinit

@Ionas83

The latest version 3.2.0 I tested and still the ajax is having issues and getting the "Error Loading Page" message.

For the href navigation you try using like href="x-wmapp0://info.html?city=paris" instead of href="info.html?city=paris".

I believe this should work and navigate without any errors. Let me know the results after testing.

@Ionas83
Ionas83 commented Dec 4, 2013

@santhoshinit I m sorry to hear that phonegap ver3.2.0 still has the issue.

As far as navigating with a querystring, your suggestion unfortunately didn't work :( I tried it with phonegap versions 2.5.0, 2.7.0 and 3.1.0. I also tried it with ajax disabled but still no luck.

@santhoshinit

@Ionas83

Can you give a try placing the html file under www folder like "x-wmapp0:www/info.html?city=paris".

@Ionas83
Ionas83 commented Dec 4, 2013

@santhoshinit nope, unfortunately doesn't work either (the html is under the www folder)

did it work for you in the past? if yes, it means i m doing something wrong and i should check it more thoroughly...

@santhoshinit

@Ionas83

No I didn't use it in the past. I just use it for navigation and I do not have requirements of navigating with query string. I will have study on this and If I come across any information I will share it with you, share me your email and will discuss on any other related queries as well.

@Ionas83
Ionas83 commented Dec 4, 2013

@santhoshinit

ionas.iona@gmail.com

I ll continue searching as well! thx!

@mlegenhausen

Can confirm the problem with Cordova 3.3.0 and jQuery Mobile 1.3.2.

@pcoady
pcoady commented Feb 20, 2014

I can also confirm this problem still exists with no solution.

@gabrielschulhof
Contributor

AFAICT, Windows Phone 8 + Cordova 3.3.0 does not support Ajax.

@gabrielschulhof
Contributor

https://groups.google.com/forum/#!topic/phonegap/p29CZUdMWz4 provides a way forward.

Apparently, you have to delete the section of jquery.hashchange.js that adds support for IE6/7/8.

In addition to that, we have to figure out how to construct the URL for the Ajax request. It seems that, if you have two files in www/, index.html and external.html, the way to refer to external.html from index.html when issuing the $.ajax() call is "www/external.html". The way we issue the call now (x-wmapp0://www/external.html) doesn't work.

@gabrielschulhof
Contributor

Doing

fileUrl = fileUrl.replace( /x-wmapp0:\/\//, "" );

before issuing $.ajax() makes the loading of external pages work :/

So, an ugly fix would be this:

$.ajax = ( function( original ) {
  var stripProto = /x-wmapp0:\/\//;
  return function() {
    if ( arguments.length > 1 ) {
      arguments[ 0 ] = arguments[ 0 ].replace( stripProto, "" );
    } else if ( arguments.length > 0 && arguments[ 0 ].url ) {
      arguments[ 0 ].url = arguments[ 0 ].url.replace( stripProto, "" );
    }
    return original.apply( this, arguments );
  };
})( $.ajax );

This might fix things for any and all code using $.ajax().

@santhoshinit

Hi gabrielschulhof,

Thanks a lot for your inputs.

@gabrielschulhof
Contributor

We might also be able to fix this in Cordova, by patching HandleCommand method of the XHRHelper object that gets placed on WP8.

@gabrielschulhof
Contributor

Actually, a better place to fix this might be in the JS code it injects. There's already code in place for removing the leading "/" from the URL, but that code assumes that the URL contains no protocol. The protocol ends up in the URL later anyway, because it prepends the base if no protocol is present.

diff --git a/wp8/template/cordovalib/XHRHelper.cs b/wp8/template/cordovalib/XHRHelper.cs
index 058d317..6c2ca28 100644
--- a/wp8/template/cordovalib/XHRHelper.cs
+++ b/wp8/template/cordovalib/XHRHelper.cs
@@ -187,7 +187,12 @@ namespace WPCordovaClassLib.CordovaLib
                     var root = window.location.href.split('#')[0];   // remove hash
                     var basePath = root.substr(0,root.lastIndexOf('/')) + '/';

-                    var resolvedUrl = this._url.split('//').join('/').split('#')[0]; // remove hash
+                    var resolvedUrl =
+                            // remove protocol from the beginning of the url if present
+                            ( this._url.indexOf( window.location.protocol ) === 0 ?
+                                this._url.substring( window.location.protocol.length ) :
+                                this._url )
+                            .split('//').join('/').split('#')[0]; // remove hash

                     var wwwFolderPath = navigator.userAgent.indexOf('MSIE 9.0') > -1 ? 'app/www/' : 'www/';

@purplecabbage, it seems you were the one to add this code to XHRHelper.cs. What do you think about this modification?

@gabrielschulhof
Contributor

For reference, this is where the modification would go.

@gabrielschulhof
Contributor

There are two reasons to fix this in Cordova rather than jQuery Mobile:

  1. The necessity to remove the leading "/" from the path is a URL-scheme-specific idiosyncrasy. Such idiosyncrasies should be handled as close to the native side as possible - in this case, Cordova.

  2. The problem will occur even when jQuery Mobile is absent. If you use plain JS, you could have

    var xmlhttp = new XMLHttpRequest();
    
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            // content loaded successfully
        }
    }
    
    xmlhttp.open("GET",
    
        ///////////////////////////////////////////////////////////
        // Suppose an anchor <a id="my-link" href="external.html">
        // is present in the DOM. In that case, the href attribute
        // of this anchor returns an absolute URL.
        ///////////////////////////////////////////////////////////
        document.getElementById( "my-link" ).href,
    
        true);
    xmlhttp.send();
@gabrielschulhof gabrielschulhof self-assigned this Mar 17, 2014
@purplecabbage

looks good, I will test

@gabrielschulhof
Contributor

@purplecabbage I've tested it with WP 7.5, and there's an extra slash that is not getting stripped. The original URL is of the form x-wmapp1:///app/www/external.html, so of the three slashes two remain after the protocol is stripped off. Thus, I've changed the string manipulation to strip off any and all starting slashes, obviating the subsequent code that strips off the initial slash:

diff --git a/wp8/template/cordovalib/XHRHelper.cs b/wp8/template/cordovalib/XHRHelper.cs
index 058d317..f4fe00e 100644
--- a/wp8/template/cordovalib/XHRHelper.cs
+++ b/wp8/template/cordovalib/XHRHelper.cs
@@ -187,15 +187,18 @@ namespace WPCordovaClassLib.CordovaLib
                     var root = window.location.href.split('#')[0];   // remove hash
                     var basePath = root.substr(0,root.lastIndexOf('/')) + '/';

-                    var resolvedUrl = this._url.split('//').join('/').split('#')[0]; // remove hash
+                   //console.log( 'Stripping protocol if present and removing leading / characters' );
+                   var resolvedUrl =
+                           // remove protocol from the beginning of the url if present
+                           ( this._url.indexOf( window.location.protocol ) === 0 ?
+                               this._url.substring( window.location.protocol.length ) :
+                               this._url )
+                            // get rid of all the starting slashes
+                           .replace(/^[/]*/, '')
+                           .split('#')[0]; // remove hash

                     var wwwFolderPath = navigator.userAgent.indexOf('MSIE 9.0') > -1 ? 'app/www/' : 'www/';

-                    if(resolvedUrl.indexOf('/') == 0) {
-                        //console.log('removing leading /');
-                        resolvedUrl = resolvedUrl.substr(1);
-                    }
-
                     // handle special case where url is of form app/www but we are loaded just from /www
                     if( resolvedUrl.indexOf('app/www') == 0 ) {
                         resolvedUrl = window.location.protocol  + wwwFolderPath + resolvedUrl.substr(7);

This makes it work on both WP7.5 and WP8.

@gabrielschulhof
Contributor

I filed a bug with Cordova as well.

@gabrielschulhof
Contributor

For WP7.x: If we do not merge the fix for this issue, but Cordova does merge apache/cordova-wp8#30/, then we still need to implement the workaround described at core's #10660 around our central $.ajax() call in order for Ajax to local files to work from jQM.

@gabrielschulhof gabrielschulhof added a commit that referenced this issue Mar 20, 2014
@gabrielschulhof gabrielschulhof Navigation: Do not assume "//" is always part of an absolute URL
Note: this does indeed represent a fix for gh-6574, but only once a version of
Cordova sporting apache/cordova-wp8#30 is released.

Closes gh-6597
Fixes gh-6574
Fixes gh-6599
2ef4621
@polochon44

I had the same problem with jQM 1.4.0 and cordova 3.3.0 on a Lumia 520.

I modified this method in jquery.mobile-1.4.0.js :

 isPermittedCrossDomainRequest: function( docUrl, reqUrl ) {
    return $.mobile.allowCrossDomainPages 
            && (docUrl.protocol === "file:" || docUrl.protocol === "content:" || docUrl.protocol === "x-wmapp0:") 
            && reqUrl.search( /^https?:/ ) !== -1;
}

I added "x-wmapp0" protocol. Does that help you ?

@gabrielschulhof gabrielschulhof added a commit that referenced this issue Apr 8, 2014
@gabrielschulhof gabrielschulhof Navigation: Do not assume "//" is always part of an absolute URL
Note: this does indeed represent a fix for gh-6574, but only once a version of
Cordova sporting apache/cordova-wp8#30 is released.

Closes gh-6597
Fixes gh-6574
Fixes gh-6599
553317c
@gabrielschulhof gabrielschulhof added a commit that referenced this issue May 29, 2014
@gabrielschulhof gabrielschulhof Navigation: Do not assume "//" is always part of an absolute URL
(cherry picked from commit 9e082b0)

Closes gh-6597
Fixes gh-6574
Fixes gh-6599
ecd5be5
@ianosullivan

In short I can 100% confirm that the issue is with Phonegap Build. Using Cordova directly to build the project has worked. Phonegap Build does not allow AJAX requests!

@darrudanoo

Using 3.3.0
when deploy direct to mobile via Windows Phone Application Deployment - WORKS
when publish xap file into Windows Phone Store and download direct to mobile - NOT WORKS

@purplecabbage

I will need a concrete example to test this.
@darrudanoo Can you post code + a link to the app store version?

@darrudanoo

@purplecabbage

You can download XAP file working here:
removed

The same file published in store:removed

you can put anything to user and password

when deploy direct to mobile - "Invalid Credential" - OK, the ajax works.
when install from Store - "System Unavaiable" - ajax post error

jQuery.support.cors = true;
$.ajax({
url: "https://server/api/.../AutenticarUsuario",
type: 'GET',
data: { email: user, senha: pass, aplicacao: codAplicacao },
dataType: 'json',
success: function (data) {
if (data == null) {
$('.msgLogin').html('Invalid credentials!');
$('.msgLogin').show();
}
else {
try {
banco.SalvaLogin(data);
LoginEfetuado(data);
} catch (e) {
alerta(e.message);
}
}
$('.divLoading').hide();
},
error: function (a, e, d) {
$('.msgLogin').html('System unavailable');
$('.msgLogin').show();
$('.divLoading').hide();
debug("Response: " + a.responseText);
debug("Status: " + a.status);
debug("Message: " + e);
debug("d: " + d);
}
});

Error debug:
Response: undefined
Status: 0
Message: error
d: NetworkError

Using phonegap 3.3.0
Using Jquery 2.1.1
Using JqueryMobile 1.4.3

I spend many time instaling cordova to build with 3.5.0 and this work.

@vineethvijayan

The issue is still there any update on fix,

I have tried with

phonegap 3.5.0
Jquery 1.9.0

@gabrielschulhof
Contributor

Dang!

@gabrielschulhof
Contributor

@vineethvijayan Wait a sec. PhoneGap disallows Ajax. It should work if you use Cordova.

@ldeluca
Contributor
ldeluca commented Oct 10, 2014

@vineethvijayan Please verify whether or not you're using PhoneGap vs. Cordova per @gabrielschulhof .

@vinbhai4u

@ldeluca I have used phonegap online build(build.phonegap.com). It didn't work.

But when I locally build it works with both cordova and phonegap.

@arschmitz
Member

If this is something that only happens with phongap online build and is final local with phonegap or with cordova this is clearly a bug in phonegap online and i'm fairly sure there is nothing we can do about this @vinbhai4u @vineethvijayan I recommend you file a bug with phonegap about this.

@agcolom agcolom added a commit to agcolom/jquery-mobile that referenced this issue Nov 26, 2014
@gabrielschulhof @agcolom gabrielschulhof + agcolom Navigation: Do not assume "//" is always part of an absolute URL
Closes gh-6597
Fixes gh-6574
Fixes gh-6599
b7b6795
@JPustkuchen

I think arschmitz is right, there seems to be a problem especially on build.phonegap.com with this.
This problem still exists, as I can confirm.

@ogaro666

Eu também estou com o mesmo problema, tanto build.phonegap quanto via CLI.
Me chama atenção o fato de não funcionar os links Login

@ovidiugabriel
ovidiugabriel commented Oct 10, 2016 edited

Hello, I still have this problem on Windows Phone while using jQuery 1.7.2 and jQuery Mobile 1.4.5. It happens on Internet Explorer, Opera Mini and UC Browser also, but only on Windows Phone. The problem is not Cordova specific.

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>

The JavaScript code is:

$.ajax(url, {
        dataType: dataType,
        success: function(response) {
            console.log('ajax.success');
            alert('ajax.success');
        },
        complete: function(response) {
            var contentType = response.getResponseHeader('content-type');
            console.log('ajax.complete: contentType=', contentType);

            if ( contentType.contains('application/json') ||
                 contentType.contains('text/javascript') )
            {
                callback(JSON.parse(response.responseText));
            } else {
                callback(response.responseText);
            }
        },
        done: function() {
            console.log('ajax.done');
            alert('ajax.done');
        },
        error: function( jqXHR, textStatus, errorThrown) {
            alert('error:' + JSON.stringify(jqXHR) + ' userAgent: ' 
                + navigator.userAgent.toLowerCase());
        }
    });

The output of running this is the following:

alert('error: {"readyState": 0, "responseText":"", "status":0, "statusText":"error"} 
userAgent: mozilla/5.0 (windows nt 6.2; arm; trident/7.0; touch; rv:11.0; wpdesktop; 
lumia 630) like gecko');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment