Discussion :

[maysa]

Bonjour,

j'ai un petit soucis, je veux pouvoir déplacer les objets d'une liste qui est alimentée en ajax .
j'ai donc 3 fichiers :
test.html (avec le code html)
test.php (avec le code php qui va chercher les données dans la BDD)
et test.js (pour le code ajax)

code html :

dedans j'ai mon lien vers prototype et scripta (là pas de soucis)
j'ai aussi cesi (mais dois je le mettre ici ??

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<script language="javascript" src="../../scripts/test.js"></script>
<script language="javascript" src="../../lib/prototype.js"></script>
<script language="javascript" src="../../lib/scriptaculous.js"></script>
<script> language="javascript">
Sortable.create('contenuBloc',
	{tag:'li',
        onUpdate:function(){
	    new Ajax.Request('/ajax/updateList.php',
		{
		method: 'get',
		parameters: { data: Sortable.serialize('contenuBloc') }
		}
		);
	    }
	});
</script>
 <tr>
   	<td><table width="709" border="0">
         <tr>
            <th width="275" scope="col">Contenu Actuel </th>
            <th width="424" scope="col"><a href="javascript:afficheListe();">(Remplir automatiqument maintenant]</a></th>
         </tr>
         <tr>
            <th colspan="2" scope="row">&nbsp;</th>
            </tr>
      </table></td>
   </tr>
   <tr>
   	<td><div id="contenuBloc"></div></td>
   </tr>

afficheListe() se trouve dans test.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function alimenteBloc(){ 
    var url = '/php/test.php';
	 var params = 'idBloc='+$F('idBloc')
	 				+'&titre='+$F('titre')
					+'&chapeau='+$F('chapeau')+'&titreLien='+$F('titreLien')
					+'&lienUrlComplementaire='+$F('lienUrlComplementaire')
					+'&contenu='+$F('contenu')
					+'&nbMaxi='+$F('nbMaxi')
					+'&remplissageAlgo='+$F('remplissageAlgo')
					+'&remplissageParam='+$F('remplissageParam');						
 
	var myAjax = new Ajax.Request(
			url, 
			{
				method: 'get', 
				parameters: params, 
				onComplete: handleAddToContenu,
				asynchronous: false
			});
}
 
function handleAddToContenu(requete){
 
	var xmlData = requete.responseText;
	$('contenuBloc').innerHTML = xmlData;
       }
 
 
 
}

fichier test.php (que test.js appelle)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
if(count($data>0))
	{ echo '<ul id="contenuBloc">';
		foreach ($data as $key=>$livre)
		{
			echo "<li id='$id'>titre </li>";
		}
		echo '</ul>';
	}

Donc voilà, j'ai bien ma liste qui s'affiche correctement, mais quand je clique sur un élément pour le déplacer ça ne fonctionne pas.
Si je prends le code source de cette liste et que je le mets dans un fichier test.hmtl, ça fonctionne correctement, je peux déplacer les éléments.

Que dois je faire pour que ça fonctionne ?

merci d'avance ..

[gwyohm]

Salut,

afficheListe c'est alimenteBloc ?

Je pense que tes sortables ne se créent pas parce que après ton appel ajax, il n'y a rien qui les initialise...

essaye comme ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function alimenteBloc(){ 
    var url = '/php/test.php';
	 var params = 'idBloc='+$F('idBloc')
	 				+'&titre='+$F('titre')
					+'&chapeau='+$F('chapeau')+'&titreLien='+$F('titreLien')
					+'&lienUrlComplementaire='+$F('lienUrlComplementaire')
					+'&contenu='+$F('contenu')
					+'&nbMaxi='+$F('nbMaxi')
					+'&remplissageAlgo='+$F('remplissageAlgo')
					+'&remplissageParam='+$F('remplissageParam');						
 
	var myAjax = new Ajax.Request(
			url, 
			{
				method: 'get', 
				parameters: params, 
				onComplete: handleAddToContenu,
				asynchronous: false
			});
}
 
function handleAddToContenu(requete){
	
	var xmlData = requete.responseText;
	$('contenuBloc').innerHTML = xmlData;
        initSortable();
       }
	
function initSortable() {
Sortable.create('contenuBloc',
	{tag:'li',
        onUpdate:function(){
	    new Ajax.Request('/ajax/updateList.php',
		{
		method: 'get',
		parameters: { data: Sortable.serialize('contenuBloc') }
		}
		);
	    }
	});
}


} // accolade en trop issue d'un copié/collé ?

Ce qui m'étonne c'est que ca fonctionne en mettant ton code html en dur... le code javascript initialisant les Sortable n'est-il pas après le HTML de la div d'id contenuBloc ?

[maysa]

Merci pour ta réponse..
oui afficheliste c'est alimenteBloc (je change pour tester)..
Finalement j'ai trouvé une parade qui fonctionne, c'est à dire, j'affiche les données via php et non en ajax..

oui le script est à la fin du code html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
{literal}
<script>
 
Sortable.create("contenuBloc", {tag:"tr"});
 
 
</script>
 
 
{/literal}
</td></tr></table>
 
</div>
</body>

[maysa]

super nickel !!!

je n'avais pas vu ton rajout de code ce matin (j'étais en phase débug depuis 5h)

Et en fait je viens de l'ajouter et ça fonctionne !!

merci !!

En fait oui les accolades en trop à cause du copier coller