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:
table: Gallery img_id (pk) image caption order
I have also created these 2 views: index.php
<!-- will display the ajax result --> <div id="orderResult"></div> <hr/> <input type="button" id="save" value="Save Order" class="btn btn-primary"> <script type="text/javascript"> $(function () { $.post('<?php echo site_url('admin/galleries/order_ajax'); ?>', {}, function(data) { $('#orderResult').html(data); }); // save order $('#save').click(); }); </script>
order_ajax.php
<?php if(count($images)>0): ?> <div class="sortable-list"> <ol id="sortable"> <?php foreach($images as $image): ?> <li <?php echo 'id="li_'.html_escape($image->img_id).'"'; ?>><?php echo img(array('src' => 'uploads/thumbs/'.html_escape($image->image)); ?></li> <?php endforeach; ?> </ol> </div> <?php endif; ?> <script type="text/javascript"> $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); }); </script>
I have also created and the order_ajax controller
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 basically want to do is to drag the images around 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?
Advertisement
Answer
Well, the solution was more simple than I thought.
On the index.php view I’ve put this
<script type="text/javascript"> $(function () { $.post("<?php echo site_url('admin/galleries/order_ajax'); ?>", {}, function(data) { $('#orderResult').html(data); }); // save order $('#save').click(function(){ var new_order = $("#sortable").sortable( "toArray" ); $.post("<?php echo site_url('admin/galleries/order_ajax'); ?>", { order_array: new_order }, function(data) { $('#orderResult').html(data); }); }); }); </script>
and this is the controller function
public function order_ajax(){ // save order from pages if (isset($_POST['order_array'])) { $this->gallery_model->save_order($_POST['order_array']); } // fetch all images $this->data['images'] = $this->gallery->get(); // load the view $this->load->view('admin/gallery/order_ajax', $this->data, false); }