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.
Files
History
Updated by Frédéric Péters 1 day ago
- Patch proposed changed from No to Yes
- Status changed from Nouveau to Solution proposée
- File 0001-forms-use-ajax-to-add-a-block-row-51369.patch 0001-forms-use-ajax-to-add-a-block-row-51369.patch added
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.