Development #51369
faire l'ajout d'une ligne de bloc en ajax
0%
Description
L'ajout d'une ligne passe par le rendu intégral du formulaire et c'est compliqué™ de garder l'état de tous les champs (par exemple #51314 a réduit une optimisation pour ne pas perdre l'info "champ verrouilé", et il faudrait un ticket similaire pour ne pas perdre "champ prérempli" pour gérer certains cas de #51330).
Plutôt, faire ce POST en ajax et remplacer l'HTML du champ bloc par le nouveau.
Fichiers
Révisions associées
Historique
Mis à jour par Frédéric Péters il y a environ 3 ans
- Patch proposed changé de Non à Oui
- Fichier 0001-forms-use-ajax-to-add-a-block-row-51369.patch 0001-forms-use-ajax-to-add-a-block-row-51369.patch ajouté
- Statut changé de Nouveau à Solution proposée
Le bout qui compte est à la fin du patch :
+ $('form').on('click keyup', 'div.BlockWidget .list-add button', function(ev) { ...
pour capter l'événement sur le bouton et faire le POST via jquery. C'est un POST vers la vue normale, j'y mets un entête x-wcs-ajax-action pour éventuellement permettre côté python de court-circuiter un bout ou l'autre mais pour le moment je laisse tout se dérouler, et une fois le résultat obtenu, en tirer le bout qui concerne le champ :
+ success: function(result, text_status, jqXHR) { + result = $(result); + $block.replaceWith(result.find('[data-field-id="' + block_id + '"]'));
Le reste du patch c'est pour garder les événements actifs sur les champs/boutons qui arrivent après le .replaceWith, en passant à des événements délégués, en gros :
- if ($(this).parents('.BlockWidget').find('.BlockSubWidget').length > 1) { + $('form').on('click', '.BlockSubWidget button.remove-button', function() {
Pour limiter les événements ainsi posés sur l'élément form supérieur, je les pose seulement si ça peut matcher, et donc plutôt que l'extrait ci-dessus, ça ressemble plutôt à :
- if ($(this).parents('.BlockWidget').find('.BlockSubWidget').length > 1) { + if ($('.BlockWidget').length) { + $('form').on('click', '.BlockSubWidget button.remove-button', function() {
Ça pourrait être fait sur une ligne, façon
+ $('.BlockWidget').parents('form').on('click', '.BlockSubWidget button.remove-button', function() {
mais je trouve ça moins explicite.
Mis à jour par Thomas Noël il y a environ 3 ans
- Statut changé de Solution proposée à Solution validée
Mis à jour par Frédéric Péters il y a environ 3 ans
- Statut changé de Solution validée à Résolu (à déployer)
commit e75c8cd9767468380fc9da9951ac7cc469350c2c Author: Frédéric Péters <fpeters@entrouvert.com> Date: Tue Feb 23 14:08:41 2021 +0100 forms: use ajax to add a block row (#51369)
Mis à jour par Frédéric Péters il y a environ 3 ans
- Statut changé de Résolu (à déployer) à Solution déployée
forms: use ajax to add a block row (#51369)