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
sampath kumar 3sampath kumar 3 

How to call apex function on div tag in Visualforce page

In my visualforce having StandardController ="Contact" and created a custom button using html <div> tag now  I would like to save the details by clicking this custom button using StandardAction save .How to call the standard action on Html tag . 
 FYI:
<apex:page  standardController="Contact">
    <style>
    #header {
        /*line-height:30px; text-transform: uppercase;*/
    background-color:#fff000;
    height:20px;
    width:50px;
    float:left;
    padding:5px; 
     color: red;
    font-family: "Times New Roman", Times, serif;    
     text-align: center;   
    border-radius: 15px;   
}
        #header:hover{
        cursor:pointer; 
        background-color:#ff9933;
        opacity:0.5;
        }
     </style> 
    <apex:form id="fm">
        <apex:pageBlock>
            <apex:pageBlockButtons>
               <div id="header">
                   save
                   <apex:actionSupport event="onclick" action="{!save}" rerender="fm"/>
                </div>
               
      </apex:pageBlockButtons>      
            <apex:pageBlockSection>
                <apex:inlineEditSupport>
                    <apex:outputField value="{!Contact.lastName}"/>
                    <apex:outputField value="{!Contact.firstName}"/>
                </apex:inlineEditSupport>
            </apex:pageBlockSection>
        </apex:pageBlock
    </apex:form>
</apex:page>
Best Answer chosen by sampath kumar 3
Antonio ManenteAntonio Manente
Well, one suggestion I have is to have your apex:actionFunction there and put the onclick attribute directly on the div
  
<div id='header' onclick='controllerAction();'>
  // content
</div>
<apex:actionFunction name='controllerAction' action='{! save }' reRender='fm'/>
You call an actionfunction by the value in the 'name' attribute. This should be working. If it doesn't, check for Javascript errors or something similar. 
 

All Answers

sampath kumar 3sampath kumar 3
Can any one help me to resolve this issue
Antonio ManenteAntonio Manente
you could use Javascript to do it. e.g.
  
<script>
document.getElementById('header').addEventListener('click', callAction);

function callAction(){
  controllerAction();
}

</script>


//then modify your actionsupport component to be an actionfunction

<apex:actionFunction name='controllerAction' action="{! save }" reRender='fm'/>

This should work. Hope this helps!
sampath kumar 3sampath kumar 3
Hi Antonio Manente , I tried the scenario as you suggested but it doesn't work . Dont know the reason  please let me know what i missed here
Antonio ManenteAntonio Manente
Well, one suggestion I have is to have your apex:actionFunction there and put the onclick attribute directly on the div
  
<div id='header' onclick='controllerAction();'>
  // content
</div>
<apex:actionFunction name='controllerAction' action='{! save }' reRender='fm'/>
You call an actionfunction by the value in the 'name' attribute. This should be working. If it doesn't, check for Javascript errors or something similar. 
 
This was selected as the best answer
sampath kumar 3sampath kumar 3
Thanks alot Antonio ,Its working fien  the mistake is earlier  click event is calling through script as 

<script> document.getElementById('header').addEventListener('click', callAction); function callAction(){ controllerAction(); } </script>

but not in the tag level <div id='header' onclick='controllerAction();'/> , I havent touch the script code and keept it as it is and added the click function in div tag its working . Thank you so much Antonio
olaitan adesojiolaitan adesoji
Thanks for the help.. Meanwhile what if the function call requires that we pass in arguments or variables.. How do we call that function from inside of the visualforce page and pass in the variables?