I'm using Bootstrap Tabs https://getbootstrap.com/docs/4.0/components/navs/#tabs
Is there a way to reverse to a specific Tab with get_success_url() ?
Someting like (but this does not work):
class UpdateModelView(UpdateView):
model = Model
def get_success_url(self):
return '{}#profile'.format(reverse('myApp'))
Update:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
</div>
Related
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static "bootstrap-4.5.2-dist/css/bootstrap.min.css" %}">
<!--Navbar Starts Here-->
{% include 'navbar.html' %}
<!--Navbar Ends-->
{% block headContent %}{% endblock headContent%}
<style>
table {
border-collapse: collapse;
width: 100% ;
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
tr:hover {
background-color: #dddddd
}
</style>
{% block stylesheet %}{% endblock %}
</head>
<div class="container">
<body>
<h2>{% block title %}
{% endblock title %}</h2>
{% block content %}
{% endblock content%}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> -->
<script src="{% static "jquery-3.5.1.min.js" %}"></script>
<script src="{% static "bootstrap-4.5.2-dist/js/bootstrap.min.js" %}"></script>
<script>
var testStatuses = document.getElementsByClassName('testStatus');
for (var i = 0; i < testStatuses.length; i++ ){
if( testStatuses[i].innerHTML == 0 ){
testStatuses[i].innerHTML = "Not Requested";
} else if( testStatuses[i].innerHTML == 1){
testStatuses[i].innerHTML = "Requested";
} else if (testStatuses[i].innerHTML == 2) {
testStatuses[i].innerHTML = "Processing";
} else if (testStatuses[i].innerHTML == 3) {
testStatuses[i].innerHTML = "Processed";
} else if (testStatuses[i].innerHTML == 4) {
testStatuses[i].innerHTML = "Results";
} else if (testStatuses[i].innerHTML == 5) {
testStatuses[i].innerHTML = "Reviewed";
}
}
</script>
{% block javascript %}{% endblock %}
</body>
</div>
</html>
<!--Navbar Starts Here-->
<nav class="navbar navbar-expand navbar-light mb-4" style="background-color: #e3f2fd;">
<a class="navbar-brand" href="#">VISL HIV</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
{% if user.is_superuser %}
<!-- <li class="nav-item active">
<a class="nav-link" href="/admin">Administration <span class="sr-only">(current)</span></a>
</li> -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Administration</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/admin/auth/group/">Groups</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/admin/auth/user/">Users</a>
</div>
</li>
<li class="nav-item active">
<!--<a class="nav-link" href="/admin/vigilant/sample/">Samples<span class="sr-only">(current)</span></a>-->
<a class="nav-link" href="/samples">Samples<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/personal">Personal<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<!-- <a class="nav-link" href="/admin/vigilant/order/">Orders<span class="sr-only">(current)</span></a> -->
<a class="nav-link" href="/tests">Tests<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/mutations">Mutations<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/sequences">Sequences<span class="sr-only">(current)</span></a>
</li>
{% endif %}
{% if user.is_authenticated %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Data Extraction</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/PatientSearch">Patient search</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/MutationSearch">mutation search</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/CladeSearch">Clade search</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/SampleDateSearch">Sample Date Search</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/NIHIDSearch">NIH ID Search</a>
</div>
</li>
{% endif %}
</ul>
<a class="nav-link" href="/help">Help<span class="sr-only">(current)</span></a>
{% if user.is_authenticated %}
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{user.username}}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/TBD">My Tasks</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/logout">Logout</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" action="#" method='GET'>
<input class="form-control mr-sm-2" type="search" name='q' aria-label="Search" placeholder='Search' value={{request.GET.q}} >
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
{% else %}
<a class="btn btn-outline-secondary" href="/login">Login</a>
<!-- <a class="btn btn-primary ml-2 mr-2" href="#">Register</a> -->
{% endif %}
</div>
</nav>
<!--Navbar Ends-->
I supposed to have the navbar like the this. but when I first runserver with my appA, it always show the navbar like a list menu, like the figure 2. If I run another appB runserver and rerun myapp A, the navbar goes normal like figure1. So it looks like if I want to get the normal Navbar in appA, I should first run anther appB and then I can get the normal navbar for appA
This is the navbar what I get if I run appA first after I open my computer. Thak you very much for any kind suggestions. It looks like the problem of static.
So, here is what I have in my app.py file:
from flask import Flask, render_template
from flask_bootstrap import Bootstrap
app = Flask( __name__)
Bootstrap(app)
#app.route('/')
def hello():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
Here is what I have in my index.html file:
{% extends "bootstrap/base.html" %}
{% block navbar %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
{% endblock %}
{% block content %}
{% endblock %}
First picture is what I expect to see, second picture is what I actually get. I've cleared all cache on my browsers, tried Google Chrome and Mozilla Firefox. Please advise.
Flask boostrap is dead i think the last commit was made over 3 years ago...
https://getbootstrap.com/docs/4.3/getting-started/introduction/
Use that starter template as your base.html and add the navbar there.
I have a django project that includes a popup modal. The modal has tabs as links. When the user clicks on one of the tabs, it must perform a function and retrieve data from the database.
The problem is that once the user clicked on the tab nothing happened, and the function isn't initialized.
urls.py
path("events/<int:id>/", getEvents, name = "getEvents"),
views.py
def getEvents(request,id):
q1 = cursor.execute('SELECT Person_.ID FROM Person_ WHERE Person_.ID = {0}'.format(id))
print('q1==>',q1)
qresult = q1.fetchone()
print("qresult==>",qresult)
print("query is not empty!")
eventQ = cursor.execute('SELECT Person_.ID, Person_.Full_Name, Events.ID, Events.Event_Title, Events.Event_Details, Links.document_id from Person_, Events, Links where ( Person_.ID = {0}) and (Person_.ID = Links.A_Person or Person_.ID = Links.B_Person) and (Events.ID = Links.A_Event or Events.ID = Links.B_Event) ORDER BY Events.ID DESC '.format(id))
resultEvents = eventQ.fetchall()
return render(request,'pictureCard.html',{
"resultEvents":resultEvents,
"qresult":qresult,
})
pictureCrads.html
<!-- Popup Modal -->
{% for obj in object_list %}
<div id="popModel{{obj.0}}" class="modal fade modal-rtl" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header Modal-Pic">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{ obj.1 }}</h4>
<img src="{% static '/img/card/1.png'%}"/>
</div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact{{ obj.0 }}" role="tab" aria-controls="contact" aria-selected="false">contact us</a>
</li>
<li class="nav-item">
<a class="nav-link" id="event-tab" data-toggle="tab" href="{% url 'getEvents' obj.0 %}" role="tab" aria-controls="event" aria-selected="false">Events</a>
</li>
<li class="nav-item mr-auto btn-warning">
<a class="nav-link text-dark" id="contact-tab" data-toggle="tab" href="#picture" role="tab" aria-controls="contact" aria-selected="false">Picture</a>
</li>
</ul>
<div class="modal-body tab-content" id="myTabContent">
<div class="tab-pane fade" id="contact{{ obj.0 }}" role="tabpanel" aria-labelledby="contact-tab">{{ obj.9 }}</div>
{% for event in resultEvents %}
<div class="tab-pane fade" id="event{{ obj.0 }}" role="tabpanel" aria-labelledby="event-tab">
<button class="btn btn-primary" > events</button>
{{ event.2 }}
</div>
{% endfor %}
<div class="tab-pane fade" id="picture" role="tabpanel" aria-labelledby="contact-tab">
<a class="" href="#"><img class="" src="{% static '/img/card/1.png'%}"/></a>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
......
<footer class="card-footer card-footer-buttom text-center bg-info">
<form method="GET" action="{% url 'getEvents' obj.0 %}">
detais
</form>
</footer>
Probably django does not know {% for obj in object_list %}. Because you are sending 2 variables which are resultEvents and qresult, but your html file is looking for 'object_list' dictionary or list. This might be the problem.
Hope this helps,
I want my main content and Sidewidget in the same row. With my knowledge of bootstrap grid, I tried to make this work but the sidewidget is stacking below the content and not in the sides. Here is the required snippets.
body.html
<!-- Navigation -->
{% include 'nav.html' %}
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 ">
{% block content %}
{% endblock %}
</div>
<div class="col-lg-4">
{% block sidewidget %}
{% endblock %}
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'js/tinymce/tinymce.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/tinymce/custom.js' %}" ></script>
nav.html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'add' %}">Add Article</a>
</li>
{% endif %}
</ul>
</div>
</div>
My {% block content %}
{% for post in posts %}
<h2 class="mt-4">{{post.title}}</h2>
<!-- Author -->
<p class="lead">
by
{{post.author}}
</p>
<hr>
<!-- Date/Time -->
<p class="lead">Published on <b>{{post.published_date}}</b></p>
<hr>
<!-- Preview Image -->
<img class="img-fluid" src="{{post.image.url}}" alt="Img Placeholder">
<p>{{post.images}}</p>
{% for tag in post.tags.all %}
<p>{{tag.name}}</p>
{% endfor %}
<hr>
<!-- Post Content -->
<p class="lead">{{post.content|safe|truncatewords:"60"|linebreaks}}</p>
<footer class="entry-footer">
<button class="btn btn-primary">Read More</button>
</footer>
<hr>
{% empty %}
<h1> Nothing to display</h1>
{% endfor %}
{% endblock %}
My {% Sidewidget %} block
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
Web Design
</li>
<li>
HTML
</li>
<li>
Freebies
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
JavaScript
</li>
<li>
CSS
</li>
<li>
Tutorials
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Side Widget</h5>
<div class="card-body">
You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
</div>
</div>
{% endblock %}
I have tried tweaking but nothing seems to work
I want the page like this:
|*****************************|
|navigationbar |
|*****************************|
|Post1(Col1-Col8) |SIDEWIDGET|
|***** | |
|Post2(Col1-Col8) | |
|***** | |
|PostN(Col1-Col8) | |
|*****************************|
|Footer |
Your code should work. The col-lg-* modifier applies only for screens that are over 1200px wide as per bootstrap's documentation. Maybe you're using a smaller screen and you also need to add the col-sm and col-md modifiers. Please try those and let me know if it works.
<div class="container">
<div class="row">
<div class="col-sm-8 col-lg-8 ">
{% block content %}
{% endblock %}
</div>
<div class="col-sm-4 col-lg-4">
{% block sidewidget %}
{% endblock %}
</div>
</div>
</div>
you can't use a bootstarp grid system for it because the sidewidget is going to take up the column of the whole three rows .You would have to use flex box for it. by using grid system columns can be individually used in different rows but you cannot have a whole column spanning over the different rows .
In the 'nav' section the 'nav' tag is not closed </nav>. close it and try again.
I think that will solve your problem.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'add' %}">Add Article</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
I have been encountering problems like this on the current bootstrap 3 for a while now. I have managed to fix them in the past in one way or another but have no clue of how to fix it this time.
I need to create two columns out of one ul by alternating a pull-left & pull-right on list items. What am I doing wrong?
http://bootply.com/92446
You should try using the Grid Template.
Here's what I've used for a two Column Layout of a <ul>
<ul class="list-group row">
<li class="list-group-item col-xs-6">Row1</li>
<li class="list-group-item col-xs-6">Row2</li>
<li class="list-group-item col-xs-6">Row3</li>
<li class="list-group-item col-xs-6">Row4</li>
<li class="list-group-item col-xs-6">Row5</li>
</ul>
This worked for me.
Thanks, Varun Rathore. It works perfectly!
For those who want graceful collapse from 4 items per row to 2 items per row depending on the screen width:
<ul class="list-group row">
<li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_1</li>
<li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_2</li>
<li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_3</li>
<li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_4</li>
<li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_5</li>
<li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_6</li>
<li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_7</li>
</ul>
you are thinking too much... Take a look at this [i think this is what you wanted - if not let me know]
http://www.bootply.com/118886
css
.even{background: red; color:white;}
.odd{background: darkred; color:white;}
html
<div class="container">
<ul class="list-unstyled">
<li class="col-md-6 odd">Dumby Content</li>
<li class="col-md-6 odd">Dumby Content</li>
<li class="col-md-6 even">Dumby Content</li>
<li class="col-md-6 even">Dumby Content</li>
<li class="col-md-6 odd">Dumby Content</li>
<li class="col-md-6 odd">Dumby Content</li>
</ul>
</div>