+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived General Discussion (https://forum.codeigniter.com/forumdisplay.php?fid=21)
+--- Thread: Save Jquery sortable state to DB (/showthread.php?tid=36524)
Save Jquery sortable state to DB - El Forum - 12-04-2010
[eluser]Ludovic-r[/eluser]
Hi everyone,
I've made a sortable list with the Jquery UI sortable (and it works well) but I need to save the current state of list in my DB.
Example : I drag and drop the item1 under the item3 and I need to click on a button called "Save rank state" to save the rank in my DB. Maybe I need to call a function in a controller to store the new rank in the DB, but how? Ajax maybe?
In my DB I have a field called "Rank" filled with numbers. That's what I need to update
How can I do that please? Any ideas? I'm stuck on this
Thanks!
Save Jquery sortable state to DB - El Forum - 12-04-2010
[eluser]Eric Barnes[/eluser]
I do it through ajax and here is an example controller:
Code:
/**
* Order List Items
*
* Used to order by drag and drop.
*
* @return bool
*/
public function order_list()
{
$order = $this->input->post('list_item');
if ($order AND $this->list_library->order($order))
{
$json['result'] = 'success';
$json['message'] = $this->lang->line('lang_order_content');
}
else
{
$json['result'] = 'error';
$json['message'] = $this->lang->line('lang_order_content_fail');
}
exit(json_encode($json));
}Example JS:
Code:
$(".list_wrap").sortable({
opacity: 0.6,
cursor: 'move',
tolerance: 'pointer',
revert: true,
placeholder: 'ui-state-highlight',
handle: 'span',
items: 'div:not(.disabled)',
delay: 500,
distance: 30,
update: function () {
var order = $(this).sortable("serialize");
$.post("http://example.com/pages/order_list", order);
}
}).disableSelection();Save Jquery sortable state to DB - El Forum - 12-05-2010
[eluser]Ludovic-r[/eluser]
Many thanks for your answer, it helps a lot! But now what can I do to make a button like "Save order" and give the list order to my controller?
Save Jquery sortable state to DB - El Forum - 12-05-2010
[eluser]Ludovic-r[/eluser]
Oh sorry, I didn't mind that it save the list automaticly (my fault)
Save Jquery sortable state to DB - El Forum - 12-05-2010
[eluser]Ludovic-r[/eluser]
Ok now I can't access to my $.post data from my Controller. I have this :
var order = $(this).sortable("serialize");
$.post("http://localhost:8888/codeigniter/index.php/admin/order", order);
And in my controller this :
function order()
{
$order = $this->input->post('list_item');
echo $order;
}
I echo it just to see if it works, I know it's not its place, but unfortunately it doesn't work
any ideas?
Save Jquery sortable state to DB - El Forum - 12-05-2010
[eluser]Eric Barnes[/eluser]
Your post var is probably not list_item. The best method is to use firebug and you can see exactly what is posted.
Save Jquery sortable state to DB - El Forum - 12-06-2010
[eluser]Zehee[/eluser]
Code:
jQuery(function($){
var $sort = $('#openTaskLists');
$sort.sortable({
axis:'y',
cursor: 'move',
items: 'li.t-active',
update:function(event,ui){
// this is the item you just draged
var item = ui.item;
var container = item.parent();
var reorder = [];
container.children('li').each(function(i){
// save the item id order in array
reorder[i] = $(this).attr('id');
});
$.ajax({
method:'post',
url:'<?php echo get_url ('task', 'reorder_tasks_ajax')?>',
// post the container id, draged item id, all items order
data:{
'task_list_id':container.attr('id'),
'item':item.attr('id'),
'reorder':reorder
}
});
}
});
});I referenced basecamp(a product powered by 37signals)
Save Jquery sortable state to DB - El Forum - 12-06-2010
[eluser]Ludovic-r[/eluser]
Ok, will try that, but if I need to call the sorted order in my Controller should I just type $this->input->post('my_var') ? I really need to communicate with my controller to store the list in my DB.
Thanks for your answer!