javascript - How to get a new array back in php when used sortable.js -

i'm using sortable javascript http://farhadi.ir/projects/html5sortable/

the script works fine me, when have no knowlidge of javascript problem how create code array in php new order when have moved picture.

the code use now:

<section> <ul class="sortable grid">      <?php     $i=1;       foreach ($werkbladen $werkblad) {          $thumbnail = "../groepen/".$werkblad['werkblad'][path].$werkblad['werkblad'][thumbnail];          echo '<li id = "'.$i.'"><img src="'.$thumbnail.'" width="139" height="181" /></li>';          $i++;     }     ?>  </ul> </section>  <script> $('.sortable').sortable().bind('sortupdate', function() {      //triggered when user stopped sorting , dom position has changed.      // need here code in javascript creates new array in php new order  }); </script> 

i hope can me out this.

maybe more explaination too: how session_array like

array ( [0] => array     (         [werkblad] => array             (                 [id] => 1105                 [database] => 1111                 [path] => groep12/1111                 [thumbnail] => mensen-kleding-03.jpg                 [bestand] =>              )      )  [1] => array     (         [werkblad] => array             (                 [id] => 5639                 [database] => 1111                 [path] => groep12/1111/1111/                 [thumbnail] => mensen-kleding-1-minder-en-1-meer.jpg                 [bestand] => mensen-kleding-1-minder-en-1-meer.pdf             )      )  [2] => array     (         [werkblad] => array             (                 [id] => 72                 [database] => 1111                 [path] => groep12/1111/                 [thumbnail] => passieve-woordenschat-02.jpg                 [bestand] => passieve-woordenschat-02.pdf             )      )  ) 

what need array sorted images. array send php file creates pdf it, need information original one.

kind regards, sietsko

i find if can avoid using javascript task, pays so. @ least @ start, because means system can used more people. having script-disabled fallback of benefit in terms of accessibility, , helps guide in way of building applications stick reliable, easy understand baseline.

i'm assuming know php, you'll have understanding of html too.

non-javascript solution

basically you'd need simple solution render hidden inputs part of sortable markup. these inputs have have named index-less array notation i.e. name="row[]" html order honored when data presented server-side.

the inputs responsible keeping meaningful information stored within html. php's serialize(), or json_encode() deal complex values, or — if have access data set or list on server-side i.e. in database or session — *preferable store unique ids.

the hidden inputs sorted along rest of html.

*preferable : why storing ids better? not sending less data simple ids, less interference can occur if end malicious user. may attempt post unwanted information server. should test , clean data received outside world server, easier when dealing simple array key offsets — rather complex data structures.

slight changes have already

in order work you'll need wrap sortable list form tag , **submit button, or @ least call-to-action triggers form's submit. when submit called — without having leverage javascript @ — destination of form receive data in correct order.

<form id="sorted" action="destination.php" method="post"> <section> <ul class="sortable grid">   <?php   $i=1;    foreach ($werkbladen $werkblad) {     $thumbnail = "../groepen/".$werkblad['werkblad'][path].$werkblad['werkblad'][thumbnail];     /// i've used thumbnail stored data, use `$i` or want really.     $input = '<input type="hidden" name="row[]" value="' . $thumbnail . '" />';     $image = '<img src="' . $thumbnail . '" width="139" height="181" />';     echo '<li id="'.$i.'">' . $input . $image . </li>';     $i++;   }   ?> </ul> </section> </form> 

**submit button : if generating pdf, wouldn't trigger generation after every sort event. want user request via call-to-action because pdf generation quite heavy process. not mention waste bandwidth , processing time if user hasn't finished ***ordering.

then on php side you'd row information using:

$_post['row']; // <-- should sorted array of thumbnail paths. 

***ordering : true, put timeout delay on sortupdate event, not trigger after every sort. reasons implementing call-to-action not based on minimizing work server has do. idea implement call-to-action default, , progressively hide away users either don't want or need it.

progressively enhanced

if did want up-to-the-last-sort-interaction preview, still implement html solution above, progressively enhance javascript add abilities. can using ajax/$sortable solution has been commented about. because have form, use jquery's .serialize() method. designed take form , generate data have submitted string of name-value pairs. "url" string can posted or geted server in number of ways.

$('.sortable').sortable().bind('sortupdate', function() {   var data = jquery('form#sorted').serialize();   console.log(data);   /// there number of ways can use data   /// send via ajax, open new tab, open pop-up window,   /// open preview iframe... encode using semaphore   /// , create canvas animation of waving flags. });