Projet

Général

Profil

Development #51369

faire l'ajout d'une ligne de bloc en ajax

Ajouté par Frédéric Péters il y a environ 3 ans. Mis à jour il y a environ 3 ans.

Statut:
Fermé
Priorité:
Normal
Assigné à:
Version cible:
-
Début:
23 février 2021
Echéance:
% réalisé:

0%

Temps estimé:
Patch proposed:
Oui
Planning:
Non

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

Révision e75c8cd9 (diff)
Ajouté par Frédéric Péters il y a environ 3 ans

forms: use ajax to add a block row (#51369)

Historique

#1

Mis à jour par Frédéric Péters il y a environ 3 ans

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.

#2

Mis à jour par Thomas Noël il y a environ 3 ans

  • Statut changé de Solution proposée à Solution validée
#3

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)
#4

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

Formats disponibles : Atom PDF