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>

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;
        }
        
    }
    


}

 

I need some help with a VF page:

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.

I’m totally newbie at VF, apex and jQuieryUI so if you propose to recode all from scratch (with help) I will do it.

But here is my code:
 

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;
}}

and
 

<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')}"/>


<apex:form>

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

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

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




</apex:form>


</apex:page>

JS
 

$(function() {
    $( "#sortable1, #sortable2, #sortable3" ).sortable({
       ".connectedSortable"
    }).disableSelection();
  });

So you can view 3 lists separated by level (with no css style, I don’t know why) that you can drag and drop the different items in other lists.

Im stuck with the save button part, I don’t know how jquery can interact with the controller to update the new value or simply how i can code it.