Q:

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>

A:

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>

