Advanced Search

jquery sortable ajax php integration

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

Expand | Embed | Plain Text

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.