Problème AJAX - innerHTML?

[waxouse]

Bonjour à tous,

Je suis opposé à un problème face auquel j'ai eu beau me retourner les méninges, je n'ai pas trouvé la solution.

Je vous l'explique:

j'ai une page index.php sur laquelle j'utilise une bibliothèque javascript pour faire du drag and drop sur une liste avec des "<li>". Cela fonctionne très bien si je remplis mon code dans cette page index.php.

En revanche, lorsque j'utilise EXACTEMENT le même code avec de l'ajax pour remplir cette liste à l'aide d'une page "update.php", la liste s'affiche de la même manière, elle amène exactement ce qu'il faut mais je n'arrive pas à faire mon drag and drop dessus.

Voici mon code ajax:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
var xhr=null;
 
	if (window.XMLHttpRequest) { 
		xhr = new XMLHttpRequest();
	}
	else if (window.ActiveXObject) 
	{
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
 
	xhr.open("GET", "update.php", true);
 
	xhr.onreadystatechange = function() {
		if(xhr.readyState == 4 && xhr.status == 200) {
 
			document.getElementById('ReloadThis').innerHTML = xhr.responseText;
 
		}
	}
	xhr.send(null);

Je suppose actuellement que l'erreur viendrait d'une mauvaise interprétation des balises html avec "innerHTML".


Voici ce que je dois importer de la page "update.php" :

Code :

1
2
3
4
5
6
7
8
9
10
 
<div id="contentRight">
	<ul id="test-list02">
		<li id="listItem_1"><img src="arrow.png" alt="move" width="16" height="16" class="handle" />Titanic </li>
		<li id="listItem_2"><img src="arrow.png" alt="move" width="16" height="16" class="handle" />Tous les matins du monde</li>
		<li id="listItem_3"><img src="arrow.png" alt="move" width="16" height="16" class="handle" />Pearl Harbor</li>
		<li id="listItem_4"><img src="arrow.png" alt="move" width="16" height="16" class="handle" />C'est arrivé près de chez vous</li>
		<li id="listItem_5"><img src="arrow.png" alt="move" width="16" height="16" class="handle" />Forest Gump</li>
	</ul>
</div>

Je rappelle que quand je mets le contenu de "update.php" directement dans "index.php", j'arive à faire un drag and drop sur chaque "<li>" de manière séparée. Si je l'importe depuis "update.php" via l'ajax, je n'arrive à faire du drag and drop que sur un seul "<li>", peut importe lequel, tous les "<li>" viennent en un seul bloc.

QUelqu'un peut il me trouver la solution à mon problème?

UN TOUT GRAND MERCI D'AVANCE.

PS: je précise que je dois absolument l'amener en ajax depuis une autre page ce code.

[RomainVALERI]

N'as-tu pas un certain nombre de fonctions qui mettent en place le drag and drop au moment du chargement de la page ?

Si oui, il est bien possible que les éléments rapatriés via ajax, n'étant pas présents au moment du chargement initial, ne soient pas correctement initialisés.

Montre-nous comment le drag and drop se fait chez toi pour en avoir le coeur net.

[waxouse]

En effet, c'est + facile avec ceci :-)

Un tout grand merci déjà pour votre réponse, c'est très gentil à vous :-)

Code :

1
2
3
4
5
6
7
8
9
10
 
$(document).ready(function() {
   $("#test-list02").sortable({
      handle : '.handle',
      update : function () {
               var order = $('#test-list02').sortable('serialize');
                 $("#info").load("updateDB.php?"+order+"&side=d");
               }
    });
});

[RomainVALERI]

Je ne fais pas de jQuery mais il semble que je n'avais pas tort : ton traitement de mise en place du drag and drop se fait sur $(document).ready, donc de nouveaux éléments ajoutés à la page plus tard ne seront pas pris en compte.

As-tu essayé d'ajouter, dans la callback (à la suite de la récupération du responseText), un appel à cette fonction, non plus sur $(document).ready, bien sûr, cette fois, mais directement sur les éléments récupérés. Il faudra peut-être d'ailleurs "retarder" de quelques millisecondes l'exécution de cette partie, le temps pour le navigateur d'impacter le DOM suite à ton innerHTML. Cela dit, les choses seraient probablement plus "propres" et plus claires en insérant tes éléments par le DOM, mais bon

[waxouse]

Non, je n ai pas essayé. Mais je vais opter pour le Dom. Au fait, je dois faire appel à ma page update.php toutes les 0,5 secondes pour mettre à jour. As tu une idée de comment agencer ça en DOM car effectivement, cela me semblerait bien plus propre. Encore un tout grand merci d' avance !

[RomainVALERI]

Code javascript :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var titres = ["Titanic", "Tous les matins du monde", "Pearl Harbor", "C'est arrivé près de chez vous", "Forest Gump"];
var elem_div = document.createElement("DIV");
elem_div.id = "contentRight";
var elem_ul = document.createElement("UL");
elem_ul.id = "test-list02";
for (var i = 0, iMax = titres.length; ++i) {
	var elem_li = document.createElement("LI");
	elem_li.id = "listItem_" + i;
	var elem_img = document.createElement("IMG");
	elem_img.src = "arrow.png";
	elem_img.alt = "move";
	elem_img.width = 16;
	elem_img.height = 16;
	elem_img.className = "handle";
	elem_li.appendChild(elem_img);
	elem_li.appendChild(document.createTextNode(titres[i]));
	elem_ul.appendChild(elem_li);
}
elem_div.appendChild(elem_ul);

...puis il ne restera qu'à rattacher (par appendChild) le fragment produit dans ta page, là où tu le veux.