Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Facebook Sign In with Twitter

Poll

No poll attached to this discussion.

In this Discussion

Jquery sortable, new order saved to database

in General edited January 2012

In the admin I would like to save a new order of pages (using drag & drop) to the database.

xxxxxxxxxxxxxxxxxxxx

Found the answer myself, I'll start a conversation with me and myself here below to explain what I did.

Comments
  • Nevermind, I got it working :D

    simple example:

    in your view: (in my case module page: views/content/index.php)

    <ul id="sortable">
        <li id="1">Item 1</li>
        <li id="2">Item 2</li>
        <li id="3">Item 3</li>
    </ul>
    

    in your js.php:

    $(document).ready(function(){
        $('#sortable').sortable({
            update: function() {
                var stringDiv = "";
                $("#sortable").children().each(function(i) {
                    var li = $(this);
                    stringDiv += " "+li.attr("id") + '=' + i + '&';
                });
    
                $.ajax({
                    type: "POST",
                    url: "<?=base_url().'/admin/content/page/updateOrder'?>",
                    data: stringDiv
    
                }); 
            }
        }); 
        $( "#sortable" ).disableSelection();    
    });
    

    In your controller: (in my case controllers/content.php)

        function updateOrder () {
    
            $data =  $this->page_model->getOrderList() ;
    
            foreach ( $_POST as $key => $value )
            {
                $newRank = $value;
                $currentRank = $data[$key];
                if($currentRank != $newRank){
                    $this->page_model->switchOrder($key,$newRank);
                }
            }
        }  
    

    In your model: (In my models/page_model.php)

        public function getOrderList()
        {
            $sql = "SELECT id, page_order FROM bf_page";
            $query = $this->db->query($sql);
                if (!empty($query) && $query->num_rows() > 0)
                {
                    $result = $query->result_array();
                    $list = array();
                    foreach($query->result() as $row)
                    {
                        $list[$row->id]= $row->page_order;
                    }
                    return $list;
                } else 
                {
                        return FALSE;
                }
        }
    

    Any improvement suggestions are welcome!

  • Ok, now to get it working with the table created by the module builder.

    In your module view: (in this case content/index.php) Give the table an id value and supply each generated row with the id value of the current record in the foreach loop, like this:

    <h2>Page</h2>
        <table id="sort">
            <thead>
                <tr>
    ......
    .....
    </thead>
            <tbody>
            <?php foreach ($records as $record) : ?>
                <tr id="<?php echo $record->id?>">
                    <td><?php echo $record->page_title?></td>
    

    Ok, now adjust the js.php content so it can sort table rows: (thanx to google: http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/ )

    $(document).ready(function(){   
        // Return a helper with preserved width of cells
        var fixHelper = function(e, ui) {
        ui.children().each(function() {
            $(this).width($(this).width());
        });
        return ui;
        };
    
        $('#sort tbody').sortable({
            update: function() {
                var stringDiv = "";
                $("#sort tbody").children().each(function(i) {
                    var li = $(this);
                    stringDiv += " "+li.attr("id") + '=' + i + '&';
                });
    
                $.ajax({
                    type: "POST",
                    url: "<?=base_url().'/admin/content/page/updateOrder'?>",
                    data: stringDiv
                }); 
            }
        }); 
        $( "#sortable" ).disableSelection();    
    });
    

    Of course I added new methods to the module's model, because I wanted a sorted result.

    So I added to the model: (In my case model/page_model.php)

        public function findAllSorted()
        {
            $sql = "SELECT * FROM bf_page ORDER BY page_order";
            $query = $this->db->query($sql);
            if (!empty($query) && $query->num_rows() > 0)
            {
                return $query->result();
            } 
        }
    

    Hope someone can use this :D

  • Posts: 0 Accepted Answer

    Can someone else join the conversation ?? he he

    I didn't get to reply earlier and I haven't compared the code but I got the sortable stuff working in a module previously - https://github.com/seandowney/bonfire_navigationmodule

    It won't be of help now though :-)

  • Hehe lol

    At least I learned something :)

  • edited October 2013 Posts: 0

    I have used the second one for tables.. it works .. Thanks reno :)

  • edited October 2013 Posts: 0

    s

Sign In or Register to comment.
Origami
Origami is the Japanese word for paper folding. ORI means to fold and KAMI means paper and involves the creation of paper forms usually entirely by folding.

Powered by VanillaForums, Designed by Steam