[SalesForce] Update controller variable from visualforce button/div onclick

I am having issues with my visualforce page refreshing everytime I perform an onclick action? Any ideas

public without sharing class LMS_CaseNewEditController {

    public Boolean recordClicked        {get;set;}

    public void recordClicked() {
        recordClicked = true;
    }
}

On my visualforce page I have a apex:function, div class over an iframe and javascript function as below.

Javascript Function

function remove(){
    console.log('click');
    var x = document.getElementById("bar1");
    recordClicked();
    return x.parentNode.removeChild(x);
    }

Apex & div

<apex:actionFunction name="recordClicked" action="{!recordClicked}"></apex:actionFunction>
<div id="box" draggable="true" align="right" style="padding-right: 10px">
    <apex:outputPanel id="ILOSbutton" rendered="{!isDisplayRecorder}" >
        <div id="iFrameWrapper" class="holder">
             <div id="bar1" class="bar" onmousedown="remove()"></div>
                  <apex:iframe id="myFrame" src="{!iframeString}" height="40px" width="140px"></apex:iframe>
                  <label class="control-label col-xs-6" style="width: 300px;text-align: right" >{!$Label.ILOS_Help_Text}</label>
            </div>
        </apex:outputPanel>
     </div>

Essentially what should happen is the value should update on the controller side without refreshing the page. Any ideas?

Best Answer

Add the rerender property to the apex:actionFunction tag. in the rerender property you want to add the ID of the tag you want to rerender. That way the page won't refresh it will just rerender the specific tag. So your apex:actionFunction should look like this:

<apex:actionFunction name="recordClicked" action="{!recordClicked}" rerender="tagID"></apex:actionFunction>
Related Topic