Drag&Drop + SortSerialize

**Nimothenicefish** · 22/12/2008, 10h55

Bonjour,

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

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
$(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 :

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

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

**Kerod** · 22/12/2008, 14h54

Et la partie HTML ?

**Nimothenicefish** · 22/12/2008, 16h11

toutes mes excuses pour l'oublie

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

**Kerod** · 22/12/2008, 17h04

Je ne vois nulle part la doc sur SortSerialize

**Nimothenicefish** · 22/12/2008, 17h11

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

**Kerod** · 22/12/2008, 17h16

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

**Nimothenicefish** · 22/12/2008, 17h55

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

je peux sauvé ma 2eme liste. Seulement il y a un hic

et oui comme toujours

L'objet que me renvoie le sortSerialize, ne contient jamais le 1er élément de la liste, et ca c'est très ennuyeux

, Existerait-il une autre façon pour envoyé en post toute ma liste complète ?

**Kerod** · 22/12/2008, 17h59

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

**Nimothenicefish** · 22/12/2008, 18h06

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 ?

**Kerod** · 22/12/2008, 18h17

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

**Nimothenicefish** · 22/12/2008, 18h29

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

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

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

**Kerod** · 22/12/2008, 18h55

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

**Nimothenicefish** · 23/12/2008, 10h35

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

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à

**Kerod** · 23/12/2008, 15h05

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

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

Et tout marche parfaitement

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

**Nimothenicefish** · 23/12/2008, 18h26

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

Merci à toi et bonnes fêtes

**Kerod** · 23/12/2008, 18h29

Par contre ton code ne doit pas être valide W3C

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

Drag&Drop + SortSerialize

jQuery

Discussions similaires

Partager

Partager