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: