+ Start a Discussion
HugoNowHugoNow 

Problem passing parameter to controller from Javascript - PLEASE HELP!

Hi,

 

I have a nice problem that I am not able to figure out. The requirement is to call a JS when pressing a button. The button passes a parameter to the javascript and I want to be able to read that parameter in the controller to generate a string. Then use that generated string in the VF page. I use multiple buttons (depending on the functionality) and somehow, there is an AJAX refresh problem I can't put my finger on.

 

The problem is easily reproducable using the code here. To reproduce: press the first and second button one after the other multiple times, you will see that sometimes, the alert message does not correspond to the button. It seems like it shown the last value. But sometimes, it works. Can't figure out a pattern.

 

Please help!

 

<apex:page controller="ActionFunctionDemoController">
  <apex:form >
      <apex:outputPanel id="jspanel"> 
          <script>  
              function onControllerReturn() {
                alert('{!Msg}')
              }
          </script>
      </apex:outputPanel>
 
      <apex:actionFunction name="doControllerSend" action="{!SendParam}" rerender="jspanel" >
          <apex:param name="param" value="" />
      </apex:actionFunction>
 
      <apex:commandButton onclick="doControllerSend('Param 1');" oncomplete="onControllerReturn()" value="Send Param 1"/>
      <apex:commandButton onclick="doControllerSend('Param 2');" oncomplete="onControllerReturn()" value="Send Param 2"/>
  </apex:form>
</apex:page>

 

public class ActionFunctionDemoController{
   public ActionFunctionDemoController() {}

   public String Msg {get; set;}
   public PageReference SendParam() {
        String param = ApexPages.currentPage().getParameters().get('param');

        Msg = 'Param='+param;
        return null;
   }
}

 

PaqsPaqs

Hey HugoNow,

 

You are close but you need a slight change in approach on the controller (you want to pass in a value to the controller from javascript -> fromJS

 

and you want the update to happen in your alert after the ajax call has completed (which is why you are seeing sometimes the right value depending on how fast the response came from the call....) 

 

So here is the code you need for your page:

 

<apex:page controller="ActionFunctionDemoController">
<script>
function sendToController(param) {
doControllerSend(param);
}
</script>
<apex:form >
<apex:outputPanel id="jspanel">
<script>
alert('{!Msg}');
</script>
</apex:outputPanel>

<apex:actionFunction name="doControllerSend" action="{!SendParam}" rerender="jspanel" >
<apex:param name="x" value="x" assignTo="{!fromJS}" />
</apex:actionFunction>

<apex:commandButton oncomplete="sendToController('Param 1');" value="Send Param 1"/>
<apex:commandButton oncomplete="sendToController('Param 2');" value="Send Param 2"/>
</apex:form>
</apex:page>

 

And the controller:

 

public class ActionFunctionDemoController{
public String Msg {get; set;}
public String fromJS { get; set; }

public ActionFunctionDemoController() {
}

public PageReference SendParam() {
Msg = 'Param='+fromJS;
return null;
}
}

 

This way, you pass your parameter value from the button click -> javascript function -> actionFunction -> Parameter -> controller.fromJS

And the button click only calls the update of your jspanel after your command button action has completed (oncomplete)

 

Cheers

HugoNowHugoNow
Hurray! You are great! I am only a beginner in Javacript/AJAX but it still does't make sense to me why my solution did not work. I thought that the oncomplete of the command button was executing AFTER the AJAX roundtrip to the server finished executed. Isn't your solution doing two round trips to the server. Once when button is clicked and another when sendToController - doControllerSend is called? Thanks!