jquery sortable ajax php integration


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. HTML:
  2. --------
  3.  
  4.  
  5. <ul id="sortme">
  6. <li id="27" class="sortitem">Lorem</li>
  7. <li id="44" class="sortitem">Foo</li>
  8. <li id="136" class="sortitem">Bar</li>
  9. <li id="19" class="sortitem">Ipsum</li>
  10. </ul>
  11.  
  12. <div id="data" style="background-color: #CCCCCC; padding: 15px; border:
  13. solid 1px #999;">
  14. </div>
  15.  
  16.  
  17. JQUERY:
  18. -----------
  19.  
  20. $(document).ready(
  21. function()
  22. {
  23. $("#sortme").Sortable({
  24. accept : 'sortitem',
  25. onchange : function (sorted) {
  26. serial = $.SortSerialize('sortme');
  27.  
  28. /*
  29.   Instead of the $.ajax-call below, you could use these shorter funcs. In
  30. addition to the hash used by $.ajax, the SortSerialize method above also
  31. returns an object that can directly be used in the $().load and $.post/get
  32. functions:
  33.  
  34.   // $('#data').load("sortdata.php",serial.o.sortme);
  35.  
  36.   or
  37.  
  38.   // $.post("sortdata.php",serial.o.sortme, function(feedback){
  39. $('#data').html(feedback); });
  40.  
  41.  
  42.   */
  43.  
  44. $.ajax({
  45. url: "sortdata.php",
  46. type: "POST",
  47. data: serial.hash,
  48. // complete: function(){},
  49. success: function(feedback){ $('#data').html(feedback); }
  50. // error: function(){}
  51. });
  52.  
  53. }
  54. });
  55. }
  56. );
  57.  
  58.  
  59.  
  60. SORTDATA.PHP
  61. -------------------
  62.  
  63. <?php
  64.  
  65. // This can do anything it wants with the posted data which comes as an
  66. array. Here we just output it with print_r:
  67. echo "DATA RECEIVED: <br>";
  68. echo "<pre>";
  69. print_r($_POST);
  70. echo "</pre>";
  71. ?>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.