[Résolu] jquery UI - et DOM avec AJAX par nakwa - page 1

Bonjour

,

J'utilise pour la premiere fois jquery UI pour annimer une application AJX sur la quelle je travaille.

Le script AJAX qui permet de charger du contenu (une page dynamique "controller.php" n'utilise pas jquery ni aucune librairie.

Jquery fonctionne tres bien par exemple pour rendre draggable un div sur l'index.php.

Mon probleme c'est que quand je charge un nouveau div contenu dans controller.php via le script AJAX, jquery semble ne pas s'y aplliquer..

Voici le code qui sera surement plus clair que mes explications :

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/jquery/jquery-ui-1.8.6.custom.css" rel="stylesheet" />
<style>
	.draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script type="text/javascript" src="javascript/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery/jquery-ui-1.8.6.custom.min.js"></script>

function nakwa(command, anchor, post)
{
	//...... script ajax fonctionnel
	var response = httpReqObjet.responseXML;

	if (response.getElementsByTagName('view')[i])
	{
		var view = response.getElementsByTagName('view')[i].firstChild.data;
		var i = 1;
		var new_element = document.createElement('div');
		while (document.getElementById(target+'_child_'+i))
			i++;
		new_element.setAttribute('id', target+'_child_'+i);
		new_element.setAttribute('itemid', id);
		document.getElementById("wins").appendChild(new_element);
		document.getElementById(target+'_child_'+i).innerHTML = view;
	}
}
</script>

<script type="text/javascript">
	$(function() {
		$(".draggable").draggable();
	});
	//{handle: ".win-title"}
</script>
</head>
<body>
	<div class="draggable ui-widget-content">
		<p>ce div est draggable sans pb</p>
	</div>
	<div id="wins">
	</div>
</body>
</html>

controller.php

<data>
	<target><![CDATA[window]]></target>
	<view><![CDATA[	
		<div class="draggable ui-widget-content">
		<p>ce div n'est pas draggable :(</p>
		</div>
	]]></view>
</data>

Comme dit dans le code, le premier div fonctionne sans probleme est jquery le rend effectivement draggable.
Le seconde par contre, chargé via AJAX, ne fonctionne pas.

Est-ce un problème du a un nom rechargement dynamique du DOM ? Est-ce que parceque je n'utilise pas jquery pour mes requetes ajax ?
Une solution pour faire fonctionner ca ?

Merci d'avance a vous pour avoir pris le temps de me lire !

nakwa

10 novembre 2010 à 17:44:20

Golmote

10 novembre 2010 à 17:48:37

Il faut que tu relances le code du draggable après chaque mise à jour du DOM.

10 novembre 2010 à 17:52:39

comment ca ?

a la fin de mon script ajax je refait " $draggable").draggable();" ?
ou carrement tout ? "$(function() { $(".draggable").draggable() }); "
(excuse moi golmote je ne suis pas tres a l'aise avec jquery ^^)

je viens de trouver la fonction .live mais je ne comprend pas vraiment son utilité ?
est ce que ca a un lien avec mon probleme ?

10 novembre 2010 à 18:00:40

$(".draggable").draggable();

(Pas besoin de remettre le $(function(){}) vu que la page principale est déjà chargée.)

La fonction live() résoudrait ton problème si tu avais accès aux ajouts d'événements... Mais ça consisterait à modifier le code source de draggable... Et je ne pense pas que tu aies envie de t'y atteler.

jquery UI

et DOM avec AJAX

jquery UI

Supprimer

Modérer

Signaler le message aux modérateurs