Drag&Drop + SortSerialize

Version imprimable

Bonjour,

Je souhaite faire du Drag&Drop entre 2 listes. J'y arrive sans problème avec ce code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(
	function () {
		$('div.groupWrapper').Sortable({
						accept: 'groupItem',
						helperclass: 'sortHelper',
						activeclass: 'sortableactive',
						hoverclass: 'sortablehover',
						handle: 'div.itemHeader',
						tolerance: 'pointer',
						//ghosting:true,
						onchange : function ( sorted ) {
						},
						onStart : function(){
							$.iAutoscroller.start(this, document.getElementsByTagName('body'));
						},
						onStop : function(){
							$.iAutoscroller.stop();
							//verifPseudo('rssi');
						}
					}
		);

Mon problème est que je souhaiterais sauvegarder ma 2ème liste avec un sortSerialize que j'incluerais dans le "onchange : function (sorted){}". Seulement voilà impossible de sérialisé ma liste, je récupère rien en POST. J'ai testé avec une seule liste, de faire du drag&drop, de sauvegarder cette même liste et ça marche. Mais quand je veux intégrer ce code sur 2 listes et de vouloir en sauvé qu'une seule, impossible de la sérialisé...
Quelqu'un aurait une 'tite solution ? :?

Le code pour sérialisé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
	serial = $.SortSerialize ( 'sortlist_top' ); 
	// requète Ajax pour l'enregistrement des positions
	$.ajax ( {
			url : "{/literal}{$mh_config.MH_URL}{literal}/core/bricks/dashboard/templates/set_position.php",
			//url : "{/literal}{$mh_config.MH_URL}{literal}/mymobilehealth/index.php?action=brick.dashboard.getWebInterface",
			type : "post",
			data : "serial="+serial.hash+"&userId="+{/literal}{$userId}{literal}
			// Si vous avez besoin d'un feedback de la requête vous
			// pouvez utiliser ces fonctions ci dessous.
			//complete: function(data){alert(data);},
			//success: function(feedback){ $('#data').html(feedback); },
			//error: function(){alert('Erreur lors du déplacement ');}
			});

Merci,
Cordialement, Nimo

22/12/2008, 13h54
Kerod

Et la partie HTML ?

toutes mes excuses pour l'oublie :?

Code:

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
//1ère liste :
<div id="sort1" class="groupWrapper">
<p>&nbsp;</p>
{section name=widget loop=$tblWidget} 
	{foreach name=outer item=contact from=$tabWidgets}		
		{foreach key=key item=item from=$contact}	
			{if $tblWidget[widget]->m_id eq $item}
				<div class='groupItem' id='groupItem'>
					<div style='-moz-user-select: none;' class='itemHeader'>{$tblWidget[widget]->m_title}<a href='#' class='{$tblWidget[widget]->m_id}' <!--onclick='alert(this.parentNode.nextSibling.nodeName);'-->>[options]</a></div>
					<div class='{$tblWidget[widget]->m_id}'>
						{$tblWidget[widget]->getOptionsUI()}
					</div>
				</div>
			{/if}
		{/foreach}
	{/foreach}
{/section}
</div>
 
//2eme liste :
 
<div id="sort3" class="groupWrapper">
<p>&nbsp;</p>
<ul id="sortlist_top" class="ul_style"> 
{section name=widget loop=$tblWidget}
	{foreach name=outer item=contact from=$tabWidgetsUser}		
		{if $tblWidget[widget]->m_id eq $contact.label}
			<li id="{$contact.id}" class="sortable_item">
			<div class='groupItem' id='groupItem'>
				<div style='-moz-user-select: none;' class='itemHeader'>{$tblWidget[widget]->m_title}<a href='#' class='{$tblWidget[widget]->m_id}'>[options]</a></div>
				<div class='toto{$tblWidget[widget]->m_id}'>
					{$tblWidget[widget]->getOptionsUI()}
				</div>
			</div>
			</li>
		{/if}
	{/foreach}
{/section}
</ul>
</div>

C'est le meme code que j'ai déjà mis sur un autre post que tu as du voir ou que tu vas voir ;)
La seralisation pourra se faire sur l'evenement clique sur un bouton...

22/12/2008, 16h04
Kerod

Je ne vois nulle part la doc sur SortSerialize :aie:
22/12/2008, 16h11
Nimothenicefish

SortSerialize fonctionne sur le même principe que serialize. Sauf qu'il renvoie un objet en POST. Cette objet étant ma liste UL identifié par son ID. Après avec l'ajax je redirige vers mon fichier php et je récupère cette objet.
Par la suite je fait une boucle qui va parcourir cette objet, et à chaque tour je vais pouvoir récupérer l'ID de chaque li de ma liste.
Pour plus d'infos voici le l'adresse où j'ai trouvé celà ;)
Mais le problème ne viens pas de là. Dès que je rend mes 2 listes drag&dropables entres elle, il m'est impossible de sérialisé mon ul de la 2eme liste :(
22/12/2008, 16h16
Kerod

