+ Start a Discussion
TehNrdTehNrd 

How can I call a controller method with JavaScript in a VF page

There are acutally two parts to this question.

The first is that I have command button that should call a javascript function. This javascript function would then call a method in the controller that returns a boolean.

Code:
Part 1:

Here is my button and the JS function, I think my syntax is messed up as I am not getting a popup alert when clicking the button:
<apex:commandButton onclick="submit()" value="Overwrite Reseller Data & Abandon Opportunity" styleClass="btn"/>

<script language="JavaScript">

function submit(){
    alert('test');
}

</script>

Part 2:
In the JS function I need to call a method in the controller that returns a boolean value that indicates if the action was successful.

function submit(){
boolean result = {!submit};
}

But this tells me a getter method is not defined. In the controller I have this:

public
boolean submit() {
boolean result = true;
do some stuff
return result;
}


Before someone says use the action attribute of the command button here is how everything ties together. This page is actually being called from a formula field hyper link as we can place this anywhere on a page layout, unlike custom links (feature request). So when using a formula field link the window is a popup that displays the VF page. In this page the user will hit submit and this will execute the logic. The reason I need to call this from javascript is that I need to add some nice JS functions. If the logic in the controller method is a success I need to close the popup window (window.close) but if it fails I need to keep it open so that the error message can be displayed.

Thanks for the help!


Message Edited by TehNrd on 04-15-2008 02:53 PM
Ron HessRon Hess
i think you want the actionFunction component

with this you can call a conroller from JavaScript


Code:
<!-- Page: -->
<apex:page controller="exampleCon">
    <apex:form>
        <!-- Define the JavaScript function sayHello-->
        <apex:actionFunction name="sayHello" action="{!sayHello}" 
              rerender="out" status="myStatus"/>
    </apex:form>
    <apex:outputPanel id="out">
        <apex:outputText value="Hello "/>
        <apex:actionStatus startText="requesting..." id="myStatus">
            <apex:facet name="stop">{!username}</apex:facet>
        </apex:actionStatus>
    </apex:outputPanel>
    
    <!-- Call the sayHello JavaScript function using a script element-->
    <script>window.setTimeout(sayHello,2000)</script>
    
    <p>
         <apex:outputText value="Clicked— {!state}" id="showstate" />
    </p>
        
    <!-- Add the onclick event listener to a panel.
           When clicked, the panel triggers
           the methodOneInJavascript actionFunction with a param -->
     <apex:outputPanel onclick="methodOneInJavascript('Yes!')" styleClass="btn"> 
          Click Me 
     </apex:outputPanel>
     <apex:form>
           <apex:actionFunction action="{!methodOne}" name=" 
                 methodOneInJavascript"rerender="showstate" >
                    <apex:param name="firstParam" assignTo="{!state}" value="" />
           </apex:actionFunction>
     </apex:form>
</apex:page>

/*** Controller ***/
public class exampleCon {


String uname;

public String getUsername() {
  return uname;
}

public PageReference sayHello() {
  uname = UserInfo.getName();
  return null;
}

public void setState(String n) {
  state = n;
}

public String getState() {
  return state;
}

public PageReference methodOne() {
  return null;
}

private String state = 'no';
}


 

Dream_weaverDream_weaver

in controller u should use getsubmit() method..