une liste d'élements à manipuler en JS

une liste d'élements à manipuler en JS - HTML/CSS - Programmation

Marsh Posté le 12-12-2010 à 12:44:36    

coucou à tous,
 
à vrai dire j'y connais quasiment rien en javascript et pour résumer je voudrais faire quelque chose qui ressemble à ça :
 
http://www.asos.fr/Chaussures-homm [...] /?cid=4209
 
c'est à dire que sur une page j'ai une liste de produits (ici chaussures) qui ont chacun leurs caractéristiques (ici prix, couleur,...) et donc pouvoir à l'aide du menu à gauche les filtrer en fonction des critères sans recharger la page. par exemple je selectionne le blanc et il n'y a que les chaussures blanches qui s'affichent.
 
donc a priori tout ceci se fait en javascript mais là ou je seche c'est comment doit etre constitué chaque article ? c'est un objet javascript ou autre ? ou alors tout simplement un div ?
mes données arrivent au format json sur ma page, c'est à dire que je vais recuperer une liste d'id qui contient ensuite toutes les caractériques du produit.
je pensais simplement les afficher comme ça :
 
<div id="1">id="couleur=noir"description du produit 1</div>
<div id="2"><div id="couleur=blanc">description du produit 1</div>
 
 
en gros si quelqu'un comprend la mecanique de ce genre de systeme (avoir une liste d'élements à afficher et trier, selectionner sans recharger la page) qu'il pouvait me l'expliquer ça m'aiderait beaucoup :D
 
merci bien !

Reply

Marsh Posté le 12-12-2010 à 12:44:36   

Reply

Marsh Posté le 12-12-2010 à 12:59:11    

C'est du javascript mais y a pas d'AJAX si je comprends que tu veux dire : la page est rechargée completement à chaque fois qu'on clique sur un paramètre ( l'url change )

Reply

Marsh Posté le 12-12-2010 à 13:10:39    

ah oui effectivement l'url change^^
 
du coup autre exemple ici :
http://www.kayak.fr
 
si tu lances une recherche au hasard il t'affiche une liste de vols et quand dans le menu de gauche tu cliques sur un truc il met à jour la liste sans rien recharger pour le coup.
comme tous les résultats sont chargées à la base (enfin je pense) il n'y a pas besoin d'ajax ici selon moi nan ?
 
la question que je me posais c'est comment représenter ma liste. je charge une liste de <div>, <table>,... classique avec des id et je fais des selections, tris dessus ou alors y a un truc genre objet ou autre qui serait plus pratique ?

Reply

Marsh Posté le 12-12-2010 à 13:19:11    

Si tu charges tous les resultats par avance, effectivement tu n'a pas besoin d'utiliser l'AJAX mais c'est une mauvaise pratique car si tu as 100.000 enregistrements à charger dans la page le poste client à l'autre bout va fusionner.
 
Pour representer ta liste, tu charges tout dans un tableau.
 
Mais la solution correcte est d'utiliser l'ajax. Avant que tu te lances, je te conseille vivement un framework tel jQuery, tu éviteras de nombreux écueils (tels tous les problèmes de comportements différents entre les browsers)

Reply

Marsh Posté le 12-12-2010 à 14:18:00    

ouaip j'utilise déjà jquery, bien pratique d'ailleurs ;)
 
ok donc je vais procéder avec de l'ajax et voir si je m'en sors lol  
 
merci pour tes explications !

Reply

Marsh Posté le 12-12-2010 à 22:10:21    

Ouais, JQuery c'est vraiment pratique. Moi ça m'a réconcilié avec le javascript :D
 
En plus il y a des plug-ins de toute beauté comme jqGrid par exemple.
 
Concernant ton problème, je te suggère (mais je connais pas toutes tes contraintes) de travailler le plus longtemps possible avec des structures de données en JSON et de générer le HTML avec les templates de jQuery, c'est super fluide comme process et on conserve une bonne séparation MVC :
 
Tu as un bon exemple avec de l'ajax ( section "Using Remote Data" ) sur cette page http://api.jquery.com/jquery.tmpl/    
 
je l'ai récemment utilisé pour un client et bien qu'en béta, j'ai pas rencontré de soucis avec ce plugin.
 
L'autre solution, c'est de générer le HTML côté serveur. En javascript, tu fais juste une insertion de bloc mais avec tous ces quadri et hexa-core "en liberté" côté client, ça serait dommage de continuer à faire bosser le serveur :D


