11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,
J'utilise Symfony un framework PHP pas mal fait, et j'ai un problème avec le drag'n'drop et l'AJAX.
Je me permets de poster sur ce forum suite à un post qui ne m'a pas vraiment donné la solution (mais une orientation tout de même) sur le forum de symfony http://www.symfony-project.com/forum/index.php/t/6361/.
Après étude des messages l'erreur se situe au niveau de prototype.js et ce quand j'utilise les fonctions prototype draggable et droppable comme suit.
 
<ul id="secteur_index">
  <li id="s_2" class="container">
    1. Recherche-Etudes  
    <ul>
      <li id="ss_3" class="content">
        1.1 Centres de recherches        
      </li>
      <script type="text/javascript">
        //<![CDATA[
          new Draggable('ss_3', {revert:1})
        //]]>
      </script>    
      <li id="ss_4" class="content">
        1.2 Cabinets d'&#65533;tudes et de consultation        
      </li>
      <script type="text/javascript">
        //<![CDATA[
          new Draggable('ss_4', {revert:1})
        //]]>
      </script>    
    </ul>
  </li>
  <script type="text/javascript">
    //<![CDATA[
      Droppables.add('s_2', {onDrop:function(element){new Ajax.Updater('secteur_index', '/secteur/move/secteur_id/2', {asynchronous:true, evalScripts:true, parameters:'id=' + encodeURIComponent(element.id)})}})
    //]]>
  </script>
</ul>

En claire quand un droppable recoit un draggable la liste entière est rafraîchi via Ajax ... Le symptôme est le suivant : tout se passe bien FireFOx, parcontre ie6 & 7 ne gère plus les draggables après un rafraîchissement de la liste en AJAX.
J'ai tenté de détailler la déclaration CSS comme le suggère la dernière réponse à mon post sur le forum de symfony, mais sans succès ...
Si quelqu'un à une quelconque suggestion (autre que d'abandonner IE Smiley rolleyes ) je vous serez trés reconnaissant.
Modifié par mazenovi (21 May 2007 - 10:05)
Dans la série : 'a mort IE !', on peut pas trouver meilleur exemple Smiley biggrin
En tout cas, je compatie !

Pour essayer de répondre à ton problème (plutot trouver une piste), je sais que j'ai eu des soucis de raffraichissement et qu'en prenant la dernière mouture de prototype.js (1.5) le problème de raffraichissement avait été réglé.

Autrement, si tu as toujours le soucis, peux-tu poster un peu plus de code sur l'appellant de ton code drag'n drop ?

Bon courage !
Bon j'ai esssayé de mettre à jour prototype.js 1.5.1 et scriptaculous avec la 1.7.0 et même avec la 1.7.1 beta2 ... mais rien y fait!

Pour le code c'est du symfony donc il n'y a pas vraiment lieu de le poster ici. Simplement l'idée est de gérer une arborescence de secteur (de rang 1) les secteurs (s_ ) sont des secteurs parents droppable et les sous secteurs sont des secteurs enfants (ss_ ) qui sont draggables ... à chaque fois qu'un droppable recoit un draggable, le secteur parent associé à l'élément draggable est changé pour le droppable sur lequel on l'a glissé. ET la liste toute entière est reconstruite, mise dans une reponse Ajax qui rafraichit la liste génbéral "secteur_index" ...

Après 6 jours de recherche je commence à être à court d'idée. Cette idée de gérer des listes imbriquées via du drag'n'drop me parait trés naturelle, et je m'étonnne de ne pas trouver de réponse à ce problème
Salut,
Je ne connais pas bien Protoype, mais peut-être un sugestion, déja pour plus de clarté tu pourrais regrouper les fonctions js (d'ailleur si tes listes sont plus longues tu pourrais peut-être faire une boucle), Je ne pense pas qu'il y est un intêret a les éparpier à chaques lignes html. Ensuite peut-être qu'il faut rappeler ces fonctions aprés le drop? C'est un peu bourin comme idée mais bon, si ça marche tu peux la reserver à ie...

<ul id="secteur_index">
  <li id="s_2" class="container">
    1. Recherche-Etudes  
    <ul>
      <li id="ss_3" class="content">1.1 Centres de recherches</li>
      <li id="ss_4" class="content">1.2 Cabinets d'&#65533;tudes et de consultation</li>   
    </ul>
  </li>
</ul>
<script type="text/javascript">
//<![CDATA[

   new Draggable('ss_3', {revert:1});
   new Draggable('ss_4', {revert:1});

   Droppables.add('s_2', {onDrop:function(element){
      new Ajax.Updater('secteur_index', '/secteur/move/secteur_id/2', {
            asynchronous:true, evalScripts:true, parameters:'id=' + encodeURIComponent(element.id)
      });
      new Draggable('ss_3', {revert:1});
      new Draggable('ss_4', {revert:1});
   }})

//]]>
</script>

Modifié par matmat (12 May 2007 - 19:39)