advanced code snippet search

We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.

Posted By

jpdamen on 12/10/07


Tagged

php jquery interface sortable integration


Versions (?)


Who likes this?

7 people have marked this snippet as a favorite

vali29
heinz1959
mkjems
orhanveli
martingoldszein
korzhik
travisa86


jquery sortable ajax php integration

Published in: JavaScript 

Plain TextExpand 
  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 

You need to login to post a comment.