Discussion :

[Invité]

Bonjour,

Je viens d'intégrer un système qui me permet d'organiser les éléments de mon menu via drag and drop.
Vous trouverez la source sur ce site : Nestable Menu

Bien que cela fonctionne en l'état, je constat que dés l'ouverture de la page, le script de mise a jour s’exécute alors qu'aucune action n'a été faite.

Comment faire pour déclencher la fonction "updateOutput" uniquement lorsqu'un changement a été effectué ?

Merci de votre aide

[SpaceFrog]

sans voir ton code ....

Attend je passe une annonce vite fait

Developpez recherche voyants devin et autres extralucides
Mission:
Deviner les codes non postés afin de solutionner les posts des membres...
Salaire: Bénévolat

Là ! y'a plus qu'à attendre ...

[Invité]

Je pensais que le lien vers la source suffisant puisque que c'est la même chose.
Ceci dit voici le code qui je l’espère vous permettra de m'aider.

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
$(document).ready(function()
{
	/* The output is ment to update the nestableMenu-output textarea
	 * So this could probably be rewritten a bit to only run the menu_updatesort function onchange
	*/
 
	var updateOutput = function(e)
	{
		var list   = e.length ? e : $(e.target),
		output = list.data('output');
		if (window.JSON) {
			output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
			menu_updatesort(window.JSON.stringify(list.nestable('serialize')));
		} else {
			output.val('Attention : Le support JSON n\'est pas pris en charge.');
		}
	};
	// Active Nestable
	$('#nestableMenu').nestable().on('change', updateOutput);
	// Sortie initiales des données sérialisées.
	updateOutput($('#nestableMenu').data('output', $('#nestableMenu-output')));
	$('#nestable-menu').on('click', function(e)
	{
		var target = $(e.target),
		action = target.data('action');
		if (action === 'expand-all') {
			$('.dd').nestable('expandAll');
		}
		if (action === 'collapse-all') {
			$('.dd').nestable('collapseAll');
		}
	});
});

[SpaceFrog]

simple question de déroulement, tu es passé à coté de l'utilité de

Code :

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

	$(document).ready(function()

le ready se lance lorsque tous les éléments de la page sont instanciés
et DANS ton ready je vois :

Code :

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

1
2
// Sortie initiales des données sérialisées.
		updateOutput($('#nestableMenu').data('output', $('#nestableMenu-output')));

il semblerait que cette ligne fasse la mise a jour ?

[Invité]

en effet cela semble faire la mise à jour.

Code :

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

1
2
// Sortie initiales des données sérialisées.
updateOutput($('#nestableMenu').data('output', $('#nestableMenu-output')));

et ceci affiche dans une div le message provenant du fichier ou se trouve le script de mise à jour.

Code :

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

$('#nestableMenu-output')

Mais comment faire pour déclencher la mise a jour uniquement s'il y a modification.

Dsl, mais je ne suis pas très a laisse avec le JS et Jquery.

[SpaceFrog]

essaye juste de commenter la ligne ???

[Invité]

J'ai déjà tester de commenter la ligne et voici mes conclusions :

- Pas de mise à jour au chargement.
- Mauvais comportement du système de positionnement des éléments du menu.
- Pas de mise à jour après modification

[SpaceFrog]

essaye juste

Code :

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

$('#nestableMenu').data('output', $('#nestableMenu-output'));

[Invité]

Génial, ça marche.

Deux choses :
1 - pourquoi le fait d'enlever "updateOutput" change tout le comportement ?
2 - Est il possible suite à la mise a jour de rafraichir la page ?

[SpaceFrog]

updateOuput comme son nom l'indique fait une mise à jour
Comme elle est appelée DANS le ready elle fait la mise à jour au chargement
cependant il faut tout de même initialiser les choses et en particulier au niveau des data attribués à tes objets ... donc il faut attribuer le bon data DANS le ready.

Pour ce qui est du rechargement de la page ...
il semblerait que menu_updatesort fasse une requete ajax
maintenant je ne sais pas quel traitement est effectué coté serveur, mise à jour de table? de variables de sessions .
Dans ces conditions, je ne sais pas ce qu'un rechargement de page aura comme conséquences (mise a jour ou pas )

[Invité]

Merci pour ces infos, je continu mon apprentissage.

Pour le rechargement, voici l'idée.
Je souhaiterai afficher pour chaque point de menu le nb d'articles total par branche d'arborescence.
En gros dans un point de menu donnée, si j'ai 1 articles a ce point de menu et 2 articles dans les trois sous menu qui lui sont rattaché ça fera (pour ce point de menu là) 1 + (2*3) = 7 articles liés.

Donc si je ne rafraichi pas la page suite à modification le nb d'articles ne sera pas bon.

Le fichier qui traite les infos envoyé en ajax fait uniquement un update de la DB.

[SpaceFrog]

Donc si je ne rafraichi pas la page suite à modification le nb d'articles ne sera pas bon.

Qu'est ce qui t'empêches de le modifier sur le retour de la mise à jour ?

[Invité]

C'est que je sais pas comment m'y prendre.
En plus le menu est créé via une fonction récursive et le nb d'article est calculé pendant la construction du code.

[SpaceFrog]

il suffti de recupérer le nombre de nodes des articles ...

montre un extrait du code source avc le structure html au niveau des articles