Bon...

Et si tu rendais les listes sortable séparément. Comme tu as pu le voir dans l'autre sujet.

S'il le faut reprend le code qui y est donné.
Question: Toutes les options en as tu besoin ? Si non, pourquoi ne pas utiliser cette fonction sortable( "serialize", options )

Enfin je te signale que dans le post que tu as donné ça marche pas non plus :aie:
22/12/2008, 16h55
Nimothenicefish

Pour info ça marche dans mon autre post ^^ enfin du moin pour faire du drag&drop entre 2 listes qui sont en faites des div.
Sinon je viens à l'instant de tester avec 2 listes UL Li et le "connectWith: ["#idDeLaListeASeConnecter"]," et devine quoi ? CA MARRRCHE !!! :D je peux sauvé ma 2eme liste. Seulement il y a un hic :cry: et oui comme toujours :aie:
L'objet que me renvoie le sortSerialize, ne contient jamais le 1er élément de la liste, et ca c'est très ennuyeux 8O, Existerait-il une autre façon pour envoyé en post toute ma liste complète ?
22/12/2008, 16h59
Kerod

Je parlais pas du post sur developpez.com mais celui donné dans le lien ;)

Même chose : code etc... Même un zip complet avec fichier basique PHP ce serait top ;)
22/12/2008, 17h06
Nimothenicefish

bah j'aimerais bien seulement ce n'est pas possible car j'utilise smarty le moteur de templates et qu'il te manquera plein plein de fichier pour pouvoir tout tester par la suite. Autrement dit tu as besoin de tout mon projet qui fait bien 137Mo et quelques 15000 fichiers, tu risque de t'y perdre en plus ^^
Ce que je peux faire c'est t'envoyé uniquement les 2 fichiers où je travaille dessus mais tu ne pourras pas testé leurs validités :/ je fait quoi als ? je t'envoie ou en reste à écrire des bouts de code ici ? :?
22/12/2008, 17h17
Kerod

Poste le code ici PHP et cie. Puis le résultat obtenu, on verra ce que l'on peut faire

Alors le code du fichier .tpl (le template) :

Code:

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
{literal}<script type="text/javascript">
function sendList() {
	serial = $.SortSerialize ( 'sortlist_top' ); 
	// requète Ajax pour l'enregistrement des positions
	$.ajax ( {
			url : "{/literal}{$mh_config.MH_URL}{literal}/mymobilehealth/index.php?action=brick.dashboard.setPosition",
			type : "post",
			data : "serial="+serial.hash+"&userId="+{/literal}{$userId}{literal}
			});
};
 
$(document).ready(
		$( "#sortlist_left" ).Sortable( {
			connectWith: ["#sortlist_top"],
			accept : 'sortable_item',
			helperclass: 'sortHelper',
			activeclass: 'sortableactive',
			hoverclass: 'sortablehover',
			tolerance: 'pointer',
			axis : 'vertically',
			opacity : 0.6,
		});
		$( "#sortlist_top" ).Sortable( {
			connectWith: ["#sortlist_left"],
			accept : 'sortable_item',
			helperclass: 'sortHelper',
			activeclass: 'sortableactive',
			hoverclass: 'sortablehover',
			tolerance: 'pointer',
			axis : 'vertically',
			opacity : 0.6,
		});
	}
); 
{/literal}</script>
 
<h1 class="pagetitle">My Homepage</h1>
<!-- CONTENT -->
<div class="contenu">
	<div id="sort1" class="groupWrapper">
	<p>&nbsp;</p>
	<ul id="sortlist_left" class="ul_style"> 
	{section name=widget loop=$tblWidget} 
		{foreach name=outer item=contact from=$tabWidgets}		
			{foreach key=key item=item from=$contact}	
				{if $tblWidget[widget]->m_id eq $item}
				<li id="{$contact.id}" class="sortable_item">
					<div class='groupItem' id='groupItem'>
						<div style='-moz-user-select: none;' class='itemHeader'>{$tblWidget[widget]->m_title}<a href='#' class='{$tblWidget[widget]->m_id}' <!--onclick='alert(this.parentNode.nextSibling.nodeName);'-->>[options]</a></div>
						<div class='{$tblWidget[widget]->m_id}'>
							{$tblWidget[widget]->getOptionsUI()}
						</div>
					</div>
					</li>
				{/if}
			{/foreach}
		{/foreach}
	{/section}
	</ul>
	</div>
</div>
 
