J'essaie d'ajouter un champ booléen sur mon formulaire et de le rendre avec des balises de formulaires croustillants. Et tout est affiché sauf la case à cocher.
Mon projet fonctionne avec django 2.1, python 3.6 et Bootstrap-4. Ma version de Django Crispy Forms est: 1.7.2
Le champ est investissement.
Le champ du modèle ne fonctionne pas:
investment = models.BooleanField (default = False, help_text = 'Voulez-vous accepter des investissements?')
Mon formulaire:
<div class="form-group">
<div id="div_id_investment" class="form-check">
<label for="id_investment" class="form-check-label requiredField">
<input type="checkbox" name="investment" class="checkboxinput form-check-input" required="" id="id_investment">
Investment
<span class="asteriskField">*</span>
</label>
<small id="hint_id_investment" class="form-text text-muted">Want to accept Investments?</small>
</div>
</div>
Ma vue:
<div id="div_id_name" class="form-group">
<label for="id_name" class="col-form-label requiredField">Name
<span class="asteriskField">*</span>
</label>
<div class="">
<input type="text" name="name" placeholder="enter the project name here..." class="textinput textInput form-control" required="" id="id_name">
<small id="hint_id_name" class="form-text text-muted">Add a title to your project.</small>
</div>
</div>
Et pour le modèle, j'ai essayé deux méthodes, mais aucune n'a fonctionné:
Mon modèle 01:
Voici le méthode que je veux utiliser à la fin. Afficher chaque démon individuellement pour que je puisse faire la mise en page directement sur le modèle.
...
{% load crispy_forms_tags %}
...
<form id="my_form" method="post" enctype="multipart/form-data" novalidate>
{% csrf_token %}
{{ form|crispy }}
<div class="row buttons-row">
<div class="col-md-4 col-sm-4">
<button type="submit" class="btn btn-outline-primary btn-block btn-round">Create</button>
</div>
</div>
</form>
Mon modèle 02:
Celui-ci utilise directement le {{form | crispy}} pour afficher automatiquement tous les éléments.
...
{% load crispy_forms_tags %}
...
<form id="my_form" method="post" enctype="multipart/form-data" novalidate>
{% csrf_token %}
<div class="row">
<div class="col-md-5 col-sm-5">
<h6>Name
<span class="icon-danger">*</span>
</h6>
{{ form.name|as_crispy_field }}
<h6>Categories
<span class="icon-danger">*</span>
</h6>
{{ form.category|as_crispy_field }}
</div>
<div class="col-md-7 col-sm-7">
<h6>Short Description
<span class="icon-danger">*</span>
</h6>
{{ form.short_description|as_crispy_field }}
<h5>
<small>
<span id="textarea-limited-message" class="pull-right">135 characters left</span>
</small>
</h5>
<h6>Investment
<span class="icon-danger">*</span>
</h6>
{{ form.investment|as_crispy_field }}
</div>
</div>
<div class="row buttons-row">
<div class="col-md-4 col-sm-4">
<button type="submit" class="btn btn-outline-primary btn-block btn-round">Create</button>
</div>
</div>
</form>
J'ai vérifié le HTML rendu et j'ai trouvé où le problème semble être, mais je ne sais pas comment le résoudre:
Les formes croustillantes créent un élément en ajoutant les divs correspondants et d'autres éléments nécessaires, comme par exemple sur l'entrée du nom:
XXX
Mais pour la case à cocher crée la structure suivante:
class ProjectCreateView(SuccessMessageMixin, generic.CreateView):
template_name = 'webplatform/project_create_form.html'
model = Project
form_class = CreateProjectForm
success_message = 'Project created! Now try to add all the details and then publish it!'
def get_success_url(self):
return reverse_lazy('project-edit-general', args=(self.object.id,))
# Set field as current user
def form_valid(self, form):
form.instance.user = self.request.user
form.instance.start_date = timezone.now()
form.instance.history_change_reason = 'Project Created'
return super(ProjectCreateView, self).form_valid(form)
Comme vous pouvez le voir, le div avec le id se trouve dans un autre div . Eh bien, si je supprime la classe de ce div supplémentaire ( form-group ) et change la classe du div avec id : form-check pour form-group , la case à cocher apparaît et est entièrement fonctionnelle.
Donc mon idée est d'essayer de changer le modèle que les formulaires croustillants créés pour la case à cocher, mais je ne sais pas comment faire cela. De plus, s'il y a une autre meilleure option, je leur suis ouvert.
3 Réponses :
Essayez de changer self.fields ['investment']. required = False, car il semble que parce que le champ n'est pas spécifié comme facultatif, Django l'ignore.
Ça ne marche pas. Tout est égal à mon premier essai. J'ai également essayé de supprimer tous les widgets et assistants et cela se passe de la même manière à chaque fois.
Il s'agit d'un problème ouvert dans le github django-crispy-forms voir: https://github.com/django-crispy-forms/django-crispy-forms/issues/787
Selon cela, le problème est la façon dont bootsrap gère cet élément de formulaire dans la dernière version . Voici un hack js pour le faire fonctionner:
$(document).ready(function() {
$( ":checkbox" ).each(function( index ) {
$(this).prependTo($("#div_" + $(this).attr('id')))
});
});
J'ai ajouté ce JS à mon projet mais je n'ai pas fonctionné. Cela reste le même. J'ai essayé d'ajouter ce JS dans l'en-tête et aussi à la fin du corps, mais rien.
Avez-vous importé jquery comme ceci: