Order images with jquery-ui shortable

[eluser]Lykos22[/eluser]
Hi I 'd like some help please, as my skills in jquery are not so good. What I want to achieve is to change the order of the images like this example.

My database looks like this:

Code:

table: Gallery
img_id (pk)
image
caption
order

I have also created these 2 views:

- index.php

Code:

<!-- will display the ajax result -->
<div id="orderResult"></div>
<hr/>
&lt;input type="button" id="save" value="Save Order" class="btn btn-primary"&gt;

[removed]
    $(function () {
        $.post('&lt;?php echo site_url('admin/galleries/order_ajax'); ?&gt;', {}, function(data) {
            $('#orderResult').html(data);
        });

        // save order
       $('#save').click();
    });
[removed]

- order_ajax.php

Code:

<?php if(count($images)>0): ?>
<div class="sortable-list">
    <ol id="sortable">
        &lt;?php foreach($images as $image): ?&gt;
        <li &lt;?php echo 'id="li_'.html_escape($image-&gt;img_id).'"'; ?&gt;>&lt;?php echo img(array('src' => 'uploads/thumbs/'.html_escape($image->image)); ?&gt;</li>
        &lt;?php endforeach; ?&gt;
    </ol>
</div>  
&lt;?php endif; ?&gt;

[removed]
    $(function() {
         $( "#sortable" ).sortable();
         $( "#sortable" ).disableSelection();
    });
[removed]

I have also created and the order_ajax controller

Code:

public function order_ajax(){
// save order from pages
var_dump($_POST);

  // if (isset($_POST['sortable'])) {
  // $this->gallery->save_order($_POST['sortable']);
  // }

// fetch all images (fetch all data)
$this->data['images'] = $this->gallery->get();

// load the view
$this->load->view('admin/gallery/order_ajax', $this->data, false);
}

So what I basicly want to do is to drag the images arround in order to change their order, and when I click the save button pass the (new) data/order to the controller and to store them in the database. How can I make this work? any help would be appreciated.

[eluser]noideawhattotypehere[/eluser]
View:

Code:

$('#save').click(function(){
    var new_order = $("#sortable").sortable( "toArray" );
    $.post('http://yourdomain.com/controller/method-where-we-save-order', { order_array: new_order }, function(data) {
            $('#orderResult').html(data);
        });
});

Controller:

Code:

function method-where-we-save-order() {
    $new_order = $this->input->post('order_array');
    //now process the array, save changes to db, its really easy you should figure it out by yourself, you will get an array with key as your order and value as your items id
    echo 'New order was saved!';
}

[eluser]Lykos22[/eluser]
Thanks for the reply! I'm currently testing your code, and noticed that the order might have an error. I dumped the setting and here's what I've got:

Code:

// controller
public function order_ajax(){
// save order from pages
// var_dump($_POST['order_array']);
  if (isset($_POST['order_array'])) {
   $this->gallery_model->save_order($_POST['order_array']);
  }

// fetch all images
$this->data['images'] = $this->gallery_model->get();

// load the view
$this->layout->view('admin/gallery/order_ajax', $this->data, null, false);
}

// model
public function save_order($images){
  if (count($images)) {
   foreach ($images as $order => $img) {
    var_dump($img .' -> '.$order);

    // $data = array(
    //   'order' => $order,
    //  );
    // $this->db->set($data)
    // ->where($this->_primary_key, $img) // the img_id
    // ->update($this->_table_name);
   }
  }
}

// dump on the screen
li_8 -> 0
li_7 -> 1
li_6 -> 2
li_5 -> 3
...
li_1 -> 7

Shouldn't the order start from 1 (currently looks like is 0-indexed)?? Also I need to get the img_id ( the number only from the li_1 )

[eluser]noideawhattotypehere[/eluser]
No, it starts from 0 as its arrays key (which starts from 0 in php, just increment by one? or start ordering from 0, your choice.)
If you want to get only number from li_x use either:

Code:

$id = substr($img, 3);

or

Code:

$id = explode("_", $img);
//your id here will be saved as $id[1];

or you can just change id of your li elements to id of the image without li_ at beginning

[eluser]Lykos22[/eluser]
Thanks again for the reply. I've tested the code and works fine!

I thought that it was more correct if the order started from 1, but it works like this great!