[eluser]ZioN[/eluser]
I've been looking for quite some time for a way to save the new 'order'.
I want to let the users of my system re-order a list. But I cannot get it to save it to the database.
View:
Code: $( document ).ready(function() {
$( "#sortable" ).sortable({
placeholder: "ui-state-highlight",
update: function(event, ui){
data: $(this).sortable("serialize"),
$.ajax({
url: "/ci/acp/save_order",
type: 'POST',
data: {
'order': $( "#sortable" ).sortable('toArray'),
},
success: function (data) {
$("#test").html(data);
}
});
}
});
$( "#sortable" ).disableSelection();
});
echo '<li id="item-'.$row->id .'" class="ui-state-default">';
Controller:
Code: function save_order()
{
$items = $this->input->post('item');
$total_items = count($this->input->post('item'));
for($item = 0; $item < $total_items; $item++ )
{
$data = array(
'id' => $items[$item],
'order' => $item+1
);
$this->db->where('id', $data['id']);
$this->db->update('pages', array('order' => $data['order']));
echo $this->db->last_query();
}
}
It seems the ID is not coming through:
UPDATE `pages` SET `order` = 1 WHERE `id` IS NULL
[eluser]CroNiX[/eluser]
Try
Code: function save_order()
{
$items = $this->input->post('item');
foreach($items as $order => $item_id)
{
$this->db
->where('id', $item_id)
->update('pages', array('order' => $order + 1));
}
}
[eluser]CroNiX[/eluser]
If that doesn't work try doing a
Code: print_r($items); die();
right after you retrieve 'items' from post
Also, in your ajax call, I think you should only be sending
Code: data: {
'items': $(this).sortable("serialize")
},
[eluser]ZioN[/eluser]
Hi CroNiX,
Thank you for your reply.
I'm fairly new to AJAX but i'm trying
I'm getting an
"Message: Invalid argument supplied for foreach()"
print_r($items); does not return anything.
var_dump($_POST); returns:
Code: array(1) { ["items"]=> string(26) "item[]=1&item;[]=3&item;[]=2" }
[eluser]CroNiX[/eluser]
What does your UL HTML look like? Do you have id's set for each LI similar to below?
The UL
Code: <ul id="sort">
<li id="s_1">The First</li>
<li id="s_2">The Second</li>
</ul>
The sortable js
Code: $('#sort').sortable({
update: function(evt, ui) {
$.ajax({
type: 'POST',
url: '/the_url_to_save',
dataType: 'json',
data: $('#sort').sortable('serialize'),
success: function(msg) {
console.log(msg);
}
});
}
});
The receiving controller
Code: function the_url_to_save()
{
$ids = $this->input->post('s', TRUE); //this is just "s", because that is what my id's started with, "s_{id}". Sortable() does this for you
echo json_encode($ids); //just echo back to controller so it will display in console
}
[eluser]ZioN[/eluser]
Code: <ul id="sort">
<?php
foreach($pages as $row){
echo '<li id="s_'.$row->id .'" class="ui-state-default">';
echo $row->page_title;
echo "</li>";
}
echo "</ul>";
With your code I see
in my console.
[eluser]CroNiX[/eluser]
That seems about right. That would mean the order of id 1 is first, id 3 is second, and id 2 is third.
So now in the the_url_to_save() method,
Code: function the_url_to_save()
{
$ids = $this->input->post('s', TRUE); //this is just "s", because that is what my id's started with, "s_{id}". Sortable() does this for you
foreach($ids as $order => $item_id)
{
$this->db
->where('id', $item_id)
->update('pages', array('order' => $order + 1));
}
//send some sort of status back to jquery, after YOU do some checking...
echo json_encode(array('status' => TRUE));
}
You'd actually do that db stuff in a model and return the result to the controller, but this should now work as is.
[eluser]skunkbad[/eluser]
I don't know if it would be of any help, but Community Auth has an example of a draggable/droppable/sortable file uploader. It couldn't hurt to look at it.
[eluser]ZioN[/eluser]
CroNiX,
Thank you so much. It did the trick.
I will go over the code and try to figure out what it's doing.
And clean the code (doing the db stuff in the model).
|