Utilisation de WTForms FieldList

Question

J'utilise WTForms avec Flask via l'extension Flask.WTF. Cependant, cette question n'est pas spécifique à Flask. WTForms comprend un FieldList field for lists of fields. J'aimerais l'utiliser pour créer un formulaire dans lequel les utilisateurs peuvent ajouter ou supprimer des éléments. Cela nécessitera une sorte de framework Ajax pour ajouter dynamiquement des widgets, mais la documentation de WTForms n'en fait aucune mention. Les autres cadres comme Deform come with Ajax support. Existe-t-il un cadre similaire disponible pour WTForms?

Answer 1

J'ai utilisé quelque chose comme ça avec mon FieldList/FormField pour permettre l'ajout d'entrées:

$(document).ready(function() { 
    $('#add_another_button').click(function() { 
     clone_field_list('fieldset:last'); 
    }); 
}); 

function clone_field_list(selector) { 
    var new_element = $(selector).clone(true); 
    var elem_id = new_element.find(':input')[0].id; 
    var elem_num = parseInt(elem_id.replace(/.*-(\d{1,4})-.*/m, '$1')) + 1; 
    new_element.find(':input').each(function() { 
     var id = $(this).attr('id').replace('-' + (elem_num - 1) + '-', '-' + elem_num + '-'); 
     $(this).attr({'name': id, 'id': id}).val('').removeAttr('checked'); 
    }); 
    new_element.find('label').each(function() { 
     var new_for = $(this).attr('for').replace('-' + (elem_num - 1) + '-', '-' + elem_num + '-'); 
     $(this).attr('for', new_for); 
    }); 
    $(selector).after(new_element); 
} 

Supprimer des boutons serait beaucoup plus délicat.

(code la plupart du temps emprunté réponse à Dynamically adding a form to a Django formset with Ajax.)

Answer 2

De votre description, je ne vois pas pourquoi Ajax est particulièrement nécessaire, bien que vous ayez besoin de la logique JavaScript pour ajouter/supprimer des lignes. J'ai implémenté cette fonctionnalité en utilisant WTForms, mais sans support particulier de WTForms lui-même; Vous devez juste vous assurer que lorsque vous créez des widgets côté client, vous le faites en utilisant des noms de champs que WTForms analysera correctement dans la liste côté serveur. Vous pouvez cloner une ligne existante en utilisant le JavaScript côté client pour ajouter des lignes, de sorte que le rendu d'une ligne soit cohérent entre les lignes générées côté serveur et les lignes créées côté client.