3

Could use your help:

I'm trying to use JQuery Mobile within Salesforce. I've run into a problem where CommandButtons don't work. I've put together a basic example of this below. If you simply remove the jquery.mobile-1.3.2.min.js reference, it starts working properly again.

Has anyone resolved this issue, can anyone provide me an alternate solution for changing pages? Any recent JQuery library version has the same results.

FYI: Also I tried CommandLink, it also has issues where the first time you click it just refreshes the page.

CustomPage1:

<apex:page standardStylesheets="false" showHeader="false" sidebar="false" controller="CustomController1">
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<apex:stylesheet value="{!URLFOR($Resource.styles, 'bootstrap.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.styles, 'jquery.mobile-1.3.2.min.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.styles, 'jquery-1.9.1.min.js')}" />
<apex:includeScript value="{!URLFOR($Resource.styles, 'jquery.mobile-1.3.2.min.js')}" />     
</head>
<body>
    <apex:form>
        <apex:commandButton styleClass="btn btn-success" action="{!next}" value="Next"/>
    </apex:form>
</body>
</html>

CustomPage2:

<apex:page standardStylesheets="false" showHeader="false" sidebar="false" controller="CustomController1">
<html><head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<apex:stylesheet value="{!URLFOR($Resource.styles, 'bootstrap.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.styles, 'jquery.mobile-1.3.2.min.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.styles, 'jquery-1.9.1.min.js')}" />
<apex:includeScript value="{!URLFOR($Resource.styles, 'jquery.mobile-1.3.2.min.js')}" />     
</head>
<body>
...
    <apex:form>
        <apex:commandButton styleClass="btn btn-success" action="{!previous}" value="Previous"/>
    </apex:form>
</body>
</html>

CONTROLLER:

public class CustomController1 
{
    public PageReference next()
    {
        return Page.CustomPage2;
    }

    public PageReference previous()
    {
        return Page.CustomPage1;
    }
}

Thanks for your help with this.

3
  • 1
    I've not tried this, but many people report that jQM and the native VF postback don't play nicely together. bob_buzzard talked about this in one of his Dreamforce sessions. You might have more luck ditching the VF page navigation altogether and treating your page more like a Single-Page App with JS remoting Apex calls.
    – pchittum
    Dec 8, 2013 at 0:21
  • Did you try with : new Pagereference('/apex/CustomPage1').setRedirect(true);
    – brovasi
    Dec 8, 2013 at 23:50
  • I did try using the setRedirect but that didn't appear to work. I was hoping to not have to use all web services calls to accomplish this as it doubles the amount of work I've already done. That seems like a rather large flaw as jQM is a pretty widely used framework. Thanks for your responses guys, I appreciate it.
    – abeauchamp
    Dec 10, 2013 at 0:50

3 Answers 3

1

You can use like this instead of command button

1. For next navigation.
      <apex:form>
          <a href="#" onclick="navigate();" data-role="button" data-ajax="false" data-theme="c" >Next</a>
           <apex:actionFunction name="navigate" action="{!next}" />
     </apex:form>

2. For previous navigation.
      <apex:form>
          <a href="#" onclick="navigateBack();" data-role="button" data-ajax="false" data-theme="c" >Prev</a>
           <apex:actionFunction name="navigateBack" action="{!prev}" />
     </apex:form>

Hope this workaround will be helpful.

0

Put your apex:commandlink immediately under div tag. something like:

 <div data-role="footer"> 
  <apex:commandlink action="{!previous}" styleClass="ui-btn-right" value="Previous"/> 
 </div> 
0

Bob has written a blog post regarding this http://bobbuzzard.blogspot.in/2012/04/mobile-apps-with-visualforce-and-jquery.html

You need to use an apex function call and use the standard a href tag and call the apex:function method name in the onclick event of a href.

<apex:form id="jsfrm">
<apex:actionFunction action="{!save}" name="save"/>
      .....
  <a href="#" data-role="button" data-inline="true" 
            onclick="$.mobile.showPageLoadingMsg(); save()">Save</a>
      .....
 </apex:form>

You must log in to answer this question.

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