11499 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous

Je débute en JQuery et je ne comprends pas comment et quand synchroniser un formulaire complexe avec des données d'une base de données en vue de mettre à jour un enregistrement existant.

Mon formulaire complexe incorpore :
- plusieurs balises select, certaines dépendant d'une autre,
- des radio bouton...
- des check box
- ...

Mon formulaire fonctionne très bien pour créer un nouvel enregistrement dans la base.

Ce formulaire est full jquery !

J'utilise AJAX pour charger les combos, radio ... sur le click des éléments.

Maintenant, je n'arrive pas à trouver la bonne architecture de page qui me permettrait de :
- lire un enregistrement dans la base (celui la même qui a été créé par ce formulaire dans une phase d'ajout),
- déclencher le chargement des éléments existants du formulaire (comme pour la phase d'ajout)
- synchroniser les éléments en fonction de l'enregistrement à mettre à jour
Ci-dessous une image du formulaire
upload/51711-jquery.jpg
Bonjour,

Pas évidant de te répondre, tes questions sont un peux vague.
Aussi, je me pose une question, pourquoi vouloir gérer ton formulaire entièrement via javascript ?
Le rechargement d'une page à la validation d'un formulaire est en général beaucoup plus simple.

Mais peut être que j'ai mal compris. Il est en effet intéressant de charger une partie d'un formulaire selon un option de ce même formulaire.

Smiley cite lire un enregistrement dans la base (celui la même qui a été créé par ce formulaire dans une phase d'ajout),[/cite]
Les données de l'enregistrement sont lu via un langage coté serveur tel que php. Les données peuvent être transmises coté front sous le format json.
Salut benj

Avant que je passe à JQuery, je n'avais qu'une page de "mise à jour/ajout" qui basculait d'un côté ou l'autre en fonction du passage de l'ID de l'enregistrement à modifié -> MAJ, ou d'un zéro 0 -> ajout.

La page telle que tu la vois dans mon post est celle que j'appelle "mise à jour/ajout". Ellle est appelée depuis une autre page qui contient :
- Un seul bouton ajout
- N boutons "mise à jour" en regard de chaque ligne, lignes qui correspondent aux n enregistrements de la base de données.

La page d'ajout fonctionne à merveille avec une collaboration étroite entre JQuery et Ajax, en chargeant les boites déroulantes une seule fois selon le contexte donné.

Ce qui me manque c'est (dans le cas "gestion de indicateurs" comme exposé dans ma précédente réponse) :
- utilisez si ce faire ce peu, tous les bouts de code de ma page 'ajout'
- lire au bon moment le record correspondant à l'ID à modifier
- récupérer les trois ID correspondant aux divers boite déroulantes
- pour au final, charger la boite 1, la positionner avec l'ID1
- charger la boite 2 en tenant compte de la boite 1 ou de l'ID1
- charger la boite 3 en tenant compte de la boite 2 ou de l'ID2

Voila, voila !
Je m’aperçois que la cinématique de mon formulaire n'est pas présente dans le post

la voici

Voici une explication de la cinématique de mon formulaire :

Vous verrez qu’il y a trois grandes parties dans ce formulaire, parties qui sont indépendantes les unes des autres.

Par exempl, dans la partie nommée « Indicateur » (barre jaune)

- Le clic dans la première boite déroulante « Type d’indicateur » entraine le chargement de la boite « Version d’indicateur »

- Le clic dans la seconde boite déroulante « Version d’indicateur » entraine le chargement de la boite « Indicateur »

Tous les clics enchainent des ajax qui accèdent à la base et retournent du JSON.

Quand l’utilisateur clique sur le bouton « enregistrer la requête », toujours via ajax, je crée l’enregistrement dans la base de données en stockant, dans le cas de la gestion des « indicateurs » les valeurs des trois boites déroulantes.

Ce que je ne sais pas faire, c’est ce qui doit se passer en vu de faire une mise à jour et après la lecture d’un enregistrement de la base (récupération des trois id), afin de positionner chacune des trois boites, qui évidemment, doivent êtres chargées conformément au schéma logique des données.

J’espère avoir été clair !
saxrub a écrit :
La page telle que tu la vois dans mon post est celle que j'appelle "mise à jour/ajout". Ellle est appelée depuis une autre page qui contient :
- Un seul bouton ajout
- N boutons "mise à jour" en regard de chaque ligne, lignes qui correspondent aux n enregistrements de la base de données.

Quand tu dit que la page est "appelée", c'est que tu la recharge entièrement la page ou tu souhaite modifier ta page via javascript ?
Si c'est la première solution, tous le code html doit être générés coté serveur y compris ton select avec les indicateurs.
Oui c'est la cas, la page est appelée depuis une autre page ; elle est donc bien chargée entièrement.

C'est vrai que sans JQuery, tout aurait été construit coté serveur. Je suis étonné et déçu qu'il n'y ait pas de solution JQuery (j'ai essayé le loadjson pour charger des balises html à la condition que que les id des balises correspondent au clé de l'array json constituée par un ajax ; pour des champs input, c'est simple à mettre en oeuvre, mais pour mes "gr@@@/???" de cbo mère/fille/petite-fille j'ai pas trouvé).
Pourquoi se bloquer sur une technologie ?

Charger la page avec les bons champs coté serveur ne veut pas dire que ce que tu a fait coté client n'est plus bon.
Oui, je comprends mais j'avais décider de créer l'intranet en n'utilisant "que" JQuery et Ajax.
J'ai essayé loadJSON qui donnait des résultats satisfaisants avec les <input> text pour l'instant je n'ai pas la solution pour les <select>.
Bref, à suivre.