AJAX navigation not working on Windows phone

[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]

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]

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//issues/6574#issuecomment-25884125
.

[gabrielschulhof]

@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]

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]

@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]

@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]

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]

@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.

[jaspermdegroot]

@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]

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]

@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]

@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]

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]

@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".

[gabrielschulhof]

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.

[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 ?

[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]

Dang!

[gabrielschulhof]

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

[ldeluca]

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

[vin-the-dev]

@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]

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.

[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]

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');