apex:actionFunction doesn't pass apex:param to controller

Question

Sum up:

I need to create a page that list Accounts with a field name Level (NIVEL__c) with 3 options (level1, level2 and level3). The lists let you use drag and drop that can change the account to another level dragging the account name to another list (this with jqueryUI). When I press a button “Save”, its update the value of the Level field in each account where it left (example.: if an account with level1 is in the level3 field, its update the Level value to level3). In that way when I enter to the account I can view that change, and if I re-enter to the VF page I can see the lists with the new order.

Link of my previous post: https://developer.salesforce.com/forums/ForumsMain?id=906F00000005L1K

What’s happen now? For some reason the pathParam doesn’t work (or it doesn’t send anything). When I click the Save button it’s only refresh the page, and the Accounts doesn’t change with the new Level.

    <apex:page controller="Controler">
    <apex:stylesheet value="{!URLFOR($Resource.jQueryUI, '/jquery-ui-1.11.4/jquery-ui.min.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.Ejemplo, 'ejemplo.css')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryUI, '/jquery-ui-1.11.4/external/jquery/jquery.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryUI, '/jquery-ui-1.11.4/jquery-ui.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.Ejemplo, 'ejemplo.js')}"/>
<style type="text/css">

#pointer1
{
    cursor:pointer;
    border:1px solid #ccc;
    padding:5px;
    background-color: yellow;

}

#pointer2
{
    cursor:pointer;
    border:1px solid #ccc;
    padding:5px;
    background-color: #79aaa7;

}

</style>

<script>
    $(document).ready(function(){

        $('#pointer1').click(

        function callActionMethod(){

        var sortedIDs = $( "#sortable3" ).sortable( "toArray" );

        alert(sortedIDs); });});

</script>
<apex:form >


<ul id="sortable1" class="connectedSortable">
    <h3>Level 1</h3>
<apex:repeat value="{!Level1Accounts}" var="level1">
<li id="{!level1.Id}">"{!level1.Name}"</li>
</apex:repeat>
</ul>

<ul id="sortable2" class="connectedSortable">  
        <h3>Level 2</h3>
<apex:repeat value="{!Level2Accounts}" var="level2">
<li id="{!level2.Id}">"{!level2.Name}"</li>  
</apex:repeat>
</ul>

<ul id="sortable3" class="connectedSortable"> 
        <h3>Level 3</h3>
<apex:repeat value="{!Level3Accounts}" var="level3">
<li id="{!level3.Id}">"{!level3.Name}"</li>    
</apex:repeat>
</ul>





    <span id="pointer1" onclick="callActionMethod()"> Idssss !!! </span>
    <br/>
    <br/>
   <span id="pointer2" onclick="enviarListas()"> Save !!! </span> 


<apex:actionFunction name="listas" action="{!botonGuardar}" >
            <apex:param name="firstParam" assignTo="{!lista1}" value="" />
            <apex:param name="secondParam" assignTo="{!lista2}" value="" />
            <apex:param name="thirdParam" assignTo="{!lista3}" value="" />
 </apex:actionFunction>



</apex:form>

    <script type="text/javascript">
        $(document).ready(function(){

        $('#pointer2').click(


        function enviarListas(){

        var lista1 = new Array();
            lista1 = $( "#sortable1" ).sortable( "toArray" );

        var lista2 = new Array();
            lista2 = $( "#sortable2" ).sortable( "toArray" );

        var lista3 = new Array();
            lista3 = $( "#sortable3" ).sortable( "toArray" );


            listas(lista1,lista2,lista3);

                                });});


    </script>

</apex:page>

Controller:

public class Controler {


public List<Account> getLevel1Accounts() {
    List<Account> results = [SELECT Name, Id, NIVEL__c FROM Account WHERE NIVEL__c='Nivel 1'];
    return results;
}
public List<Account> getLevel2Accounts() {
    List<Account> results = [SELECT Name, Id, NIVEL__c FROM Account WHERE NIVEL__c='Nivel 2'];
    return results;
}
public List<Account> getLevel3Accounts() {
    List<Account> results = [SELECT Name, Id, NIVEL__c FROM Account WHERE NIVEL__c='Nivel 3'];
    return results;
}

public List<String> lista1{get;set;}
public List<String> lista2{get;set;}
public List<String> lista3{get;set;}



public void botonGuardar(){

    lista1 = new List<String>();
    lista2 = new List<String>();
    lista3 = new List<String>();

    for(String idd: lista1){
        Account temp1 = [SELECT Name FROM Account WHERE Id=:idd];
        temp1.Id = 'Nivel 1';
        update temp1;
    }
    for(String idd: lista2){
        Account temp2 = [SELECT Name FROM Account WHERE Id=:idd];
        temp2.Id = 'Nivel 2';
        update temp2;
    }
    for(String idd: lista3){
        Account temp3 = [SELECT Name FROM Account WHERE Id=:idd];
        temp3.Id = 'Nivel 3';
        update temp3;
    }

}}

Answer 1

You will need to add rerender to the actionfunction. It will always send "null" otherwise. Like this:

If that gives you another error, look at the new error carefully because its probable that you found another bug due to the actionfunction starting to work.