Como posso dinamicamente adicionar um WTForms TextField a um FieldList usando jQuery?

votos
1

Quero adicionar ou remover novos campos de entrada WTForm com botão, usando jQuery, como aqui http://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery/comment-page-1 mas usando a minha forma-campos.

minha forma:

class EditBook(Form):
title = TextField('title', validators = [Required()])
authors = FieldList(TextField())

problema é que eu não posso simplesmente anexar, por exemplo,

$(InputsWrapper).append({{form.authors(size=20)}});

ele só imprime este texto.

Publicado 28/05/2014 em 15:58
fonte usuário
Em outras línguas...                            


2 respostas

votos
7

Seu exemplo funde lado do servidor de texto gerado com texto que você está anexando no navegador usando javascript. Você não vai ser capaz de usar a ` `sintaxe que é usado pelo motor de templates lado do servidor. Durante tornando estes são ampliados e substituídos com o HTML que é transmitida através do fio para o cliente. Em vez disso você vai precisar para construir os elementos DOM reais que estas funções modelo built-in, caso contrário, geram.

O elemento DOM que você realmente deseja criar esta aparência:

<input id="authors-0" name="authors-0" type="text" value="Author Guy"></input>
<input id="authors-1" name="authors-1" type="text" value="Other Guy"></input>

Este pode então ser codificado em um multipart/form-datacórrego que WTForms pode trabalhar. Portanto, o seu realmente coisas jQuery precisa criar um campo parecido com este

$('<input>').attr({
    type: 'text',
    id: 'authors-' + index ,
    name: 'authors-' + index, 
    value: value
}).appendTo('form');

Onde a indexé o próximo índice posicional (que pode ser armazenado em um dataatributo em um embrulho ul) e valueé o valor que pretende atribuir a esta caixa, se houver.

Além disso para obter uma sensação para o que FieldListtorna você pode executar o código abaixo da linha de comando. Ele irá imprimir o texto real que WTForms gera durante o processo de renderização.

from wtforms import Form, TextField, FieldList
from webob.multidict import MultiDict

class TestForm(Form):
    authors = FieldList(TextField())

data_in = {'authors': ['Author Guy', 'Other Guy']}
test_form2 = TestForm(data=MultiDict(data_in))
print("HTML Render: %s" % test_form2.authors())
Respondeu 28/05/2014 em 22:13
fonte usuário

votos
2

Esta resposta é baseada em explicações das nsfyn55 (primeiro parágrafo).

Eu tive um problema parecido. A solução foi a utilização de: https://github.com/Rhyzz/repeatable-fields

Então, tudo que você tem a fazer é olhar para o trecho de html que é processado por WTForms e usá-lo como um 'modelo' em repetíveis-campos Plugin (ver seus docs para mais detalhes)

Respondeu 05/06/2014 em 15:32
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more