drag and drop suite a un appel ajax

horakiel
Invité n'ayant pas de compte PHPfrance

18 mars 2014, 11:42

Bonjour,
Voici mon problème: sur une page je récupère une liste d'adresses mails en fonction du nom de la liste sur laquelle j'ai cliqué (le traitement se passe sur une autre page et on affiche le résultat via un innerhtml).
Le soucie c'est que lorsque je récupère mon code, je n'ai plus accès a la fonctionnalité de drag and drop des noms de la liste alors que la sourie m'indique bien que ces éléments sont déplacables...

Voici le code la page où on récupère:
<legend>Liste des Adresse mail </legend>
<script type="text/javascript">
var objRequete = new XMLHttpRequest();
function info(param)
{
var ObjSel=document.getElementById(param);

objRequete.open('get','traiteListe.php?nomliste='+ObjSel.title,true);
objRequete.onreadystatechange = fonction_Retour_Reponse;
objRequete.send(null);
return true;
}
function fonction_Retour_Reponse()
{
if (objRequete.readyState==4)
{
document.getElementById("T1").innerHTML=objRequete.responseText;
}
}
</script>
<div id="T1">
</div>

page de traitement
<?php
session_start();
require_once("connexion.php");
$conn1=connexionBDD();
require_once("fonctionBDDM.php");
$a=$_GET["nomliste"];
$expediteur=$_SESSION["S_autorisation"];
$sql= Chercher($expediteur, $a, $conn1);
$resu = $sql->fetchAll();
echo '<ul id="liveDragWordList">';
foreach ($resu as $ligne) //pour chaque ligne
{
$Con=$ligne["mail"];
echo '<li class="ui-draggable">'.$Con.'</li>';
}
echo '</ul>';
?>

Code drag and drop (sur la page principale)
<script> //DRAG AND DROP
$(document).ready( function() {
$("#liveDragWordList li").draggable({helper: 'clone'}); //Clone l'element a deplacer
$(".txtDropTarget").droppable({
accept: "#liveDragWordList li", //defini l'id des element qui acceptent le drop
drop: function(ev, ui) { //fonction definissant l'action a effectuer au drop
$(this).insertAtCaret(ui.draggable.text());
}
});
});
$.fn.insertAtCaret = function (myValue) {
return this.each(function(){
this.value += myValue;
this.focus(); //le positione au debut de la zone
});
};
</script>

Voilà voilà, toute aide est la bienvenue

Eléphant du PHP | 83 Messages

18 mars 2014, 13:01

bonjours,

Si j'ai bien compris ton problème est bel et bien classique et je t’avoue que j'avais longtemps galérer avec ce type de problèmes.

Venons a la solution:

Explication :

Ton code JS est charger dès le chargement de la page donc avant d'ajouter tes éléments avec ajax ton code Drag and Drop est déjà présent donc il a sa propre vison du DOM, maintenant en chargeant les éléments avec ajax et on les plaçant dans le DOM le code Drag and Drop ne peut les reconnaitre car il à bel et bien sa propre vision du DOM, c'est une conclusion que j'ai tirés c'est pas une explication académique.

la solution :

essai de rajouter le code du drag and drop dans l'appel ajax pour qu'il recharge le dom avec les nouveaux éléments, votre code ressemblera a quelque chose comme :

[javascript]
...
if (objRequete.readyState==4)
{
document.getElementById("T1").innerHTML=objRequete.responseText;


$("#liveDragWordList li").each(function(){
$(this).draggable({helper: 'clone'}); //Clone l'element a deplacer
$(".txtDropTarget").droppable({
accept: "#liveDragWordList li", //defini l'id des element qui acceptent le drop
drop: function(ev, ui) { //fonction definissant l'action a effectuer au drop
$(this).insertAtCaret(ui.draggable.text());
}
});
});

$.fn.insertAtCaret = function (myValue) {
return this.each(function(){
this.value += myValue;
this.focus(); //le positione au debut de la zone
});
};

}
...

[/javascript]

bon je ne sait pas si le code précèdent est opérationnel car en fait j'utilise JQuery pour ce genre de situation, mais j'ai voulus te montrer l'idée générale a toi de l'adaptè a ton code.

Bon Codage :)

horakiel
Invité n'ayant pas de compte PHPfrance

18 mars 2014, 13:16

re-bonjour,

Merci pour le coup de main, je suis vraiment plus loin, ton code fonctionne cependant il me crée des "clones" dans le champ drop (je déplace bien un nom, mais il apparait en 4 fois "collés" les uns aux autres après l'appel de l'ajax)

horakiel
Invité n'ayant pas de compte PHPfrance

18 mars 2014, 13:21

Dernier post j'ai trouvé le problème:
dans le code qui ré-génère le drag and drop il faut supprimer la ligne qui ré-écrit:
====> $(this).insertAtCaret(ui.draggable.text());
Et voilà adieu les doubles.

Un grand merci a toi !

Eléphant du PHP | 83 Messages

18 mars 2014, 13:38

pas de quoi mon ami, c'est le but d'un forum :)
IE : n'oublie pas le [RESOLU] et de venir faire un tour sur mon blog : www.nettuto.com

Bon Codage