<p class="titre">My HOMEPAGE</p>
<div class="contenu">
	<div id="sort3" class="groupWrapper">
	<p>&nbsp;</p>
	<ul id="sortlist_top" class="ul_style"> 
	{foreach name=outer item=contact from=$tabWidgetsUser}
		{section name=widget loop=$tblWidget}
			{if $tblWidget[widget]->m_id eq $contact.label}
				<li id="{$contact.id}" class="sortable_item">
				<div class='groupItem' id='groupItem'>
					<div style='-moz-user-select: none;' class='itemHeader'>{$tblWidget[widget]->m_title}<a href='#' class='{$tblWidget[widget]->m_id}'>[options]</a></div>
					<div class='toto{$tblWidget[widget]->m_id}'>
						{$tblWidget[widget]->getOptionsUI()}
					</div>
				</div>
				</li>
			{/if}
		{/section}
	{/foreach}
	</ul>
	</div>
</div>
 
<script>
	//C'est du jquery, ca permet de placer du code html dans une div dont l'id est actionsBox. C'est ici qu'est placer le lien pour sauvé la liste
	{literal}${/literal}("#actionsBox").html("<a id='save' class='bouton Benregistrer' href='#' onClick='javascript:sendList()'>enregistrer</a>");
</script>

et la fonction setPosition dans le fichier PHP :

Code:

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
function setPosition(){
	$db = $this->m_core->m_con;
	//je récupère ici la liste envoyé en POST
  	$sortlist = $_POST [ 'sortlist_top' ];
 
	$userId = $_SESSION['user']->id;
	$position = $db->get_row("SELECT MAX(position) as max FROM mbr_widget_members WHERE members_id='".$userId."'");
	$maxPosition=$position->max;
	$variable = "";
	for($i=1;$i<7;$i++){
		$contain = false;
		for($j=0;$j<5;$j++){
			if($i==$sortlist[$j]){ $contain=true;}		
		}
		//on récupère l'identifiant du widget en 1ere position, se trouvant pas dans $sortlist
		if($contain==false){ $variable=$i;}
	}
 
    for ($i = 0 ; $i < count ( $sortlist ) ; $i++) {
		//on récupère l'id du widget et on verifie s'il est présent dans la table, sinon on l'ajout
		$id = $db->get_row("SELECT id FROM mbr_widget_members WHERE widget_id='".$sortlist[$i]."' AND members_id='".$userId."'");
		$db->query("update mbr_widget_members set position='".($i + 2)."' where widget_id = '".$sortlist[$i]."' AND members_id = '".$userId."' AND widget_id!='".$variable."'");
    }
	$db->query("update mbr_widget_members set position=1 where widget_id='".$variable."' AND members_id='".$userId."' ");
  }

J'espère que cela sera suffisant pour comprendre la nature du problème et comment le résoudre surtout :?
Merci dans tout les cas :)

22/12/2008, 17h55
Kerod
Il manque quelque chose :
- La liste test à sérialiser
- Le résultat du print_r de ta variable PHP qui récupère le résultat
23/12/2008, 09h35
Nimothenicefish

ma liste que je souhaite serialize est sortlist_top pas test je vois pas où tu la vois O_o
et le print_r je vois pas non plus de quoi tu veux parler ...
Et tout marche parfaitement :king: j'ai d'ailleurs trouvé solution à mon problème où ma serialisation ne prennant pas en compte le 1er élément de ma liste
Lors de la serialisation écrire :
data : serial.hash et non data : "serial="+serial.hash : il n'y a pas besoin de rajouter le nom d'une variable pour serialize la liste. Son nom sera celui de l'id de la liste.
Voilà :)
23/12/2008, 14h05
Kerod

Citation:

ma liste que je souhaite serialize est sortlist_top pas test je vois pas où tu la vois O_o

Je n'ai pas dit que ta liste s'appelle test mais de nous fournir le résultat de ta liste une fois executé par le navigateur donc ta liste test (en italique qui précise que c'est celle qui te donne le résultat de la sérialisation). Enfin bref...

Citation:

et le print_r je vois pas non plus de quoi tu veux parler ...

print_r est une fonction PHP qui permet d'afficher en brut, et ce quelque soit son type, le contenu de toutes variables. Elle peut t'aider dans tes tests ;)

Citation:

Et tout marche parfaitement :king: j'ai d'ailleurs trouvé solution à mon problème où ma serialisation ne prennant pas en compte le 1er élément de ma liste
Lors de la serialisation écrire :
data : serial.hash et non data : "serial="+serial.hash : il n'y a pas besoin de rajouter le nom d'une variable pour serialize la liste. Son nom sera celui de l'id de la liste.
Voilà :)

Dans ce cas c'est résolu
23/12/2008, 17h26
Nimothenicefish

Le resultat que me renvoie la serialisation est une variable du nom de sortist_top. Cette variable est un tableau contenant les id de chaque li se trouvant dans la liste. j'utilise firebug donc je peux voir exactement ce que j'ai en post. Il ya pas de soucis de ce coté là et tout marche super :D

Merci à toi et bonnes fêtes :king:
23/12/2008, 17h29
Kerod

Par contre ton code ne doit pas être valide W3C :aie:

Les id commençant par des chiffres ne sont pas trop autorisés