Message édité par smaragdus le 12-12-2010 à 22:15:11
Reply

Marsh Posté le 13-12-2010 à 19:47:29    

hello !
 
ouais c'est vrai que javascript, beurk  :na:  normalement mais avec jquery ça va mieux!
 
ok merci pour tes conseils, c'est super sympa :) ça a l'air pas mal tout ça, je vais aller voir. avec tous ces plugins tout devient plus facile :D
 
thanks !

Reply

Marsh Posté le 19-12-2010 à 15:12:07    

c'est encore moi :P
 
je bloque un peu à "conceptualiser" le truc !
en fait je vois pas trop comment gérer la source de données.
 
coté serveur : je recupère mes données de site externe, que je traite et donc je les encode en php en format json. je me retrouve donc avec ma variable json qui contient une liste de 100 valeurs par exemple.
 
coté client: maintenant je veux afficher on va dire seulement 15 valeurs par défaut sur la page (mais en cliquant sur suivant je veux afficher les 15 autres sans recharger la page non plus). donc je charge en ajax mais je bloque où je recupere ma variable json qui contient ma liste de valeurs.
cette liste en json je suis bien obligé de la stocker quelque part ? j'en fais une session php, j'insère le tout dans une table sql ? car je charge que 15 lignes mais toutes les autres doivent bien etre conservés quelque part !
 
je sais pas si c'est trop clair ce que je dis mais en gros coté serveur j'obtiens ma liste de valeurs et je pense que je dois la stocker quelque part nan ? car cette liste est issue de donnée externe que je vais pas aller rechercher.
 
merci d'avance pour l'aide :)

Reply

Marsh Posté le 20-12-2010 à 09:31:01    

Ok je pense entrevoir ton soucis.  
 
L'interet de l'AJAX est justement de récuperer les enregistrement par paquet de 15 alors que tu en as beaucoup plus (100 par exemple)
 
Il faut donc que, dans les paramètres que tu passes à ton appel ajax, tu spécifies un début et un nombre d'enregistrement à lire, comme la clause LIMIT de MySQL
 
select * from machin LIMIT debut, quantite
 
où quantie vaut 15 et debut commence à 0
 
C'est le même procédé que si tu faisais une navigation classique en HTML.
 
Quand le client clique sur " > Next " (par exemple) tu génères une requete ajax avec debut = debut+15.
 
Est-ce que c'est plus clair où est-ce que je t'ai plus embrouillé, j'ai le cerveau encore embrumé ce matin :D

Reply

Marsh Posté le 20-12-2010 à 19:12:40    

salut,
 
ouais c'est très clair :D merci beaucoup !!
 
mon souci vient plus du fait que je choppe où mes données en fait ?
car comme je disais je les recupere d'un site externe que je stocke tout dans une variable 'json' (format de retour des données en ajax).
 
mais je me rends compte que ma question n'a plus trop de rapport avec la base :)
 
donc où doit aller taper ma requete ajax en gros ? c'est là que je suis paumé :D (oui c'est surement tout con). je stocke mes données dans une table, fichier texte, session,... ? car vu que ça vient d'un site externe je peux pas aller rechercher sur ce site à chaque requete ajax!
et donc je me demandais quelle était la meilleure méthode de "stockage" ? car ma variable obtenue (qui contient mes données) ne peut pas rester toute seule comme ça...
 
j'espère être à peu près clair :D
 
et merci bien pour le temps que tu prends à m'aider!
 

Reply

Marsh Posté le 20-12-2010 à 19:12:40   

Reply

Marsh Posté le 21-12-2010 à 09:51:35    

Dans ta requete ajax :

$.ajax({
  url: 'ajax/test.php',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});


 
le script test.php genère ta structure json
 
http://api.jquery.com/jQuery.ajax/
 
Autre problème : à cause de la "same origin policy", tu dois passer par JSONP
 
Et pour éviter de faire des requetes tous azimuts, il vaut mieux cacher les données sur ton serveur


Message édité par smaragdus le 21-12-2010 à 09:52:53
Reply

Marsh Posté le 21-12-2010 à 13:44:15    

ok merci :)
 
les données récupérées du site externe sont transformées en php sur mon site, du coup j'ai pas de souci de requetage avec ajax sur site externe donc le json marchera (enfin en principe :D)
sinon ouais je vais utiliser un systeme de cache en php (avec ob statr si mes souvenirs sont bons) je pense, je devrais m'en sortir comme ça !
 
merci beaucoup pour tes explications, tu m'a bien aidé :)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed