function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
TuxTux 

Passing a parameter to an Apex Function, from javascript

I want to call a method from within JS (jQuery to be more specific). This method needs a String parameter and I cant seem to be able to pass this parameter. Here is the relevant bits of code.

 

The line in bold is how I am calling the apex method. VF code: 

 

<apex:page controller="DynaTreeHierarchyController" >
<apex:includeScript value="{!URLFOR($Resource.dynatree, '/jquery/jquery.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.dynatree, '/jquery/jquery-ui.custom.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.dynatree, '/jquery/jquery.cookie.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.dynatree, '/src/jquery.dynatree.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.dynatree, '/src/skin/ui.dynatree.css')}"/>

<script type="text/javascript">

$(function(){
    var dataurl;
    var space = ' ';
    // Variant 1:
    /*$("span.dynatree-edit-icon").live("click", function(e){
        //alert("Edit " + $.ui.dynatree.getNode(e.target));
    });*/
    $("#tree").dynatree({
        onActivate: function(node) {
            $("#info").text("You activated " + node.data.id);
        },
        onRender: function(node, nodeSpan) {
            $(nodeSpan).find('.dynatree-icon')
               .before('<span class="dynatree-icon dynatree-edit-icon"></span>');
        },
        //Variant 2:
        onClick: function(node, f){
            if($(f.target).hasClass("dynatree-edit-icon")){
                $("#info").text("You clicked " + node + ",  url=" + node.data.id);
            }
        },
      children: [
            {title: "Item 1", isFolder: true, id: "http://Item1.com"},
            {title: "Folder 2", isFolder: true, id: "http://Item2.com", 
            children: [
                {title: "Sub-item 2.1", id: "http://sub-item21.com"},
                {title: "Sub-item 2.2", id: "http://sub-item22.com"}
            ]
        },
            {title: "Item 3", id: "http://Item3.com"}
      ],
      dnd: {          
      onDragStart: function(node) {
        $("#info").text("tree.onDragStart " + node.data.id);
        return true;
      },
      onDragStop: function(node) {
        // This function is optional.
        $("#info").text("tree.onDragStop " + node.data.id);
      },
      autoExpandMS: 1000,
      preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
      onDragEnter: function(node, sourceNode) {
        $("#info").text("tree.onDragEnter " + node.data.id);
        return true;        
      },
      onDragOver: function(node, sourceNode, hitMode) {
        $("#info").text("tree.onDragOver " + node + space + sourceNode + space + hitMode);
        // Prevent dropping a parent below its own child
        if(node.isDescendantOf(sourceNode)){
          return false;
        }
        // Prohibit creating childs in non-folders (only sorting allowed)
        //        if( !node.isFolder && hitMode == "over" )
        //          return "after";
      },
      onDrop: function(node, sourceNode, hitMode, ui, draggable) {
        /** This function MUST be defined to enable dropping of items on
         * the tree.
         */
        $("#info").text("tree.onDrop " + node.data.id + space+ sourceNode + space + hitMode);
        sourceNode.move(node, hitMode);
        myFunc('test this method');
        dataurl = node.data.id;
        // expand the drop target
        //sourceNode.expand(true);
      },
      onDragLeave: function(node, sourceNode) {
        /** Always called if onDragEnter was called.
         */
        $("#info").text("tree.onDragLeave " + node + sourceNode);
      }
    }
    })
});

</script>
<style>

</style>
<div id="tree"></div>
<div id="info"></div>

<!-- 
END JAVASCRIPT, BEGIN APEX CODE
-->
    <apex:form >
        <apex:messages />
        <apex:actionFunction name="myFunc" action="{!IWantToDebug}">
            <apex:param name="param1" value=""/>
        </apex:actionFunction>
    </apex:form>
</apex:page>

 

The controller code:

public with sharing class DynaTreeHierarchyController {

    public void IWantToDebug() {
        String para = ApexPages.CurrentPage().getParameters().get('param1');
        ApexPages.addmessage(new ApexPages.message(ApexPages.severity.WARNING, 'Msg ' + para));
        System.debug('Called from JS without para ' + para);
    }
}

 

What am doing incorrectly?

 

Best Answer chosen by Admin (Salesforce Developers) 
Chamil MadusankaChamil Madusanka

Refer following link

http://www.salesforceworld.blogspot.com/2011/06/parameter-passing-using.html

 

If a reply to a post answers your question or resolves your problem, please mark it as the solution to the post so that others may benefit.

All Answers

Chamil MadusankaChamil Madusanka

Refer following link

http://www.salesforceworld.blogspot.com/2011/06/parameter-passing-using.html

 

If a reply to a post answers your question or resolves your problem, please mark it as the solution to the post so that others may benefit.

This was selected as the best answer
TuxTux

Thanks for the link, It took some time to wrap my head around the concept. Just in case for anyone who comes searching later, this is how I did it.

 

<apex:page controller="DynaTreeHierarchyController" >
<apex:includeScript value="{!URLFOR($Resource.dynatree, '/jquery/jquery.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.dynatree, '/jquery/jquery-ui.custom.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.dynatree, '/jquery/jquery.cookie.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.dynatree, '/src/jquery.dynatree.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.dynatree, '/src/skin/ui.dynatree.css')}"/>

<script type="text/javascript">

function doSave(node){
    paraFunction('foo', 'bar', 'baz');
}  

$(function(){
    var dataurl;
    var space = ' ';

//Other parts as prev, only a function call to doSave()

</script>
    
    <apex:form >
        <apex:messages />
        <apex:actionFunction name="paraFunction" action="{!IWantToDebug}" rerender="view">       
             <apex:param id="anode" name="node" value="" />
             <apex:param id="anode1" name="node1" value="" />
             <apex:param id="anode2" name="node2" value="" />
        </apex:actionFunction>  
    </apex:form>
</apex:page>

 

 

This is the controller, where I accessed the parameters.

 

public with sharing class DynaTreeHierarchyController {

    public void IWantToDebug() {
        String para = Apexpages.currentPage().getParameters().get('node');
        String para1 = Apexpages.currentPage().getParameters().get('node1'); 
        String para2 = Apexpages.currentPage().getParameters().get('node2'); 
        System.debug('======================= ' + para);
        System.debug('======================= ' + para1);
        System.debug('======================= ' + para2);
    }
}

Thanks. 

JitendraJitendra

Hi Tux,

You can check below tutorial also, it has provided the two methods to pass the parameter to Apex code.

http://shivasoft.in/blog/salesforce/passing-parameter-in-actionfunction-in-visualforce/