Salesforce | Passing data via Javascript to Apex Controller

Some situations occur when we become unable to pass the data from visualforce page to apex controller directly.  For example: Suppose you have three divs (todoDiv, doingDiv, doneDiv) that are showing some tasks through the List from apex controller. It has the drag and drop functionality that allows the user to drag and drop the tasks to another div:

<div id="todoDiv" class="taskList" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="false">
<apex:repeat value="{!todoList}" var="todoTask" id="repeatTodoTask">
<div draggable="true" ondragstart="drag(event)" class="todoStyle">
<div class="taskSubject">{!todoTask}</div>
</div>
</apex:repeat>
</div>
<div id="doingDiv" class="taskList" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="false">
<apex:repeat value="{!doingList}" var="doingTask" id="repeatDoingTask">
<div class="doingStyle" draggable="true" ondragstart="drag(event)">
<div class="taskSubject">{!doingTask}</div>
</div>
</apex:repeat>
</div>
<div class="taskList" id="doneDiv" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="false">
<apex:repeat value="{!doneList}" var="doneTask" id="repeatDoneTask">
<div class="doneStyle" draggable="true" ondragstart="drag(event)">
<div class="taskSubject">{!doneTask}</div>
</div>
</apex:repeat>
</div>
<div>
<apex:commandButton styleclass="saveCss" id="saveBtn" value="Save" action="{!save}"/>
</div>

When the user clicks Save button then the status of tasks must be saved according to the div in which the user has dropped the task.

Now the problem is that how can we know that which task is dropped to which div. One solution that I found is to retrieve the tasks div wise via javascript. Means we need to pass the array from javascript to apex controller in order to save it.

We can do so by following steps:

1.Create the <apex:inputHidden> element to get value from javascript and set value to controller :

<apex:inputHidden id="hiddenTodoTask" value="{!passTodoTask}"/>
<apex:inputHidden id="hiddenDoingTask" value="{!passDoingTask}"/>
<apex:inputHidden id="hiddenDoneTask" value="{!passDoneTask}"/>

2.Create a javascript function to retrieve the data from the visualforce page and to set it in <apex:inputHidden>.

For Example:

<script>function saveTasks(){ var todoArray= new Array(); 
var doingArray= new Array();   
var doneArray= new Array(); 
var divText;   $('#todoDiv').find('div').find('div').each(function(){ 
divText= $(this).text();     /*getting contents of div inside todoDiv div*/   
todoArray.push(divText);     /* save contents to array*/   });   /*Pass the array formed to the apex:inputHidden field to save in controller */
document.getElementById('j_id0:myform:hiddenTodoTask').value=todoArray;  
$('#doingDiv').find('div').find('div').each(function(){divText= $(this).text();   /*getting contents of div inside doingDiv div*/    
doingArray.push(divText);   });    
document.getElementById('j_id0:myform:hiddenDoingTask').value=doingArray;   
alert(‘doingArray is \n '+doingArray );   
$('#doneDiv').find('div').find('div').each(function(){    divText= $(this).text(); /* getting contents of div inside doneDiv div*/    
doneArray.push(divText);  });  
document.getElementById('j_id0:myform:hiddenDoneTask').value=doneArray;   
alert('doneArray is \n '+doneArray );  } 
</script>

3.Call the javascript function on click of save button:

<div onclick="saveTasks();">
<apex:commandButton styleclass="saveCss" id="saveBtn" value="Save" action="{!save}"/>

4.Now in apex controller we can get the values from these input hidden field and save them:

public class SaveTaskController{
public List<String> todoList{get;set;} 
public List<String> doingList{get;set;}
public List<String> doneList{get;set;}
public String passTodoTask{get;set;}
public String passDoingTask{get;set;}
public String passDoneTask{get;set;}
/*  functionality */
}