[SalesForce] How to pass javascript variable value in apex controller

When i click on the image it's show javascript alert in alert i got the id and open popup which is fine but after that when i call apex controller method using actionfunction i got string value null in debug log and no value shown on my popup.

 public class DataFromJsController{
   public String embstr{get;set;}
   public DataFromJsController(){

  }

  public void embFile(){
   System.debug('embstr-->'+embstr);

 }

<apex:page controller="DataFromJsController">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  

<head>
    <apex:stylesheet value="{!URLFOR($Resource.SLDS0}" />

   <script>
        function embded(recordId){
           alert(recordId);
           $('.popupEmb').css('display','block');
           **embFile(recordId);**
       }

       function hidePopUp(){
           $('.popupEmb').css('display','none');
       }
     </script>
       <apex:form id="frm">
         <div class="slds">
       <apex:actionFunction name="embFile" action="{!embFile}">
           <apex:param assignTo="{!embstr}" name="prm" value=""/>
       </apex:actionFunction>

        <apex:repeat value="{!NameMapForAcc}" var="r">
        <tr>

      <td>
         <apex:commandLink onClick="embded('{!r}'); return false;">
             <apex:image value="{!$Resource.eLogo}" width="20" height="3"/> 
        </apex:commandLink>
        </td>
      </tr>
 </apex:repeat> 

  <div class="popupEmb" style="display:none">
           <div class="slds-modal slds-fade-in-open" aria-hidden="false" role="dialog">
                 <div class="slds-modal__container">
                    <div class="slds-modal__header">
                     <h2 class="slds-text-heading--medium">Embed item</h2>
                   </div>
             <div class="slds-modal__content slds-p-around--medium" style="position:relative;">
                  <div class="slds-modal__content slds-p-around--medium">
                  <apex:outputPanel layout="block" id="newModelContentemb" style="overflow:auto;height:30vh">

                     <fieldset class="slds-form--compound">
                          <legend class="slds-form-element__label"></legend>
                          <div class="form-element__group">
                            <div class="slds-form-element__row">
                              <div class="slds-form-element slds-size--1-of-2">
                                  <label class="slds-form-element__label">Embed Item</label>
                                     <br/>
                                     <input type="Text" styleClass="slds-input" style="margin: 0px; width: 549px; height: 32px;"  value="Only the owner and explicitly shared collaborators have access" disabled="true"/>

                                       <br/><br/>
                                       Paste HTML to embed in website:<br/>
                                        <Textarea readonly="true" cols="75" rows="5" id="textareaEmb" styleClass="slds-box"  style="margin: 0px; width: 550px; height: 70px;">
&lt;iframe src="https://drive.google.com/file/d/"+{!embstr}+"/preview""  
 width="640" height="480"&gt; &lt;/iframe&gt;   {!embstr}
                                     </Textarea>
                              </div>
                            </div>
                          </div>
                        </fieldset>

                   </apex:outputPanel>
                </div>
                </div>
                <div class="slds-modal__footer">
                  <button class="slds-button slds-button--neutral slds-button--brand"  onclick="hidePopUp(); return false;">Ok</button>



                </div>
              </div>
            </div>
            <div class="slds-backdrop slds-backdrop--open"></div>
          </div>
          </apex:pageBlock>   

</apex:form>
  </div>
</html>

Best Answer

I think, you are missing rerender attribute for actionFunction and because of this, value is not getting passed.

<apex:actionFunction name="embFile" action="{!embFile}" rerender="frm">
    <apex:param assignTo="{!embstr}" name="prm" value=""/>
 </apex:actionFunction>

Related Solutions

[SalesForce] Pass a string variable from controller into the Javascript function

You can change up some of your visualforce and javascript slightly to achieve this.

First lets change up the JS a tiny bit so it directly references the checkIn apex method and is wrapped in an element you can rerender.

<apex:outputPanel id="scriptContainer">
    <script>
        //on dom ready code is fine
        function backToDetail() {
            alert('{!checkIn}');
        }            
    </script>
</apex:outputPanel>

Now just change up the actionFunction definition so it doesnt call checkIn and instead it rerenders the script tag containing the backToDetail method. The purpose of doing this is that when it is doing the rerender it will replace alert('{!checkIn}') with alert('Yes') or alert('No').

<apex:actionFunction name="checkIn" oncomplete="backToDetail();" rerender="scriptContainer" />

[SalesForce] How to pass javascript value to controller..

There are multiple solutions for this question.

1. Use of hidden field

You can define an apex variable and associate it in a hidden input field on the visualforce page. Then set a javascript variable to this field an reference it in controller:

Apex class:

public class myClass {
    // Our test variable        
    public String myString {get; set;}

    public myClass(){
        myString = '';
    }

    // Method for testing a hidden field functionality 
    public PageReference myMethod(){
        System.debug('myString: ' + myString);
        return null;
    }
}

Visualforce page:

<script>
function setVar(param){
    jQuery('[id$=myHiddenField]').val(param);
    passStringToController();
}
</script>

<!-- Hidden field to store a new value of the variable -->
<apex:inputHidden value="{!myString}" id="myHiddenField"/>

<!-- Action function for the rerendering -->
<apex:actionFunction name="passStringToController" action="{!myMethod}" rerender="myHiddenField"/>

<!-- A command button for sending a call to the function -->
<apex:commandButton value="Test me" onclick="setVar('new value'); return false;" />

2. Use of apex:param

<script>
// We don't need any javascript function anymore
// because we will access an actionFunction directly
</script>

<!-- A new value will be set to the apex:param -->
<apex:actionFunction name="passStringToController" action="{!myMethod}" rerender="myHiddenField">
    <apex:param name="p1" value="" assignTo="{!myString}" />
</apex:actionFunction>

<!-- Here we can directly access the action function per name and assign a variable value -->
<apex:commandButton value="Test me" onclick="passStringToController('new value'); return false;" />

Best Answer

Related Solutions

[SalesForce] Pass a string variable from controller into the Javascript function

[SalesForce] How to pass javascript value to controller..

Related Topic