Sortable+Ajax+Cakephp

xam1311
Javascript

bonjour à tous ,j'ai un petit souci avec ce système que je voudrais adapter

Voici mon Js

$(document).ready(function(){
$("#listIcons").sortable({
  helper:function(e, ui) {
    ui.children().each(function() {
    $(this).width($(this).width());
    });
    return ui;
    },
    update:function(){
            i = 0; 
            $('#listIcons td:first').each(function(){
                i++;
                $(this).find('input').val(i); 
            });
    $("#IconsAdminhomeForm").ajaxSubmit({
      success: function() { alert('hooray!'); }, 
      error: function() { alert('boo'); }
      }); 
    }   
    });

Ma vue 

<?php echo $this->Form->create('Icons',array('url'=>array('controller'=>'Home','action'=>'order'))); ?>
<tbody id="listIcons">  

 <?php foreach ($icons as $k =>$v): $v = current($v);?>
    <tr>
            <td><input type="hidden" value="<?php echo $v'position']; ?>" name="data[Icons]<?php echo $v'id']; ?>]"></td>
            <td><?php echo $v'id'];?></td>

            <?php $text= Sanitize::stripTags($v'title'],'p','a','b','script','i');
            $text= Sanitize::stripWhitespace($text);?>         
            <td><?php echo $v'title']; ?></td>
            <td><?php echo $v'link']; ?></td>           
           <td>etc etc t<td>           
    </tr>
<?php
endforeach;
echo $this->Form->end();

Mon controller Order 

function order(){
        if(!empty($this->request->data'Icons'])){
             foreach($this->request->data'Icons'] as $k=>$v){
                $this->Icons->id = $k;
                $this->Icons->saveField('position',$v); 
            }
            die();
        }
    }

Le problème c'est que tout élément déplacé,n'envoie plus l'information input en ajax et donc ma base de données met à jour les fields des éléments non déplacés (le champ position) mais pas celui déplacé,'jimagine que ce n'est pas grand chose mais je me casse la tête dessus

voilà ce qui est transmis en ajax 

_method:POST
data[Icons][1]:2
data[Icons][2]:3

Il manque la ligne qui a été déplacé

4 réponses

xam1311
Auteur
Réponse acceptée

Je m'auto-réponds après deux ans, le temps et la tête dure sont là :P , donc le souci c'est la serialisation de jquery.form.js en ajaxsubmit qui ne prend plus l'input contenu dans un Tr après un sortable, (un souci avec disableSelection ou autre je ne sais pas),l'input est désactivé après chaque sortable et donc chaque input disparaît après chaque déplacement de TR ;ma solution si on veut garder un tableau avec un Tr>input et utiliser le sortable sans pour autant faire des variables Js de mise en cache temporaire ...
Le view

<tbody id="tbodyProjects">
           <?php echo $this->Form->create('Project',array('url'=>array('controller'=>'projects','action'=>'order'))); ?>
                <?php foreach ($projects as $k =>$d): ?>

                <tr>
              <input type="hidden" value="<?php echo $d'Project']'order']; ?>" name="data[Project]<?php echo $d'Project']'id']; ?>]">

Le code js avec le sortable dans la view ( le helper est pour garder la largeur dimension cellule lors du sortable )
on sérialise tous les inputs après l'utilsation de sortable on mets dans une variable data et on l'envoie normalement en ajax tout bête 

$('#tbodyProjects').sortable({
    items: '> tr ',
    update: function(e,ui) {
             i = 0; 
             $('#tbodyProjects>tr').each(function(){
                i++;
        $(this).find('input').val(i);
             });
       data = $('#tbodyProjects>tr>input').fieldSerialize();
       $.ajax({
       url: "<?php echo $this->Html->url(array('controller'=>'projects','action'=>'order')); ?>",
       data:data
       });
       },
     helper: function(e, tr)
  {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index)
    {
      // Set helper cell sizes to match the original sizes
      $(this).width($originals.eq(index).width());
    });
    return $helper;
  }
}).disableSelection();

Dans le controller : 

function admin_order() {
        if($this->RequestHandler->isAjax()) {
                $this->autoRender = false;
                if(!empty($this->request->query 'data' ]'Project'])){
                            foreach($this->request->query 'data' ]'Project'] as $k=>$v){
                                $this->Project->id = $k;
                                $this->Project->saveField('order',$v);
                            }
                }
            }
        return false;
    }

Bien avoir le component request handler en appel 

public $components = array('RequestHandler');
xam1311
Auteur

Bon retentage ajdh en ul/li

<ul id="test">
<?php echo $this->Form->create('Icons',array('url'=>array('controller'=>'Home','action'=>'order'))); ?> 
<?php foreach ($pratique as $k=>$v): ?>
<li><?php echo $this->Form->hidden($v'Icons']'id'],array('id'=>"Icons_".$v'Icons']'id'],'value'=> $v'Icons']'order']));?><a href="#"><?php echo $v'Icons']'title'];?></a></li>
<?php endforeach;
echo $this->Form->end();?>
</ul>

$("#test").sortable({
  items:'li',
  update:function(event,ui){
      i = 0; 
      $('#test li').each(function(){
        i++;
        $(this).find('input').val(i);
      });
 $("#IconsAdminhomeForm").ajaxSubmit({
      success: function() { alert('hooray!'); }, 
      error: function() { alert('boo'); }
      });
    }

    }).disableSelection();

Là par contre ça marche très bien,donc je ne sais pas trop quoi en penser :x, la position de l'input qui sera pas cool, vais tenter de le mettre dans un li dans un tableau on va voir :?

xam1311
Auteur

En fait il suffit que l'input soit dans le TR pour que ça fonctionne plus , si je le sors toutes les lignes sont postés Mais la numérotation n'est plus correcte, vu que l'input n'est plus déplacé avec la ligne TR

xam1311
Auteur

j'ai changé ma mise en page et laissé en ul/li finalement, donc si le coeur vous en dit hésitez pas :P