Jquery sortable, new order saved to database
  • reno1979reno1979
    Posts: 56Member

    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.

  • reno1979reno1979
    Posts: 56Member

    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!

    Thanked by 1madhurip
  • reno1979reno1979
    Posts: 56Member

    ps thx to this google result: http://codeigniter.com/forums/viewthread/93712/

  • reno1979reno1979
    Posts: 56Member

    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

  • downey_seandowney_sean
    Posts: 551Member, Administrator 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 :-)

    Sean

  • reno1979reno1979
    Posts: 56Member

    Hehe lol

    At least I learned something :)

  • madhuripmadhurip
    Posts: 2Member

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

  • madhuripmadhurip
    Posts: 2Member

    s

Howdy, Stranger!

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

Login with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter

Poll

No poll attached to this discussion.

In this Discussion