locked
AJAX navigation not working on Windows phone

    Question

  • 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

    Thursday, October 24, 2013 9:06 AM

Answers

  • Hi Santhosh,

    I cannot answer any questions about Phonegap. It isn't a Microsoft product and I am not familiar with its details or limitations. Sorry.

    --Rob

    Friday, October 25, 2013 10:41 PM
    Moderator

All replies

  • Hi Santhosh,

    Are you writing a Windows Phone or a Windows Store app? You said phone in the subject, but posted in the Windows Store app forums.

    It would help if you could provide a minimal code snippet demonstrating the problem and a comparison between the expected and actual results. If your question is PhoneGap specific you'll probably get more traction on PhoneGap forums.

    --Rob

    Thursday, October 24, 2013 2:52 PM
    Moderator
  • Hello Rob,

    Thanks for the reply and I am writing for Windows Store app, sorry for mentioning wrong note in the subject.

    Can you please let us know whether is there any issue in using Ajax Transitions in Windows mobile phone in cross platform development when using Phonegap (Cordova).

    Please find the below HTML files and Javascript file that has been used for testing and the navigation doesn't works in the Windows phone 7/8. It shows "Error loading Page" when clicked on "Click" link from Page1.html and it will not navigate to Page2.html. 

    Please have a look and let me know if you have any questions. 

    /* Page1.html */

    <!DOCTYPE html>
    <html lang="en" >
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="jquery-ui.css" />
    <link rel="stylesheet" href="jquery.mobile-1.3.1.css" />
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="jquery-ui.min.js"></script>
    <script type="text/javascript" src="Javascript_TEST.js"></script>
    <script type="text/javascript" src="jquery.mobile-1.3.1.min.js"></script>
    <script type="text/javascript" src="cordova.js" ></script>
    </head>
    <body >
    <div data-role="page">
    <div data-role="header" data-position="fixed">
    <h1>Page1</h1>
    </div><!-- /header -->
    <div data-role="content">
    <div>
    <a href="Page2.html">Click</a>
                        </div>
    </div><!-- /content -->
    </div><!--PAGE-->
    </body>
    </html>

    /*Page2.html */

    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="jquery-ui.css" />
    <link rel="stylesheet" href="jquery.mobile-1.3.1.css" />
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="jquery-ui.min.js"></script>
    <script type="text/javascript" src="Javascript_TEST.js"></script>
    <script type="text/javascript" src="jquery.mobile-1.3.1.min.js"></script>
    <script type="text/javascript" src="cordova.js" ></script>
    </head>
    <body >
    <div data-role="page" >
    <div data-role="header">
    <h1>Page2</h1>
    </div><!-- /header -->
    <div class="container">
    <label id="Welcome">Hello Welcome to Page 2</label> 
    <a href="Page1.html" data-inline="true">Back</a>     
    </div><!-- /content -->
    </div><!--PAGE-->
    </body>
    </html>

    /* Javascript_TEST.js */

    $(document).bind("mobileinit", function () {
        $.mobile.defaultPageTransition = "slide";
    $.mobile.transitionFallbacks.slide = "none";
    jQuery.support.cors = true;
    $.support.cors = true;
    //$.mobile.ajaxEnabled = false; /*Navigation works only if default ajax to be false    */
        $.mobile.phonegapNavigationEnabled = true
        $.mobile.allowCrossDomainPages = true;
    });

    Thanks,

    Santhosh

    Friday, October 25, 2013 8:25 AM
  • Hi Santhosh,

    I cannot answer any questions about Phonegap. It isn't a Microsoft product and I am not familiar with its details or limitations. Sorry.

    --Rob

    Friday, October 25, 2013 10:41 PM
    Moderator
  • No problem.  Thank you Rob.  

    Regards,

    Santhosh

    Monday, October 28, 2013 5:35 AM