Save the change of the checkbox-state on DB

posted 9 years ago

Hi everybody!

I have a view that shows a list of tasks. Each task has a checkbox that shows if it's taken by a user or if is free of be taken in charge.

Conceptually i need to do this things:

With Jquery bind the click event for the checkbox of the task. Make an AJAX call to the server when the click event is detected and pass the id of the task and the state of the checkbox (checked = 1, unchecked = 0). Capture the request in a controller via route. Modify the attribute "Busy" of the Task in database.

If the checkbox is checked, busy value in database is 1, if it's uncheked, need to be 0.

This could be the route

Route::post('changestatustask', array('as' => 'statusTask', 'uses' => 'TaskController@statusTask'));

This could be probably the function in the controller

	public function statusTask()
	{
   		$task = Task::find(Input::get('idTask'));
    	if (Input::get('checkboxStatus') == 1)
    	{
    		$task->busy = true;
    		$task->save();
    	}
    	else
    	{
    		$task->busy = false;
    		$task->save();
    	}
    }

but i can't imagine the jquery and the ajax code...

could anyone help me a little please?

Last updated 2 years ago.

lab6net

replied 9 years ago

Solution

It's just standard ajax request from web browser.

You can use $.post(..) method of jQuery, to send POST request through ajax, and like u wrote you have to listen on "click" event on every checkbox u have on list.

I would go with something like Input boxes:

<input type='checkbox' data-taskid='4543' class='taskchecker'>
<input type='checkbox' data-taskid='1452' class='taskchecker'>
<input type='checkbox' data-taskid='8532' class='taskchecker'>

Then in javascript:

$(".taskchecker").on("change", function() {
   var taskId = $(this).attr("data-taskid"); // gets task ID of clicked checkbox
   var state = $(this).is(':checked'); // gets if checkbox is checked or not
   
  $.post("/changestatustask", {'idTask':taskId, 'checkboxStatus':state}, function() {
    // you can add some code here in response to ajax request
  );
});