base.html
<body class="skin-red">
<!-- Site wrapper -->
<div class="wrapper">
<!-- #HEADER -->
{% include 'HEADER.html' %}
<!-- /#HEADER -->
<!-- #SIDEBAR -->
{% include 'SIDEBAR.html' %}
<!-- /#SIDEBAR -->
<!-- #BODY -->
{% block content %}
{% endblock %}
<!-- /#BODY -->
<!-- #FOOTER -->
{% include 'FOOTER.html' %}
<!-- /#FOOTER -->
{% block extrajavascript %}
{% endblock %}
</body>
HEADER.html:
<header class="main-header">
<b>Resource</b> Monitor <i class="fa fa-bar-chart-o" style="color:#ffd400"></i>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<ul class="nav navbar-nav">
<li>Home <span class="sr-only">(current)</span></li>
<li> PC information </li>
<li><a data-toggle="tab" href="#tab_sysuse">??? ???</a></li>
<li><a data-toggle="tab" href="#tab_procuse">???? ???</a></li>
<li><a data-toggle="tab" href="#tab_prodet">???? ????</a></li>
<li><a data-toggle="tab" href="#tab_sdwt">SDWT ????</a></li>
<li><a data-toggle="tab" href="#tab_pcevents">??? ?? ??</a></li>
<li><a data-toggle="tab" href="#tab_winevents">??? ?? ID? ??</a></li>
<li><a data-toggle="tab" href="#tab_agentinfo">Agent ????</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Email ?? ?? <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a data-toggle="tab" href="#tab_emailconfigs">??? ??</a></li>
<li><a data-toggle="tab" href="#tab_emailreceiver">??? ??</a></li>
</ul>
</li>
</ul>
</nav>
</header>
When I click header tab menu, I want to reload only
{% block content %}
{% endblock %}
not whole pages.. but now It reloaded the whole page..
There are formbox in my side bar and there are some values which user input. so I don't want to loose my user input by refresh whole page. Is there any solution..?
You need javascript AJAX api to get the content and change the html content using javascript DOM api if you need "without reload" function.
Django or any application server or http webserver works in a
request-response way, when a response is returned to the browser, the
server has no control to the client.
Related
I would like to create one indexview which content is completely visible with any browser (mobile and desktop) without the need of scrolling.
So I need any function which scale the content of the page (shrink html5 elements) so that all elements have their place on the screen.
At the moment I try to go with CSS.
I tried to set the max-height: 94vh (6vh are for my navbar) of my main container. But sadly that not works.
the included elements of the maincontainer are overlapping... So I have to scroll
Maybe this has something to the with the bootstrap cards?
The result looks like this: I have the undesirable scrollbar on the right (I would like to see all six cards without scroll, so the cards must be smaller...depending on the screensize):
Here my django templates:
Base template
<!-- Load nessessary static files-->
<!-- ===============================================================================================================================================-->
{% load static %}
<html>
<head>
<link rel="stylesheet" type="text/css" href="{% static 'css/base_style.css' %}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="//cdn.jsdelivr.net/npm/round-slider#1.5.1/dist/roundslider.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/round-slider#1.5.1/dist/roundslider.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="{% static 'img/greencube2.png' %}" width="30" height="30" class="d-inline-block align-top" alt="">
Greencube
</a>
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'rooms_index' %}">Raumübersicht</a>
<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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'rooms_detail' 3 %}">Schlafzimmer</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'rooms_detail' 1 %}">Wohnzimmer</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'rooms_detail' 2 %}">Badezimmer</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'rooms_detail' 5 %}">Küche</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'rooms_detail' 4 %}">Büro/Studio</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'rooms_detail' 6 %}">Garten</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" id="testid">
{% block page_content %}
{% endblock %}
</div>
</body>
{% block javascript %}{% endblock %}
</html>
CSS for my base template
body {
background: white url("img/leaf.png");
}
h1 {
color: white;
}
#testid{
background-color: blue;
max-height: 94vh;
}
IndexView
{% extends "base.html" %}
{% load static %}
{% block page_content %}
<div class="row">
{% for rooms in rooms %}
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="{% static rooms.image %}">
<div class="card-body">
<h5 class="card-title">{{ rooms.title }}</h5>
<p class="card-text">{{ rooms.description }}</p>
<label id="ActTmp{{ forloop.counter0 }}">{{ DBObjActhumidity.value }} °C</label>
<label id="Space{{ forloop.counter0 }}"> / </label>
<label id="ActHumy{{ forloop.counter0 }}">{{ DBObjActhumidity.value }} %</label>
<img id="windowimage{{ forloop.counter0 }}" src="{% static 'img/window_opened.png' %}" alt="Mein Bild" style="visibility: hidden; position: absolute;"><br>
<a href="{% url 'rooms_detail' rooms.pk %}"
class="btn btn-primary">
Raumsteuerung
</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
Do you have any idea how I can reach my goal?
Thank you for your response!
I have a Django homepage that has a Bootstrap navbar, and when resized I have it show a toggle button. My issue is that when this toggle button comes into effect, I cannot dropdown the navbar items? I am unsure how I can fix this.
Snip of what these look like (for an idea):
https://imgur.com/a/PyiUs38
This is my imports:
Pastebin: https://pastebin.com/QqPiyVxf
<!-- BOOTSTRAP CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- SCRIPTS -->
<script src="https://kit.fontawesome.com/879dc93f9e.js" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!--LOGO-->
<a class="navbar-brand" style="pointer-events: none">
<!-- Unclickable -->
<img src="http://www.w3.org/2000/svg" width="30" height="30" alt="">
</a>
<!--MAIN NAV-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo02">
{% with request.resolver_match.url_name as url_name %}
<ul class="navbar-nav">
<li class="nav-item {% if url_name == 'home' %}active{% endif %}">
<a class="nav-link" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item {% if url_name == 'about' %}active{% endif %}">
<a class="nav-link" href="{% url 'about' %}">About</a>
</li>
<li class="nav-item {% if url_name == 'projects' %}active{% endif %}">
<a class="nav-link" href="{% url 'projects' %}">Projects</a>
</li>
<li class="nav-item {% if url_name == 'uses' %}active{% endif %}">
<a class="nav-link" href="{% url 'uses' %}">Uses</a>
</li>
<li class="nav-item {% if url_name == 'contact' %}active{% endif %}">
<a class="nav-link" href="{% url 'contact' %}">Contact</a>
</li>
</ul>
{% endwith %}
</div>
<!--SOCIALS-->
<!-- Twitter -->
<a class="btn btn-primary" href="#" target="_blank" role="button" style="margin-left: 10px; background-color: #55acee; border-color: #55acee;">
<i class="fab fa-twitter"></i>
</a>
<!-- LinkedIn -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="margin: 10px 10px 10px 10px; background-color: #0082ca;border-color: #0082ca">
<i class="fab fa-linkedin-in"></i>
</a>
<!-- Github -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="background-color: #333333; border-color: #333333;">
<i class="fab fa-github"></i>
</a>
</nav>
These are my scripts at the bottom of the body:
<!-- SCRIPTS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Updated Working Snippet with Bootstrap 5.1 version
Bootstrap 5.1
I did following changes in your code
I used Bootstrap 5.1 version
I changed following attributes in button element
data-toggle="collapse"
data-target="#navbarTogglerDemo02"
Changed to
data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02"
Please check the following working snippet
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!--LOGO-->
<a class="navbar-brand" style="pointer-events: none">
<!-- Unclickable -->
<img src="http://www.w3.org/2000/svg" width="30" height="30" alt="">
</a>
<!--MAIN NAV-->
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo02">
{% with request.resolver_match.url_name as url_name %}
<ul class="navbar-nav">
<li class="nav-item {% if url_name == 'home' %}active{% endif %}">
<a class="nav-link" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item {% if url_name == 'about' %}active{% endif %}">
<a class="nav-link" href="{% url 'about' %}">About</a>
</li>
<li class="nav-item {% if url_name == 'projects' %}active{% endif %}">
<a class="nav-link" href="{% url 'projects' %}">Projects</a>
</li>
<li class="nav-item {% if url_name == 'uses' %}active{% endif %}">
<a class="nav-link" href="{% url 'uses' %}">Uses</a>
</li>
<li class="nav-item {% if url_name == 'contact' %}active{% endif %}">
<a class="nav-link" href="{% url 'contact' %}">Contact</a>
</li>
</ul>
{% endwith %}
</div>
<!--SOCIALS-->
<!-- Twitter -->
<a class="btn btn-primary" href="#" target="_blank" role="button" style="margin-left: 10px; background-color: #55acee; border-color: #55acee;">
<i class="fab fa-twitter"></i>
</a>
<!-- LinkedIn -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="margin: 10px 10px 10px 10px; background-color: #0082ca;border-color: #0082ca">
<i class="fab fa-linkedin-in"></i>
</a>
<!-- Github -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="background-color: #333333; border-color: #333333;">
<i class="fab fa-github"></i>
</a>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Updated Working Snippet with Bootstrap 3.4.1 version
Note: Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin. Thant's mean you have to call dropdown via javascript
Ex:
// Call the dropdowns via JavaScript___
$('.dropdown-toggle').dropdown();
Please check the following working snippet
$('.dropdown-toggle').dropdown();
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!--LOGO-->
<a class="navbar-brand" style="pointer-events: none">
<!-- Unclickable -->
<img src="http://www.w3.org/2000/svg" width="30" height="30" alt="">
</a>
<!--MAIN NAV-->
<button
type="button"
class="dropdown-toggle"
id="dropdownMenu1"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="true"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center dropdown-menu" id="navbar" aria-labelledby="dropdownMenu1">
{% with request.resolver_match.url_name as url_name %}
<ul class="navbar-nav">
<li class="nav-item {% if url_name == 'home' %}active{% endif %}">
<a class="nav-link" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item {% if url_name == 'about' %}active{% endif %}">
<a class="nav-link" href="{% url 'about' %}">About</a>
</li>
<li class="nav-item {% if url_name == 'projects' %}active{% endif %}">
<a class="nav-link" href="{% url 'projects' %}">Projects</a>
</li>
<li class="nav-item {% if url_name == 'uses' %}active{% endif %}">
<a class="nav-link" href="{% url 'uses' %}">Uses</a>
</li>
<li class="nav-item {% if url_name == 'contact' %}active{% endif %}">
<a class="nav-link" href="{% url 'contact' %}">Contact</a>
</li>
</ul>
{% endwith %}
</div>
<!--SOCIALS-->
<!-- Twitter -->
<a class="btn btn-primary" href="#" target="_blank" role="button" style="margin-left: 10px; background-color: #55acee; border-color: #55acee;">
<i class="fab fa-twitter"></i>
</a>
<!-- LinkedIn -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="margin: 10px 10px 10px 10px; background-color: #0082ca;border-color: #0082ca">
<i class="fab fa-linkedin-in"></i>
</a>
<!-- Github -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="background-color: #333333; border-color: #333333;">
<i class="fab fa-github"></i>
</a>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
Reference Link (My Another Stack Overflow Answer): https://stackoverflow.com/a/69763221/3073842
Does the html file link to the Bootstrap JavaScript dependency? It is required for navbars.
Include following JS libraries into your template file, right before the closing body tag,
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
I am trying to use jQuery with my django app but when I use the inspector and look at the .js file in Sources, I am seeing this error. I know this question has come up before, but I haven't been able to figure out how to fix it in my case. This is the HTML for the page I am trying to load:
{% extends 'great_songs_app/base.html' %}
{% load static %}
{% block content %}
<script src="{% static 'great_songs_app/playlist_jquery.js' %}">
</script>
--code--
{% endblock %
And this is my base HTML file:
{% load static %}
<html lang="en-US">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://rsms.me/inter/inter-ui.css" rel="preload" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="{% static 'great_songs_app/style.css' %}">
<title>Great Songs</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{% url 'great_songs:great_songs' %}">Great Songs</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:great_songs' %}">Songs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:artists' %}">Artists</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:genres' %}">Genres</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:producers' %}">Producers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:labels' %}">Labels</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:playlists' %}">Playlists</a>
</li>
</ul>
<ul class="navbar-nav" id="login-list">
{% if user.is_authenticated %}
<li class="nav-item login">
<a class="nav-link" href="{% url 'users:logout' %}" id=login>log out</a>
</li>
{% else %}
<li class="nav-item login">
<a class="nav-link" href="{% url 'users:login' %}" id=login>log in</a>
</li>
<li class="nav-item login">
<a class="nav-link" href="{% url 'users:register' %}">register</a>
</li>
{% endif %}
</ul>
</div>
</nav>
<div class="container">
{% block content %}
{% endblock %}
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
This is my jQuery file:
jQuery(document).ready(function($) {
$(".playlist-row").click(function() {
window.location = $(this).data("href");
});
});
I had a similar problem and just I pasted the js files inside head tag.
Here is my base.html
Then inside body tag, the {% block content %}{% endblock %}.
I am here with a good problem that I don't know how to fix it. I was putting some javascript inside my volt file and when I asked to click it works and load the page but the problem is that also copy and past part of my <head> files and part of my bootstrap navbar menu <nav>.
Bootstrap Menu code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav">
<li {% if view.url == '/' %}
class="active"
{% endif %}
><a class="navbar-brand" href="/">DaizCode</a></li>
</ul>
</div>
<?php
$this->view->url = $this->router->getRewriteUri();
?>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<?php if(isset($_SESSION['username']) == false) { ?>
<li {% if view.url == '/about' %}
class="active"
{% endif %}
>About Us
</li>
<li {% if view.url == 'auth/login' %}
class="active"
{% endif %}
>Login
</li>
<li {% if view.url == 'auth/register' %}
class="active"
{% endif %}
>Register
</li>
<?php } else { ?>
<li {% if view.url == '/auth/dashboard' %}
class="active"
{% endif %}
><img src="http://www.daizcode.com/img/activity-icon.png" />
</li>
<li {% if view.url == '/auth/dashboard/learn' %}
class="active"
{% endif %}
><img src="http://www.daizcode.com/img/learn-icon.png" />
</li>
<li {% if view.url == 'auth/dashboard/discussions' %}
class="active"
{% endif %}
><img src="http://www.daizcode.com/img/conv-icon.png" />
</li>
<li {% if view.url == 'auth/dashboard/notifications' %}
class="active"
{% endif %}
><img src="http://www.daizcode.com/img/globe-icon.png" />
</li>
<li {% if view.url == 'auth/dashboard/inbox' %}
class="active"
{% endif %}
><img src="http://www.daizcode.com/img/inbox-icon.png" />
</li>
<?php } ?>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
{{ content() }}
{{ content() }} is part of the volt template where it goes pick the other pages immediately to show it.
I have some PHP so I can show different menu after the user be on or not.
Here it is the nav file (nav.volt) code:
<input type="text" class="user-login" name="user-login" placeholder="Username..." />
<input type="password" class="password-login" name="pwd" placeholder="Password..." />
X
Here I let you my volt page (script part):
{{ javascript_include('/js/jquery-3.1.1.js') }}
{{ javascript_include('/js/jquery-3.1.1.min.js') }}
{{ javascript_include('/js/bootstrap.min.js') }}
<script type="text/javascript">
$(".login").click(function() {
$(".navbar-right").load("auth/login/nav");
return false;
});
</script>
Here I can show you the image where you see the inspect of the page, and it is inspecting after the click of class .login which is in bootstrap navbar. The code I want to show on it is there after the red rectangle.
What I want to know is how can I remove what's inside of the rectangle. See the image below.
Google Chrome Inspect of the problem I said above
Updated image problem
Thank you.
You can add this to fetch specific part of the file ,
This would load the input elements and a tag after input element with out loading nav or any other tags.
<script type="text/javascript">
$(".login").click(function() {
$(".navbar-right").load("auth/login/nav input,input+a");
return false;
});
</script>
Hope this helps
My bootstrap Navbar is not clickable when I use javascript to highlight active link
Here is my code:
<script type="text/javascript">
$('.nav.navbar-nav > li').on('click', function (e) {
e.preventDefault();
$('.nav.navbar-nav > li').removeClass('active');
$(this).addClass('active');
});
</script>
And this is my navigation menu
<nav class="navbar navbar-inverse navbar-static-top" >
<div class="container-fluid" >
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#" title="Fidel MRP">
<img style="max-width:85px; margin-top: -18px; background-color: grey;
"src="/static/img/Fidel MRP-logo.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li>Sales</li>
<li>Purchase</li>
<li>Inventory</li>
<li>Manufacture</li>
<li>Settings</li>
<li class="devider"></li>
</ul>
<ul class ="nav navbar-nav navbar-right">
{% if request.user.is_authenticated %}
<li ><a href="{% url 'auth_logout' %}" %> {{user}} Logout </a></li>
{% else %}
<li ><a href="{% url 'registration_register' %}" %> Register </a></li>
{% endif %}
<li><div class="form">
{% if not request.user.is_authenticated and not "/accounts/login" in request.get_full_path %}
<form class='navbar-form navbar-right' method='POST' action='{% url "auth_login" %}'>{% csrf_token %}
<div class='form-group'>
<input type='text' class='form-control' name='username' placeholder='Username' />
</div>
<div class='form-group'>
<input type='password' class='form-control' name='password' placeholder='Password' />
</div>
<button type='submit' class='btn btn-default'>Login</button>
</form>
{% endif %}
</li>
</ul>
</div>
</div><!-- /.navbar-collapse -->
</div>
</nav>
The problem is
I am using javascript provided to get the visual effect on active menu item after onClick. This script works, but the hyperlink stop working .(So I have to disable the script in order to be able to navigate)
What could be the reason and how can it be resolved?
e.preventDefault(); is stopping the default behavior of the anchor. (navigating to the href).
Removing it will let the browser navigate to the new page when clicked.