codeigniter jquery sortable save to database

2019-05-22 13:36发布

问题:

I am trying to save the order of a list of images to the database when using jquery sortable. I feel i am very close, but cant get my head around the final details. I am working with CI 2.1.3 and jquery-ui 1.10.3.

I have a dynamicaly generated list with an image:

<ul id="order">
<li id="item-1"><img src="abc.jpg" /></li>
<li id="item-2"><img src="def.jpg" /></li>
<li id="item-3"><img src="ghi.jpg" /></li>
</ul>

And the following Jquery:

<script>
$(document).ready(function() {

        $( "#order" ).sortable({
            opacity: 0.6,
            cursor: 'move',

            update: function(event, ui){
 var order = $(this).sortable("serialize");
 console.log(order);

                $.ajax({
                    url: "http://localhost/gridrobin/home/save_order",
                    type: 'POST',
                    data: order,
                    success: function (data) {
                        $("#test").html(data);
                    }

                });
                }

            });

});
</script>

This works fine and i can reorder my list. Now i want to save the new order to the database. I send the ajax post to the controller and it comes through. I checked with a var_dump.

//var_dump($_POST);

        $items = $this->input->post('item');
        $total_items = count($this->input->post('item'));

        echo '<h3>Debugging</h3>';
        echo "<p>Total items sent: $total_items</p>";

        $this->rd_model->update_order($total_items, $items);

Then I send this data to my model:

 for($item = 0; $item < $total_items; $item++ )
        {

            $data = array(
                    'id' => $items[$item],
                    'order' => $order = $item
            );

            $this->db->where('id', $data['id']);

            $this->db->update('portfolio_items', $data);
            echo '<br />'.$this->db->last_query();
        }

And echo out the last db-query for debugging.

Now when i switch item 1 and item 2, i get a 500 internal error. When i switch them back, i receive the echo of the last query executed, which seems fine.

UPDATE `portfolio_items` SET `order` = 1 WHERE `id` = '1'
UPDATE `portfolio_items` SET `order` = 2 WHERE `id` = '2'
UPDATE `portfolio_items` SET `order` = 3 WHERE `id` = '3'

I dont quite understand why the database updates when th list is switched back to its orignial state, but not otherwise.

UPDATE For people with the same problem, sakibmoon answer helped me a lot, but the main problem was a duplicate entry error, because apparently i had set the order table as a unique index...

回答1:

The problem is within your data array in the model. Change that with this -

$data = array(
                'id' => $items[$item],
                'order' => $item+1
        );

Also change the update line -

    $this->db->update('portfolio_items', $data['order']);

UPDATE:

Couple of changes. Change the update to this-

$this->db->update('portfolio_items', array('order' => $data['order']));

The code is working now if I set $config['csrf_protection'] = FALSE in config.php. But you should set it to TRUE. I don't know how to make that work. All I know is that you have to send csrf_token with your ajax call. You should create a separate question for that. This question title means something entirely different.