Discussion :

[patou247]

Bonjour,

je développe actuellement une petite application intranet pour la gestion des appels, commandes, retours sav,etc pour ma société (maintenance informatique) le tout en php/mysql/javascript(ajax)

J'ai donc un listing des appels avec des entêtes fixes. L'idée est de cliquer sur l'entête de la colonne pour rafraîchir le contenu (en ajax donc) et le trier de manière croissante ou décroissante, ce qui fonctionne parfaitement si j'utilise une fonction pour chaque entête.

Code :

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

1
2
3
4
5
window.addEvent('domready', function() {
	$('entete').addEvent('click', function(event) {
		...
	});
});

Si j'utilise une fonction du type

Code :

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

1
2
3
4
5
6
7
8
9
 
function trier(id)
{
window.addEvent('domready', function() {
	$(id).addEvent('click', function(event) {
		...
	});
});
}

Cela fonctionne mais uniquement au double click, ce qui ne me convient naturellement pas.

J'ai regardé un peu la documentation mootools et j'ai essayé de la manière suivante :

Code :

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

1
2
			window.addEvent('domready', function() {
				$$('#orderby_ > *').addEvents('click', function(event) {

en donnant évidemment à chaque entete l'id orderby_heure, orderby_appelant...mais bon ça ne fonctionne pas, je doute que je prenne la bonne direction.

Bref j'aurais besoin d'un petit coup de pouce.

En vous remerciant par avance!

[adidas40]

Salut à toi,

J'espère qu'il n'est pas trop tard et que je ne vais pas répondre à côté de la plaque, mais voici l'extrait de la documentation mootools permettant d'assigner quelque chose à plusieurs éléments :

Code :

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

1
2
//Creates an array of all elements and selectors passed as arguments.
$$(myelement1, myelement2, 'a', '#myid, #myid2, #myid3');

Il te suffit donc de faire une fonction qui enverra une URL en précisant l'ID, comme ça tu sauras comment trier ta liste dans la page appropriée à cet effet.

[Nighty]

A ce que je lis des sélecteurs complexes, la syntaxe pour récupérer les éléments ayant un id commençant par orderby_ serait plutôt ressemblante à ça :

Code :

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

1
2
3
4
5
$$('[id^=orderby_]').addEvent('click', function(event) {
   event.preventDefault(); // on désactive le click...
   var id = this.get('id');
   var order = id.substring(8, id.length);
});

Personnellement, si les éléments d'id orderby_* sont des liens, j'utiliserais plutôt un attribut "légal" du html, comme target, ou rel, pour spécifier le champ à trier... au risque de m'attirer les foudres des puristes du html. Il suffirait après d'une classe commune aux liens.

Exemple :

Code :

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

1
2
3
4
5
$$('a.orderby').addEvent('click', function(event) {
   event.preventDefault(); // on désactive le click...
   var order = this.get('target');
   // Requête etc...
});

Personnellement je trouve ça un peu plus élégant... Après chacun fait comme il préfère

Par contre j'avoue ne pas avoir compris tellement la logique de ta fonction trier... En fait je ne vois la logique de créer un évènement onDomReady au sein d'une fonction... erreur de copier coller ?

[patou247]

Salut,

désolé pour le retard et merci pour vos réponses. Entre temps j'ai trouvé la solution mais je n'ai pas eu le temps de venir poster.

Pour ma logique oui c'était stupide de faire un domready dans une fonction^^. Je découvre un peu la logique mootools. Mais ça va après avoir galéré 2/3 jours je commence à comprendre

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
window.addEvent('domready', function()
{
	$$('a[rel=orderby]').each(function(link) {
		link.addEvent('click', function() {
			split = link.get('title').split('::');
			link.set('style', 'background: url({CFG_URL}/styles/fix/imgs/'+split[1]+'.png) no-repeat left');
			var req = new Request.HTML({
			method: 'post',
			url: '{CFG_URL}/appels/',
			data: { 'filtre' :  split[0], 'order' : split[1] },
			update: $('content'),
			onComplete: function(response) { }
			}).send();
			if (split[1] == 'asc') {
				new_order = 'desc';
			}
			else {
				new_order = 'asc';
			}
			link.set('title', split[0]+'::'+new_order);	
		});
	});
});

Par contre j'ai encore un petit souci sur un autre point.

Ne faîtes pas attention à la grande partie blanche au niveau des stats, j'ai juste prévu la placé pour différentes fonctions

La petite flèche rouge (heure) change lorsque l'on passe dessus : asc / desc. Lorsque l'on clique elle est modifiée. J'aimerais simplement qu'une fois modifiée si ma souris est dessus elle change à nouveau en fonction de la nouvelle valeur de new_order.

J'ai bien testé en lui changeant la classe ou en définissant un

Code :

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

link.set('onmouseover', 'background: url({CFG_URL}/styles/fix/imgs/'+new_order+'.png) no-repeat left');

mais cela ne fonctionne pas.

Merci pour le coup de main!

[Nighty]

Je dois avouer que c'est le genre de choses que j'ai assez peu expérimentés...

A mon avis, pour redéclencher un mouseover, plutôt que de modifier l'image dans l'évènement, essaye de travailler avec deux blocs dont l'affichage s'alterne (display: none). Tu l'auras compris, un des blocs aura une flêche vers le haut, l'autre vers le bas...
Le changement de bloc devrait, avec de la chance, redéclencher le mouseover...

D'ailleurs à ce sujet, il est sûrement possible de faire le changement d'image en CSS au survol, ce qui serait préférable.

[patou247]

Plop!
merci pour ta réponse.

J'ai tout simplement supprimé l'effet de rollover et c'est d'autant plus propre et moins blingbling! :p

J'avais testé en changeant la classe de l'objet mais visiblement css n'appréciait pas, ce qui en soit est normal vu que css charge les classes au chargement de la page.
Par contre si on peut définir "hover" avec un set('style') ça doit fonctionner correctement.

L'histoire des blocs ça doit fonctionner aussi, d'autant plus qu'en css on peut afficher un div qui n'est pas contenu en passant sur un autre div.

Bref,

merci pour ta réponse, mes probèmes sont résolus!