Windows 8 Phone Swipe Event

Rebecca_P_ · ‎02-27-2015

I built an app, which is working on Android and iOS. However, the Windows 8 Phone version of the app hangs whenever it tries to load a page with a script tag containing a swipe event handler before the closing body tag </body>.

For example, the following page will not load on a Windows 8 Phone. If I remove the script tag before the closing body tag, the page loads. So I am sure that it is related to this code. I attempted to move the swipe event handler into the js/functions.js file that is included in the <head>. Then the page loads, but the swipe event does not work.

Can anyone tell me how to get this page to load with the swipe event working on Windows 8 Phone? (Preferably in a manner that will not break the Android and iOS functionality.)

Code for one of the pages that will not load properly. NOTE: This is NOT the main page of my app.

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My App</title>

    <link href="css/jquerym.css" type="text/css" rel="stylesheet"/>
    <link href="css/font.css" type="text/css" rel="stylesheet"/>
    <link href="css/style.css" type="text/css" rel="stylesheet"/>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquerym.js" type="text/javascript"></script>
    <script src="js/functions.js" type="text/javascript"></script>
  </head>
   
  <body>
    <section data-role="page" id="page1">
        <section class="wrapinfopage section-swipe">
            <article class="sectionInfo ui-shadow sectionIssues">
                <p>My text is here.</p>
            </article>
        </section>
        <script>
            $(function() {
                //Enable swiping...
                $(".section-swipe").swipe( {
                    //Left swipe handler
                    swipeLeft:function(event, direction, distance, duration, fingerCount, fingerData) {
                        $( ":mobile-pagecontainer" ).pagecontainer( "change", "page2.html", { role: "page", transition: "slide" } );
                    },
                    triggerOnTouchEnd:false,
                    excludedElements : "button, input, select, textarea, .noSwipe"
                });
            });
        </script>                   
    </section>
  </body>
</html>

Thanks!

Swati_S_Intel1 · ‎02-27-2015

Generally it is a good practice to write javascript code in .js file. You have not put type="text/javascript" in the script tag, I'm not sure but Windows 8 phone web run time might be sensitive about it and that might be the reason for not loading the page.

As for the swipe event, WP8 does support swipe event, I don't have a WP8 to test on. Please try this jQuery Mobile demo on your phone and see if it works and let me know. http://demos.jquerymobile.com/1.3.0/docs/examples/swipe/swipe-page.html

Thanks,

Swati

Rebecca_P_ · ‎02-27-2015

Swati,

Thanks for the reply. I tested the link you provided on the WP8 phone and the swipe did work.

I have already tried moving the javascript to an external js file and using type="text/javascript" in the script tag to include that external file. I moved my test to the main page of the app to see if I could get it working there. I added some alerts in the javascript file and some click event handlers that were working. So I know the javascript page loads and some of the event handlers work. However, the swipe event handler still does not work.

Any other ideas?

Thanks in advance!

Becky

Swati_S_Intel1 · ‎02-27-2015

Hi Becky,

Can you try using the jQuery Mobile demo source code (only that) in your app and build for WP8 and see if the built app works on your phone? Next week I'll see if I can get hold of WP8 and try to reproduce this.

Thanks,

Swati

Rebecca_P_ · ‎03-02-2015

Swati,

I downloaded the demo code from github, but I could not get the downloaded files to render properly in my browser, so I did not build an WP8 app. The swipe-page.js file is being loaded, but the pageinit event handler never gets called. I am not sure if I am missing something to run the demo. If you have any suggestions, I would appreciate it.

Thanks,

Becky