Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1679 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  une liste d'élements à manipuler en JS

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

une liste d'élements à manipuler en JS

n°2041591
gosty is b​ack
:::....Force & Honneur....:::
Posté le 12-12-2010 à 12:44:36  profilanswer
 

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 !

mood
Publicité
Posté le 12-12-2010 à 12:44:36  profilanswer
 

n°2041594
smaragdus
whores, drugs & J.S. Bach
Posté le 12-12-2010 à 12:59:11  profilanswer
 

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 )

n°2041597
gosty is b​ack
:::....Force & Honneur....:::
Posté le 12-12-2010 à 13:10:39  profilanswer
 

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 ?

n°2041600
smaragdus
whores, drugs & J.S. Bach
Posté le 12-12-2010 à 13:19:11  profilanswer
 

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)

n°2041609
gosty is b​ack
:::....Force & Honneur....:::
Posté le 12-12-2010 à 14:18:00  profilanswer
 

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 !

n°2041670
smaragdus
whores, drugs & J.S. Bach
Posté le 12-12-2010 à 22:10:21  profilanswer
 

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
n°2041877
gosty is b​ack
:::....Force & Honneur....:::
Posté le 13-12-2010 à 19:47:29  profilanswer
 

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 !

n°2043125
gosty is b​ack
:::....Force & Honneur....:::
Posté le 19-12-2010 à 15:12:07  profilanswer
 

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

n°2043220
smaragdus
whores, drugs & J.S. Bach
Posté le 20-12-2010 à 09:31:01  profilanswer
 

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

n°2043340
gosty is b​ack
:::....Force & Honneur....:::
Posté le 20-12-2010 à 19:12:40  profilanswer
 

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!
 

mood
Publicité
Posté le 20-12-2010 à 19:12:40  profilanswer
 

n°2043442
smaragdus
whores, drugs & J.S. Bach
Posté le 21-12-2010 à 09:51:35  profilanswer
 

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
n°2043501
gosty is b​ack
:::....Force & Honneur....:::
Posté le 21-12-2010 à 13:44:15  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  une liste d'élements à manipuler en JS

 

Sujets relatifs
Zone de liste déroulante <select></select>Deux colonnes, éléments à la même hauteur
récupérer tout les élements d'un tree[resolu] JS affichage d'image cassé :-(
Actualiser une liste de données tirées d'une table Mysql en PHPJs : remplacer du texte au sein de la page
Comment remplacer un caractère dans une très longue listePb deux liste en PHP
Récuperer une liste de valeurs a partir d'une hierarchie en htmlHelp JS je deviens fou ! Compter div ayant une classe spécifique
Plus de sujets relatifs à : une liste d'élements à manipuler en JS


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR