Project

General

Profile

Development #51369

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

Added by Frédéric Péters 2 days ago. Updated 1 day ago.

Status:
Solution proposée
Priority:
Normal
Target version:
-
Start date:
23 Feb 2021
Due date:
% Done:

0%

Estimated time:
Patch proposed:
Yes
Planning:
No

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.


Files

History

#1

Updated by Frédéric Péters 1 day ago

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.

Also available in: Atom PDF