Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
treecloudtreecloud 

JQuery Mobile CommandButton Issue

Hello,

 

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.

Gaurav KheterpalGaurav Kheterpal

@treecloud - Is your issue resolved?
ZedroidZedroid
Hello treecloud,

You can use actionfunction 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 will help you.
Regards,
Zedroid.