jQuery UI Sortable then write order into a database

Question

I want to use the jQuery UI sortable function to allow users to set an order and then on change  write it to the database and update it  Can someone write an example on how this would be done

User · Answer

Thought this might help as well  A  it was designed to keep payload to its minimum while sending back to server  after each sort   instead of sending all elements each time or iterating through many elements that server might chuck out  B  I needed to send back custom id without compromising the id   name of the element  This code will get the list from asp net server and then upon sorting only 2 values will be sent back  The db id of sorted element and db id of the element next to which it was dropped  Based on those 2 values  server can easily identify the new postion    lt div id  planlist  style  width 1000px  gt       lt ul style  width 1000px  gt          lt li plid  listId1  gt  lt a href   pl-1  gt List 1 lt  a gt  lt  li gt          lt li plid  listId2  gt  lt a href   pl-2  gt List 1 lt  a gt  lt  li gt          lt li plid  listId3  gt  lt a href   pl-3  gt List 1 lt  a gt  lt  li gt          lt li plid  listId4  gt  lt a href   pl-4  gt List 1 lt  a gt  lt  li gt       lt  ul gt       lt div id  pl-1  gt  lt  div gt       lt div id  pl-2  gt  lt  div gt       lt div id  pl-3  gt  lt  div gt       lt div id  pl-4  gt  lt  div gt   lt  div gt   lt script type  text javascript  language  javascript  gt        function              var tabs       planlist   tabs            tabs find   ui-tabs-nav   sortable               axis   x               stop  function                      tabs tabs  refresh                               update  function  event  ui                      db id of the item sorted                 alert ui item attr  plid                       db id of the item next to which the dragged item was dropped                 alert ui item prev   attr  plid                        make ajax call                                    lt  script gt

User · Answer

You re in luck  I use the exact thing in my CMS  When you want to store the order  just call the JavaScript method saveOrder    It will make an AJAX POST request to saveorder php  but of course you could always post it as a regular form    lt script type  text javascript  gt  function saveOrder         var articleorder             sortable li   each function i            if  articleorder                  articleorder     this  attr  data-article-id            else             articleorder            this  attr  data-article-id                          articleorder now contains a comma separated list of the ID s of the articles in the correct order        post   saveorder php     order  articleorder             success function data                alert  saved                        error function data                 alert  Error      data                    lt  script gt   lt ul id  sortable  gt   lt  php   my way to get all the articles  but you should of course use your own method   articles   Page  Articles    foreach  articles as  article          gt       lt li data-article-id   lt    article- gt Id    gt   gt  lt    article- gt Title    gt  lt  li gt       lt                      gt      lt  ul gt      lt input type  button  value  Save order  onclick  saveOrder      gt    In saveorder php  Keep in mind I removed all verification and checking    lt  php  orderlist   explode        POST  order     foreach   orderlist as  k  gt  order      echo  Id for position      k            order     lt br gt             gt

User · Answer

The jQuery UI sortable feature includes a serialize method to do this  It s quite simple  really  Here s a quick example that sends the data to the specified URL as soon as an element has changes position       element   sortable       axis   y       update  function  event  ui            var data     this  sortable  serialize                POST to server using   post or   ajax           ajax               data  data              type   POST               url    your url here                          What this does is that it creates an array of the elements using the elements id  So  I usually do something like this    lt ul id  sortable  gt      lt li id  item-1  gt  lt  li gt      lt li id  item-2  gt  lt  li gt          lt  ul gt    When you use the serialize option  it will create a POST query string like this  item   1 amp item   2 etc  So if you make use - for example - your database IDs in the id attribute  you can then simply iterate through the POSTed array and update the elements  positions accordingly   For example  in PHP    i   0   foreach    POST  item   as  value           Execute statement         UPDATE  Table  SET  Position     i WHERE  EntityId     value      i        Example on jsFiddle

User · Answer

This is my example   https   github com luisnicg jQuery-Sortable-and-PHP  You need to catch the order in the update event           sortable    sortable       placeholder   ui-state-highlight       update  function  event  ui             var sorted        sortable    sortable   serialize     key   sort                 post   form order php     choices     sorted

User · Answer

I can change the rows by following the accepted answer and associated example on jsFiddle  But due to some unknown reasons  I couldn t get the ids after  stop or change  actions  But the example posted in the JQuery UI page works fine for me  You can check that link here

User · Answer

Try with this solution  http   phppot com php sorting-mysql-row-order-using-jquery  where new order is saved in some HMTL element  Then you submit the form with this data to some PHP script  and iterate trough it with for loop   Note  I had to add another db field of type INT 11  which is updated timestamp ed  on each iteration - it serves for script to know which row is recenty updated  or else you end up with scrambled results

[php] jQuery UI Sortable, then write order into a database

Examples related to php

Examples related to jquery

Examples related to mysql

Examples related to jquery-ui

Examples related to jquery-ui-sortable