0

I'm quite new to django and web programming in general. I want to build a small website example. I use django allauth and twitter bootstrap. However, I wanted to build a popup sign in, register window, which I couldn't find in twitter bootsrap examples. So I took a snippet from bootsnipp, because it works exactly as I want: popups over other forms, while fading them, so I thought with a little tuning it will work for me. However, if I place the code inside of the body or footer, it works. If I try to add it to a navbar, provided by twitter bootstrap it simply freezes. Could someone help, please? I have absolutely no idea why it happens..

Here is the working code with Contact button beeing placed in footer and body elements( Contact Button 2,3,4). However, when I try to put the following code after the comment "Contact Button 1", it shows the popup and freezes:

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#contact" data-original-title>Contact</a>
        <div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="contactLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="panel-title" id="contactLabel"><span
                                class="glyphicon glyphicon-info-sign"></span> Any questions? Feel free to contact
                            us.</h4>
                    </div>
                    <form action="#" method="post" accept-charset="utf-8">
                        <div class="modal-body" style="padding: 5px;">
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                                    <input class="form-control" name="firstname" placeholder="Firstname" type="text"
                                           required autofocus/>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                                    <input class="form-control" name="lastname" placeholder="Lastname" type="text"
                                           required/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                    <input class="form-control" name="email" placeholder="E-mail" type="text"
                                           required/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                    <input class="form-control" name="subject" placeholder="Subject" type="text"
                                           required/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <textarea style="resize:vertical;" class="form-control" placeholder="Message..."
                                              rows="6" name="comment" required></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer" style="margin-bottom:-14px;">
                            <input type="submit" class="btn btn-success" value="Send"/>
                            <!--<span class="glyphicon glyphicon-ok"></span>-->
                            <input type="reset" class="btn btn-danger" value="Clear"/>
                            <!--<span class="glyphicon glyphicon-remove"></span>-->
                            <button style="float: right;" type="button" class="btn btn-default btn-close"
                                    data-dismiss="modal">Close
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

The original base.html:

{% load url from future %}
{% load staticfiles %}

<!DOCTYPE html>
<html>
<head>
{% block headbootstrap %}
<style type="text/css">
    body {
        padding-top: 60px;
        padding-bottom: 40px;
    }
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Basic css -->
<link href="{{ STATIC_URL }}twitter_bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link href="{{ STATIC_URL }}accesss/footer.css" rel="stylesheet">
{% endblock %}
<title>{% block head_title %}{% endblock %}</title>
{% block extra_head %}
{% endblock %}
</head>
<body>
{% block header %}
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
  <div class="container">
    <div class="navbar-header">
        <!-- Mobile Nav Button -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <!-- END Mobile Nav Button -->
        <a class="navbar-brand" href="#">HUMAN</a>
    </div>
    <!-- Navigation Links -->
    <div class="collapse navbar-collapse">
        {% if request.user.is_authenticated %}
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Dashboard</a></li>
            <li><a href="#News">News</a></li>
            <li><a href="#Data">Data</a></li>
        </ul>
        {% else %}
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#News">News</a></li>
            <li><a href="#Feedback">Feedback</a></li>
            <li><a href="#howitworks">How it works</a></li>
        </ul>
        {% endif %}
        <!-- END Navigation Links -->

        <!-- Contact Button 1 -->

        <!-- I want to add a button here -->

        <!-- Login & Logout buttons -->
        <form class="navbar-form navbar-right" role="form" method="post" action="{% url 'account_login' %}">
            {% csrf_token %}
            {{ form.non_field_errors }}
            {% if request.user.is_authenticated %}
            <a class="btn btn-success" type="submit" href="/accounts/logout/">Logout</a>
            <!---       <img class="pull-right" src="{{ request.user.profile.profile_image_url }}"/> --->

            {% if request.user.first_name or request.user.last_name %}
            {{ request.user.first_name }} {{ request.user.last_name }}
            {% else %}
            {{ request.user.username }}
            {% endif %}
            {% if request.user.profile.account_verified %} (verified) {% else %} (unverified) {% endif %}

            {% else %}
            <a class="btn btn-success" type="submit" href="/accounts/login/">Login</a>
            {% endif %}
            {% if redirect_field_value %}
            <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
            {% endif %}
        </form>


    </div>
    <!-- /.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar -->
{% endblock %}

{% block content %}
{% if request.user.is_authenticated %}
{% else %}
<!-- Contact Button 2 -->
<div class="container">
<div class="row">
    <br/><br/><br/>

    <a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#contact" data-original-title>
        Contact
    </a>

    <div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="contactLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="panel-title" id="contactLabel"><span class="glyphicon glyphicon-info-sign"></span>
                        Any questions? Feel free to contact us.</h4>
                </div>
                <form action="#" method="post" accept-charset="utf-8">
                    <div class="modal-body" style="padding: 5px;">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                                <input class="form-control" name="firstname" placeholder="Firstname" type="text"
                                       required autofocus/>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                                <input class="form-control" name="lastname" placeholder="Lastname" type="text"
                                       required/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                <input class="form-control" name="email" placeholder="E-mail" type="text" required/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                <input class="form-control" name="subject" placeholder="Subject" type="text"
                                       required/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <textarea style="resize:vertical;" class="form-control" placeholder="Message..."
                                          rows="6" name="comment" required></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer" style="margin-bottom:-14px;">
                        <input type="submit" class="btn btn-success" value="Send"/>
                        <!--<span class="glyphicon glyphicon-ok"></span>-->
                        <input type="reset" class="btn btn-danger" value="Clear"/>
                        <!--<span class="glyphicon glyphicon-remove"></span>-->
                        <button style="float: right;" type="button" class="btn btn-default btn-close"
                                data-dismiss="modal">Close
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
  </div>

</div>


<div class="container">

<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
    <h1>News</h1>

    <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It
        includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>

    <p>To see the difference between static and fixed top navbars, just scroll.</p>

    <p>
        <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
    </p>
</div>
</div>
<!-- /container -->

<div class="container">

<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
    <h1>Promote</h1>

    <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It
        includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>

    <p>To see the difference between static and fixed top navbars, just scroll.</p>

    <p>
        <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
    </p>
    <!-- Contact Button 3 -->
    <a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#contact" data-original-title>
        Contact
    </a>

    <div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="contactLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="panel-title" id="contactLabel"><span class="glyphicon glyphicon-info-sign"></span>
                        Any questions? Feel free to contact us.</h4>
                </div>
                <form action="#" method="post" accept-charset="utf-8">
                    <div class="modal-body" style="padding: 5px;">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                                <input class="form-control" name="firstname" placeholder="Firstname" type="text"
                                       required autofocus/>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                                <input class="form-control" name="lastname" placeholder="Lastname" type="text"
                                       required/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                <input class="form-control" name="email" placeholder="E-mail" type="text" required/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                <input class="form-control" name="subject" placeholder="Subject" type="text"
                                       required/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <textarea style="resize:vertical;" class="form-control" placeholder="Message..."
                                          rows="6" name="comment" required></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer" style="margin-bottom:-14px;">
                        <input type="submit" class="btn btn-success" value="Send"/>
                        <!--<span class="glyphicon glyphicon-ok"></span>-->
                        <input type="reset" class="btn btn-danger" value="Clear"/>
                        <!--<span class="glyphicon glyphicon-remove"></span>-->
                        <button style="float: right;" type="button" class="btn btn-default btn-close"
                                data-dismiss="modal">Close
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
  </div>

</div>
<!-- /container -->
<div class="container">

<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
    <h1>Feedback</h1>

    <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It
        includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>

    <p>To see the difference between static and fixed top navbars, just scroll.</p>

    <p>
        <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
    </p>
</div>

</div>
<!-- /container -->
{% endif %}
</div>
{% endblock %}
{% block extra_body %}
{% endblock %}
{% block footer %}
<footer>
<!--Contact Button 4 -->
<div class="container">
    <div class="row">
        <br/><br/><br/>
        <a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#contact" data-original-title>
            Contact
        </a>

        <div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="contactLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="panel-title" id="contactLabel"><span
                                class="glyphicon glyphicon-info-sign"></span> Any questions? Feel free to contact
                            us.</h4>
                    </div>
                    <form action="#" method="post" accept-charset="utf-8">
                        <div class="modal-body" style="padding: 5px;">
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                                    <input class="form-control" name="firstname" placeholder="Firstname" type="text"
                                           required autofocus/>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                                    <input class="form-control" name="lastname" placeholder="Lastname" type="text"
                                           required/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                    <input class="form-control" name="email" placeholder="E-mail" type="text"
                                           required/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                    <input class="form-control" name="subject" placeholder="Subject" type="text"
                                           required/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <textarea style="resize:vertical;" class="form-control" placeholder="Message..."
                                              rows="6" name="comment" required></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer" style="margin-bottom:-14px;">
                            <input type="submit" class="btn btn-success" value="Send"/>
                            <!--<span class="glyphicon glyphicon-ok"></span>-->
                            <input type="reset" class="btn btn-danger" value="Clear"/>
                            <!--<span class="glyphicon glyphicon-remove"></span>-->
                            <button style="float: right;" type="button" class="btn btn-default btn-close"
                                    data-dismiss="modal">Close
                            </button>
                        </div>
                </div>
            </div>
        </div>
    </div>
</div>


</footer>
{% endblock %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/dist/js/bootstrap.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/affix.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/alert.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/modal.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/dropdown.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/scrollspy.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/tab.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/tooltip.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/popover.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/button.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/collapse.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/carousel.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/transition.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/test.js"></script>
<script src="{{ STATIC_URL }}accesss/test.js"></script>
<script src="{{ STATIC_URL }}footer/test.js"></script>

</body>
</html>
user3310881
  • 19
  • 1
  • 7

1 Answers1

0

The problem is in your base template. You're including jquery.js twice, bootstrap.js twice, actually thrice because you're including all the individual scripts for individual components of Bootstrap again.

Also if you're running this on a development server, chances are you won't have Internet always turned on. So, I don't see any point in using http://ajax.goo... or other online source for jQuery. Bootstrap comes with jquery.js already in /assets/js/ folder, so why not use that?

You should, perhaps, do this:

<script src="{{ STATIC_URL }}twitter_bootstrap/assets/js/jquery.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/dist/js/bootstrap.js"></script>

UPDATE:

Assign different ids to both the modals.

<!-- Sign in button -->
<a data-toggle="modal" data-target="#SignInModal" class="btn btn-primary" data original-title>Sign in</a>

<!-- Sign in modal -->
<div id="SignInModal"class="modal fade" tabindex="-1" role="dialog" aria-labelledby="signinLabel"aria-hidden="true" >
<!-- The code for sign in form -->
</div>

And then, if you want a contact button in your template, then make another link and modal for that:

<!-- Contact button -->
<a data-toggle="modal" data-target="#ContactModal" class="btn btn-primary" data original-title>Contact</a>

<!-- Contact Modal -->
<div id="ContactInModal"class="modal fade" tabindex="-1" role="dialog" aria-labelledby="contactLabel"aria-hidden="true" >
<!-- The code for contact form -->
</div>

Make sure you give both the modals different ids.

xyres
  • 20,487
  • 3
  • 56
  • 85
  • I failed to find this folder for Twitter Bootstrap 3.1.1. I found jquery.js in js/tests/vendor and when I copy this file under the template system of my project, so it can be eaten by django, jquery doesn't seem to work right. Do you think that my problem with freezing is just because the of external processing of jquery? I did a small test: if I leave one contact button in the body, it works. I copy this button to the header, it freezes... May be it's something else? Thanks for pointing anyway! I haven't thought about these type of problems completely.. – user3310881 Mar 20 '14 at 08:07
  • @user3310881 I copied all your `HTML` and pasted it in my project and it worked fine. That said, the problem is that you are including a script more than once. The point is to load jQuery, and to load it _only once_. Copy that `jquery.js` script and put in your `static` folder and specify its path in your templates: ` – xyres Mar 20 '14 at 09:09
  • just to be sure: did you copy the the button code which I posted (begins with – user3310881 Mar 20 '14 at 09:22
  • @user3310881 Oops. I just copied the code you posted in the first section above, not the second one. I've updated my answer. – xyres Mar 20 '14 at 09:30
  • Could you be a little be more explicit? As I use a button which is signin, and theoretically one modal. At least I understand it so :) And I don't understand how to use your solution.. – user3310881 Mar 20 '14 at 10:11
  • @user3310881 You want to make two modals/popups - one for _Sign in_ and other for _Contact_, right? So make two different links and two different modals . And give them different `id`s. That's it. I've updated my answer to put my point strongly. – xyres Mar 20 '14 at 10:51
  • Actually, I wanted just to substitute the login button I have with the one which opens modal. I followed your example, but still have the same. I tried to follow this: http://stackoverflow.com/questions/10636667/bootstrap-modal-appearing-under-background with – user3310881 Mar 20 '14 at 11:52