Forum d'entraide PHPFrance

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 : Tout sélectionner

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 : Tout sélectionner

<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.

Bonjour, il manque l'essentiel dans ton message : le code javascript que tu utilise pour faire les MOVE (drag & drop) des <li>. Sinon on ne peut pas t'aider.

C'est juste, le voici :

Code : Tout sélectionner

$(document).ready(function() {
	$("#test-list02").sortable({
		handle : '.handle',
		update : function () {
					var order = $('#test-list02').sortable('serialize');
  					$("#info").load("updateDB.php?"+order+"&side=d");
      			}
    });
});

Pour infos innerHTML est capricieux et est buggé sous IE et peut-être ailleurs...
Comme tu utilises jquery pour ton "sortable" pourquoi ne pas utiliser

Code : Tout sélectionner

$('#ReloadThis').html( xhr.responseText );

Forum d'entraide PHPFrance

Problème AJAX - innerHTML?

Problème AJAX - innerHTML?

Re: Problème AJAX - innerHTML?

Re: Problème AJAX - innerHTML?

Re: Problème AJAX - innerHTML?