I`ve got two tabs:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="open-tab" data-toggle="tab" href="#open" role="tab" aria-controls="open" aria-selected="true">Active Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" id="close-tab" data-toggle="tab" href="#close" role="tab" aria-controls="close" aria-selected="false">Inactive Projects</a>
</li>
</ul>
The Model of the Application got a field {{app.is_active}}.
Is Filtering the tab with a script is the best option to only show "Active projects" in the active tab and "Inactive projects" in the inactive tab?
Many Thanks,
if you're not using django rest frame work.
it has a simple solution:
<ul class="nav nav-tabs" id="myTab" role="tablist">
{% for item in app_list %}
{% if item.is_active %}
<li class="nav-item active">
<a class="nav-link active" id="open-tab" data-toggle="tab" href="#open" role="tab" aria-controls="open" aria-selected="true">{{ item }}</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" id="close-tab" data-toggle="tab" href="#close" role="tab" aria-controls="close" aria-selected="false">{{ item }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
Related
views.py
from django.shortcuts import render
from ecommerceapp.models import Product
from django.db.models import Q
def searchResult(request):
products=None
query=None
if 'q' in request.GET:
query = request.GET.get('q')
products=Product.objects.all().filter(Q(name__contains=query) | Q(desc__contains=query))
return render(request,'search.html',{'query':query,'products':products})
In views.py I have imported a model named 'Product' of another application.
search.html
{% extends 'base.html' %}
{% load static %}
{% block metadescription %}
Welcome to FASHION STORE-Your Beauty
{% endblock %}
{% block title %}
Search-FASHION STORE
{% endblock %}
{% block content %}
<div>
<p class="text-center my_search_text">You have searched for :<b>"{{query}}"</b></p>
</div>
<div class="container">
<div class="row mx_auto">
{% for product in products %}
<div class="my_bottom_margin col-9 col-sm-12 col-md-6 col-lg-4" >
<div class="card text-center" style="min-width:18rem;">
<img class="card-img-top my_image" src="{{product.image.url}}" alt="{{product.name}}" style="height:400px; width:100%;">
<div class="card_body">
<h4>{{product.name}}</h4>
<p>₹{{product.price}}</p>
</div>
</div>
</div>
{% empty %}
<div class="row mx_auto">
<p class="text-center my_search_text">0 results found.</p>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
navbar.html
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown {% if 'ecommerceapp' in request.path %} active {% endif %} ">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Shop
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{% url 'ecommerceapp:allProductCategory' %}">All Products</a></li>
{% for cat in links %}
<li><a class="dropdown-item" href="{{cat.get_url}}">{{cat.name}}</a></li>
{% endfor %}
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href=""><i class="fa fa-shopping-cart"></i></a>
</li>
</ul>
<form class="d-flex" action="{% url 'search_app:searchResult' %}" method="get">
{% csrf_token %}
<input class="form-control me-2" type="search" placeholder="Search" name="q" aria-label="Search">
<button class="btn btn-outline-success" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</nav>
When I'm searching using search bar, not getting the correct results. When giving the word completely, correct results are getting.
Example: When I type x in the search bar, it give me the results 'shirt' instead of giving '0 results found'.
Example: When I type x in the search bar, it give me the results 'shirt' instead of giving '0 results found'.
The __contains is used to check whether the field contains given word or not, it is case-sensitive. And using | in Q objects means it is optional and works as OR condition, so maybe it is possible when you type x, the name field doesn't contains x but the field desc contain x that's why you are getting the shirt as instance or else you can simply put the query to Product.objects.filter(Q(name__contains=query)) and .all() only creates the copy of the Queryset so it doesn't require here.
I'm trying to display certain content in my navbar when a user is logged in, but {% if user.is_authenticated %} does not work when I add it to my HTML
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
{% if request.user.is_authenticated %}
<li class="nav-item active">
<a class="nav-item nav-link" id="home" href="/home">Home</a>
</li>
<li class="nav-item active">
<a class="nav-item nav-link" id="logOut" href="/logout">Log-out</a>
</li>
{% else %}
<li class="nav-item active">
<a class="nav-item nav-link" id="login" href="/login">Login</a>
</li>
<li class="nav-item active">
<a class="nav-item nav-link" id="signUp" href="/sign-up">Sign-up</a>
</li>
{% endif %}
</ul>
Flask-Login adds the current_user variable to your templates
{% if current_user.is_authenticated %}
...
{% else %}
...
{% endif %}
Got myself a bootstrap navbar like this:
<nav class="navbar navbar-expand-lg bg-light">
<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="nav nav-tabs" >
<li class="nav-item active">
<a class="nav-link" href="{{ url_for('user', username=current_user.username) }}" data-toggle="tab">User</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{{ url_for('home') }}" data-toggle="tab">Home</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
{% if current_user.is_anonymous %}
<li class="nav-item active">
<a class="nav-link" href="/login">Login</a>
</li>
{% else %}
<li class="nav-item active">
<a class="nav-link" href="/logout">Logout</a>
</li>
{% endif %}
</ul>
</div>
</nav>
but for some reason when i'm using the "data-toggle=tab" option the tabs start working but they don't redirect me to given urls, when i remove the "data-toggle=tab" urls work fine again
if you need to redirect to a link. No need to use data-toggle="tab". the href in an <a/> tag with data-toggle="tab" attribute means you're using bootstrap tabs which has a js counter part.
I am working on my web application using Python and Flask. I have got a navbar and some buttons on it and I would like to hide one of buttons when I am not on the index page. Is that possible? I would like the button "select brand" to be visible only on index.html page.
{% block navbar %}
<nav class="navbar navbar-expand-lg navbar-default fixed-top ">
<div class="container">
<div class="navbar-header">
<button button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="{{ url_for('main.index') }}" title="Mobile phones and accessories">
<img style="max-width:40px; margin-top: -9px;"
src="http://www.logospng.com/images/38/devfest-2016-38885.png" >
</a>
</div>
<div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
{% if current_user.is_authenticated and current_user.admin %}
<li>Add phone</li>
<li>Add brand</li>
{% endif %}
<li class="dropdown">
Select brand <span class="caret"></span>
<ul class="dropdown-menu">
{% for brand in brands %}
<li class="list-group-item">
{{ brand }}
{% endfor %}
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
{% if current_user.is_authenticated %}
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="glyphicon glyphicon-user"> </span> {{ current_user.username }}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="{{ url_for('auth.logout') }}" >Logout</a></li>
</ul>
</li>
{% else %}
<li><a class="nav-link" href="{{ url_for('auth.login') }}" >Login</a></li>
<li><a class="nav-link" href="{{ url_for('auth.register') }}" >Register</a></li>
{% endif %}
</ul>
<form class="navbar-form navbar-right" method='POST' action="{{ url_for('phones.search') }}">
<div class="form-group">
<input class="search-query form-control" placeholder="Search..." aria-label="Search" type="text" name="search">
</div>
</form>
</div>
</div>
</nav>
{% endblock %}
Create a new variable within your index route and pass that variable into the render_template method of said route. The presence of this variable will determine if the <button> or link within your <nav> should be rendered or not. Since the <nav> will be shared across all other layouts, its HTML code should be put within your base layout, or the layout which all other views are inheriting from.
Something along the lines of:
index route:
#app.route("/")
def index():
# isIndex is the variable we will use to determine
# whether or not to render your navigation link or button
return render_template('index.html', isIndex=True)
base layout file:
<div class="navbar-nav">
{% if isIndex %}
<a class="nav-item nav-link" href="">linkOnlyForIndexPage</a>
{% else %}
<a class="nav-item nav-link" href="">link1</a>
<a class="nav-item nav-link" href="">link2</a>
{% endif %}
</div>
This is exactly what you're already doing with {% if current_user.is_authenticated %} for your navigation links. The reason this works is because the index route is the only route which sets this variable, within your jinja2 templates, so all other routes which render corresponding views will default to false on this conditional check: {% if isIndex %}
Hopefully that helps!
I think this will work.
Set the following on your child pages:
{% set active_page = "index" %}
Then in your base template:
{% if active_page == "index" %}
... button html here
{% endif %}
I have the following header that I'm trying to get the multiple text from. I'm only able to get the text of menus Mobile App Guide, Quick Links, SDKs, Protocols & Plugins, and FAQ. But I'm not able to get the sub menu text.
I'm using elem.find_elements_by_css_selector("*") and elem.find_elements_by_xpath(".//*") which creates a list of all child elements under header tag.
I think its because I'm only iterating through to closest child of the parent element where if len(child.text) > 0. Anyone know how I can iterate through all the child elements (including sub menu) of the header tag?
from behave import given, when, then
from selenium.webdriver.common.keys import Keys
# #given('the user is on documentation home page')
# def on_home_page(context):
# context.driver.get("URL removed")
#when('the header is displayed')
def header_display(context):
assert context.driver.find_element_by_xpath('/html/body/header')
#then('the header should have {menu}')
def header_menu(context, menu):
elem = context.driver.find_element_by_tag_name("header")
all_children_by_css = elem.find_elements_by_css_selector("*")
all_children_by_xpath = elem.find_elements_by_xpath(".//*")
children = []
for child in all_children_by_xpath:
# print(len(child.text))
if len(child.text) > 0:
# print(child.text)
if child.text not in children:
children.append(child.text)
print(children)
if menu in children:
assert True
else:
assert False
Source code of page header
<header class="header docs-header">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>
<a title="LaunchKey Home Page" class="home-link" href="https://www.iovation.com/launchkey">
<img alt="LaunchKey Logo" class="header-logo" src="_static/images/logo-name.svg">
</a>
</h1>
</li>
<li class="toggle-topbar menu-icon">
<a href="#" title="menu-toggle">
<span> </span>
</a>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown">
<a href="#">Mobile App Guide
<i class="zmdi zmdi-chevron-down margin-left-qtr"></i>
</a>
<ul class="dropdown">
<li class="blue-hover">
Android
</li>
<li class="blue-hover">
iOS
</li>
</ul>
</li>
<li class="has-dropdown">
<a href="#">Quick Links
<i class="zmdi zmdi-chevron-down margin-left-qtr"></i>
</a>
<ul class="dropdown">
<li class="blue-hover">
Getting Started Guide
</li>
<li class="blue-hover">
API Reference
</li>
<li class="blue-hover">
Encryption
</li>
<li class="blue-hover">
Glossary of Terms
</li>
<li class="blue-hover">
Hackers
</li>
<li class="blue-hover">
Designers
</li>
<li class="blue-hover">
Support
</li>
</ul>
</li>
<li class="has-dropdown">
<a href="#">SDKs
<i class="zmdi zmdi-chevron-down margin-left-qtr"></i>
</a>
<ul class="dropdown">
<li class="blue-hover">
Desktop/Web MFA
</li>
<li class="blue-hover">
Native Mobile MFA
</li>
<li class="blue-hover">
Authenticator
</li>
</ul>
</li>
<li class="has-dropdown">
<a href="#">Protocols & Plugins
<i class="zmdi zmdi-chevron-down margin-left-qtr"></i>
</a>
<ul class="dropdown">
<li class="blue-hover">
WordPress
</li>
<li class="blue-hover">
Drupal
</li>
<li class="blue-hover">
OAuth
</li>
<li class="blue-hover">
OpenID
</li>
<li class="blue-hover">
SSH PAM
</li>
</ul>
</li>
<li class="blue-hover">
FAQ
</li>
</ul>
<ul class="right">
<li>
<div role="search">
<form id="rtd-search-form" class="wy-form" action="search.html" method="get">
<input type="text" name="q" placeholder="Search docs" tabindex="1" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
</li>
</ul>
</section>
</nav>
</header>