1
votes

Django Crispy Forms - La case à cocher ne s'affiche pas

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.


0 commentaires

3 Réponses :


0
votes

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.


1 commentaires

Ç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.



0
votes

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')))
    });
});


3 commentaires

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: