function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

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

Adding action on html5 button tag in Visualforce

I am trying to use HTML5 & bootstrap from CDN on a VF page, with standaStyling set to false. I want to bind apex action on button tag.
VF Code 
<apex:page controller="OutcomeClass" sidebar="false" showheader="false" doctype="html-5.0" standardStylesheets="false">
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style>
      body{font-family:Consolas,Arial,sans;}
  </style>
  <apex:pageBlock >
      <apex:form>
          Your Name: {!$User.FirstName}<br/><br/>
          
          <button type="button" class="btn btn-success">Click</button>
          <!--    i want to add action="{!updateOutcomes}"   in the button tag    -->
      </apex:form>
  </apex:pageBlock>
</apex:page>

Apex Code 
public class OutcomeClass{
    public OutcomeClass(){
        //do something here
    }
    public void updateOutcomes(){
        // do something else here
    }
}

 
Swayam@SalesforceGuySwayam@SalesforceGuy
Hi,

You can utilise Apex:action to call method of APEX .  Please see here  https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_actionFunction.htm

VF code : 
<apex:page controller="OutcomeClass" sidebar="false" showheader="false" doctype="html-5.0" standardStylesheets="false">
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style>
      body{font-family:Consolas,Arial,sans;}
  </style>
  <apex:pageBlock >
      <apex:form>
          Your Name: {!$User.FirstName}<br/><br/>
          <apex:actionfunction name="callUpdateOutComeJS" action="{!updateOutcomes }"  />
          <button type="button" class="btn btn-success"   onClick="callUpdateOutComeJS();" >Click</button>

          <!--    i want to add action="{!updateOutcomes}"   in the button tag    -->
      </apex:form>
  </apex:pageBlock>
</apex:page>

Please let me know, in case of any doubt.

Hope this helps,

--
Thanks,
Swayam
mrizmriz
@swayam,
i appreciate your help, but i forgot to mention in question detail that i would prefer a way to include it in the button tag itself.
because i believe these visualforce tags are anyway translated into equivalent html code for browsers.
So, there must be a way that i can bind any apex variable/action to html5 tags..