Jquery UI sortable, write order into a MySql database

Question

I'm currently using JQuery UI Dragabble, Droppable and sortable. I have two div sections at top and bottom of my php file were i'm dragging and dropping contents from bottom to top div sections.

In top div section i'm performing Sortable JQUery opertions my next requirment is when i perform sorting operation in top section its order should be automatically updated in my MYSQL DB i gotta stuck like how to pass the sorted order to my MySQL db via ajax and php file. Can somebody suggest some help in Achieving it!

Thanks!

Html/PHP code

<div class="drop_list">
        <ol id="sortable" style="list-style:decimal;"></ol>
    </div>
    <div class="sort_list">
    <ul id="draggable">
        <?php 
            for($i=1;$i<=5;$i++)
            {
            ?>  
                <li data-id='article_<?php echo $i;?>' class="draggable_li qitem" >
                    <div class="main_div">
                        <div class="secondary_div">
                            <div class="form_div">
                                <form>
                                    <input style="width:15px;" type="checkbox" class="hello"/>
                                </form>
                            </div>
                            <label class="item_div">
                                <span class="item">Item = <?php echo $i; ?></span>
                            </label>
                        </div>
                        <button class="hello btn btn-success add_top">
                            Add to Top Stories
                        </button>
                        <span class="AH_section" style="display:none;float:right;">
                            <input type="checkbox"/>Home Section
                            <input type="checkbox"/>App Home Section
                        </span>
                    </div>
                </li>
            <?php
            }
        ?>
    </ul>
    </div>
    </div>
        </div>
    </div>

JQuery code

$(document).ready(function() {

        $("#sortable").sortable({
            revert: true,
            refreshPositions: true ,
            helper : 'clone',
            cursor: "move",
            delay: 1,
            tolerance: 'pointer',
            revert: 50  
            /*stop:function(event,ui){
                var data = $(this).sortable('serialize');
            }*/ 
        }).serialize();

        $("ol li").disableSelection();

        $(".sort_list li").draggable({
            //containment : "#container",
            tolerance:"pointer",
            helper : 'clone',
            refreshPositions: true ,
            revert : 'invalid',
            opacity:.4,
        });

        $(".drop_list ol").droppable({
            revert:true,
            //hoverClass : 'ui-state-highlight',
            greedy: true,
            refreshPositions: true,
            drop : function(ev, ui) 
            {
                $(ui.draggable).clone().appendTo(this);
                if($(this)[0].id === "sortable")
                {
                    console.log($(this).closest("button").find('.hello'));
                    $(this).find('.hello').hide();
                    $(this).find('.AH_section').show();
                    //$(ui.draggable).draggable( 'disable' ); //this will not append dragged list at top of the container
                    ui.draggable.draggable( 'disable' ).closest('li').prependTo(ui.draggable.closest('ul')); //this will append dragged list at top of the container
                    return true;
                }
            }
        });
    });

Niranjan N Raju · Accepted Answer · 2015-10-09 06:35:52Z

2

change data-id='article_<?php echo $i;?>' to id='<?php echo $i;?>'

add this to your sortable(),

update: function (event, ui) {
         var serial=$(this).sortable('serialize');
             save_sortable(serial);
}

so here on update, you are calling save_sortable() function, from ajax , update your db in the order returned from sortable()

function save_sortable(serial)
{
      $.ajax({
         url: "path to your file to update in db.",
         type: 'POST',
         data: serial,
         success: function (data) {
                  //alert(data);
         }
      });
}

answered Oct 9, 2015 at 6:35

Niranjan N Raju

12k4 gold badges24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Niranjan N Raju Over a year ago

Glad it helped you, if it helped you, dont forget to accept the answer.

Christof · Accepted Answer · 2015-10-09 06:39:32Z

1

You can add some id attribute to li, in my case will be get_id. and then call below function onDropSendSort(); when you want, ie after drop.

<li data-id='article_<?php echo $i;?>' get_id="<?php echo $object_id; ?>" class="draggable_li qitem" >

function onDropSendSort() {
  var data = []; 
  $('#draggable li').each(function() {
      var id = $(this).attr('get_id');
      data.push(id);
  });

 // data = [id_1, id_3, id_n];

  $.ajax({  
    url: 'some_url',
    type: 'POST',
    data: {sort: data},
    complete: function(res) {
      console.info(res);
    }
  });
}

edited Oct 9, 2015 at 6:39

answered Oct 9, 2015 at 6:33

Christof

2,7462 gold badges22 silver badges34 bronze badges

1 Comment

Sjay Over a year ago

Thank you very much for helping me out i'm thankful for ur suggestion and ur valuable time Thanks!!

Collectives™ on Stack Overflow

Jquery UI sortable, write order into a MySql database

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related