Modal doesn't open with django

Question

I'm having a little problem with a modal in django.

I have a link which calls an id and the id is a modal. However, the modal isn't opening. I'm pretty sure that this is happening because the link is inside a "automatic" form, but I'm new in django and python so I have no idea.

The code is:

{% block body %}
    <div class="col-lg-12 page-content">
        <h1 class="content-title">Meus Dados</h1>
        <hr class="star-light">
        <div class="form-content">
            <form class="form-horizontal" method = 'POST' action="/user/edituser/">
                {% csrf_token %}
                {% for field in form_user %}
                    {% bootstrap_field field exclude="password,repeat_password" %}
                {% endfor %}
                <div class="button-div">
                    <a class="btn btn-info btn-block btn-password" href="#change-password"
                        data-toggle="modal">Alterar senha</a>
                    {% buttons %}
                        <button class="btn btn-success btn-block btn-edit" type = 'submit'>Salvar Dados</button>
                    {% endbuttons %}
                </div>
            </form>
            <a class="btn btn-danger btn-block btn-delete" href="/user/delete" name="delete">Excluir minha conta</a>
        </div>
    </div>
    <div class="modal hide" id="change-password">
        <div class="modal-header">
            <button class="close" data-dismiss="modal">&times;</button>
            <p class="modal-title" id="myModalLabel">Change Password</p>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="modal-col col-sm-12">
                    <div class="well">
                        <form method="post" id="passwordForm">
                            <input type="password" class="input-lg form-control" name="password1"
                                id="password1" placeholder="New Password">
                            <input type="password" class="input-lg form-control" name="password2"
                                id="password2" placeholder="Repeat Password">
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn btn-success btn-bloc">Alterar Senha</a>
        </div>
    </div>
{% endblock %}

Any doubts, please ask. Thanks.

elethan · Accepted Answer · 2016-09-16T15:41:24.420

Change your <a> tag to the following:

<a class="btn btn-info btn-block btn-password" href="#"
    data-toggle="modal" data-target="#change-password">Alterar senha</a>

At least this is how I do it in my Django templates. As I think @souldeux was trying to say, you need to use the data-target attribute to specify the modal itself, rather than the href; I usually just use # for that in cases like this.

Also, make sure that you are not only loading the bootstrap css code, but also the bootstrap js libraries. In other words, make sure you have the following (or some equivalent) in your template:

<!-- Latest compiled and minified JavaScript (at the time of this post) -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

In addition to your css:

<!-- Latest compiled and minified CSS (at the time of this post) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Which I assume you already have, because otherwise things would look weird.

@ElaineCristinaMeirelles Do you see any errors in your browser (i.e., in the developers console?)? Also, make sure you are loading the the bootstrap js code in addition to the bootstrap css code. — elethan, Sep 16 '16 at 15:33
Holy crap, I wasn't loading the bootstrap js code, thanks a million. — Elaine Cristina Meirelles, Sep 16 '16 at 15:38
@ElaineCristinaMeirelles No problem. Glad it worked! I have had similar things happen to me. — elethan, Sep 16 '16 at 15:39

score 0 · Answer 2 · answered Sep 16 '16 at 14:21

0

<a class="btn btn-info btn-block btn-password" href="#change-password" data-toggle="modal">Alterar senha</a>

You need a data-target attribute in addition to your data-toggle. http://getbootstrap.com/javascript/#live-demo

answered Sep 16 '16 at 14:21

souldeux

3,615
3
23
35

Continuou não funcionando :/ – Elaine Cristina Meirelles Sep 16 '16 at 14:24
Desculpe, eu só falo inglês. Look at the code for that "launch demo modal" button - try removing your `href` attribute and making sure the data-target matches the id of your modal like it does in the example. Please post what you try here. – souldeux Sep 16 '16 at 14:28

score 0 · Answer 3 · answered Sep 16 '16 at 15:15

0

try changing the tag "a" to tag "button" in

<a class="btn btn-info btn-block btn-password" href="#change-password"
                    data-toggle="modal">Alterar senha</a>

and hide to fade in

<div class="modal hide" id="change-password">

answered Sep 16 '16 at 15:15

LGama

561
4
10

Modal doesn't open with django

3 Answers3