2

I tried swipe from jquerymobile in HTML and Javascript, it is working fine. As below

<html>

    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

        <script>
            $(document).ready(function(){
                $("#home").swipeleft(function(){
                    $.mobile.changePage("#page1");
                });
            });
        </script>

    </head>

    <body>
<div data-role="page" id="home"> 
    <div data-role="content">
        <p>
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li id="listitem">Swipe Right to view Page 1</li>
            </ul>
        </p>
    </div>
</div>

<div data-role="page" id="page1"> 
    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c">
            <li data-role="list-divider">Navigation</li> 
            <li><a href="#home">Back to the Home Page</a></li>
        </ul>

        <p>
            Yeah!<br />You Swiped Right to view Page 1
        </p>
    </div>
</div>

    </body>

</html>

But I tried the same thing in VisualForce, it does not work. As below: 

<apex:page docType="html-5.0" standardStylesheets="false" showHeader="false" cache="true" controller="InstallerController">

    <html>

        <head>
                <link rel="stylesheet" href="{!$Resource.jqueryMobileCSS}" />
        <apex:includeScript value="{!$Resource.jqueryJS}"/>
        <apex:includeScript value="{!$Resource.jqueryMobileJS}"/>
        <apex:includeScript value="{!$Resource.installer}"/>                       
        <script>
            $(document).ready(function(){
                $("#mainpage").swipeleft(function(){
                    $.mobile.changePage("#page1");
                });
            });
        </script>



            <meta http-equiv="Content-Type" context="text/html;charset=UTF-8"/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no; "/>


        </head>

        <body>
            <div data-role="page" data-theme="b" id="mainpage" >
                <div data-role="header">
                    <a href="#mainpage" id="home" class="ui-btn-left" data-icon="home">Home</a>
                    <h1>Activities</h1>
                    <a href="#" id="delete" class="ui-btn-right" data-icon="delete"></a>
                    <!--<a href="#" id="back" class="ui-btn-right" data-icon="back"></a>-->
                </div>

                <div data-role="content">
                    <ul id="activitylist" data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
                    </ul>
                </div>
            </div>

            <div data-role="page" data-theme="b" id="page1" >
                <div data-role="header">
                    <a href="#mainpage" id="home" class="ui-btn-left" data-icon="home">Home</a>
                    <h1>Customer Profile</h1>
                </div>
                <div data-role="content">
                    <h1>new page</h1>
                </div>
            </div>
        </body>
    </html>


</apex:page>

I used same version of CSS,JS. It just does not work. I do not know if it is VisualForce's problem or my code's problem?

Improve this question

3 Answers 3

Reset to default
1

I would try using jQuery's noConflict() method, collisions with the $ often cause issues:

var jq = jQuery.noConflict();
jq(document).ready(function(){
  jq("#mainpage").swipeleft(function(){
    jq.mobile.changePage("#page1");
  });
});

Other than that, check the javascript console for any errors and also ensure that all the resources are being loaded correctly (try the net tab in Chrome debugger / Firebug).

Improve this answer
1
  • yes, you are correct,I missed this line
    – Jie
    Commented Apr 5, 2013 at 20:31
0

There are a few things that might be wrong here. You should start by opening the browser JavaScript console (Command - Option - J (Mac) or Control -Shift -J (Windows/Linux)) after the page has loaded and troubleshooting from there. If you're still stuck then post the error here.

If I were to hazard a guess I'd say that your static resources are archived bundles of files (.zip or .tar.gz). Is that correct? If so you need to read this article (search for "zip") to learn how to reference the files in archive.

Improve this answer
2
  • thanks for reply. I know these two things. For static resource, I tried both. In archive or in single file. I know my import static files work because the css styles are showing on the page. Only the swipe function does not work.
    – Jie
    Commented Mar 5, 2013 at 22:29
  • And you've got no JS errors? Is the HTML that's being generated from the VF as expected?
    – Wes Nolte
    Commented Mar 6, 2013 at 13:46
0

Jie, I use swipe successfully on a JQM page in VF.

Generally, the JQM guides recommend not binding to the ready event. Try one of the page* events like pageshow or pageload on your mainpage

Best of luck.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .