JavaScript element issue in Twig template with Symfony 2 - javascript

I have an issue with Javascript elements in my twig template.
JS carousel element on top of the page is not loading when href path when site menu is changed from a id style reference (e.g href = "#terms") to link to a different page (e.g href={{ path('terms') }}.
This is my part of index.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> {% block title %} Test Script {% endblock %}</title>
<link rel="shortcut icon" href="{{ asset('favicon.ico') }}"/>
{% block stylesheets %}
{% stylesheets 'bundles/useruser/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css"/>
{% endstylesheets %}
{% endblock %}
<script type="text/javascript" charset="utf-8" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
{% block javascripts %}
{% javascripts '#UserUserBundle/Resources/public/js/*' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
</head>
<body>
{% block body %}
<div id="sTop" class="site-main">
<div class="site-header">
<div class="main-header">
<div class="container">
<div id="menu-wrapper">
<div class="row">
<div class="logo-wrapper col-md-4 col-sm-2 col-xs-8">
<h1>
<a>Travel Flex</a>
</h1>
</div>
<div class="col-md-8 col-sm-10 col-xs-4 main-menu text-left">
<ul class="menu-first hidden-sm hidden-xs">
<li class="active">{{ 'About' }}</li>
<li>{{ 'Terms & Conditions' }}</li>
<li>{{ 'Privacy Policy' }}</li>
<li>{{ 'Subscribe' }}</li>
<li>{{ 'Unsubscribe' }}</li>
</ul>
<i class="fa fa-bars"></i>
</div>
</div>
</div>
<div class="menu-responsive hidden-md hidden-lg">
<ul>
<li class="active">{{ 'About' }}</li>
<li>{{ 'Terms & Conditions' }}</li>
<li>{{ 'Privacy Policy' }}</li>
<li>{{ 'Subscribe' }}</li>
<li>{{ 'Unsubscribe' }}</li>
</ul>
</div>
</div>
</div>
</div>
<div class="site-slider">
<div class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<div class="overlay"></div>
<img src="{{ asset('bundles/useruser/images/slide1.jpg') }}" alt="">
<div class="slider-caption visible-md visible-lg">
<h2>test text 1</h2>
<p>test text 1</p>
</div>
</li>
<li>
<div class="overlay"></div>
<img src="{{ asset('bundles/useruser/images/slide2.jpg') }}" alt="">
<div class="slider-caption visible-md visible-lg">
<h2>test text2</h2>
<p>test text 2</p>
</div>
</li>
<li>
<div class="overlay"></div>
<img src="{{ asset('bundles/useruser/images/slide3.jpg') }}" alt="">
<div class="slider-caption visible-md visible-lg">
<h2>test text 3</h2>
<p>test text 3</p>
</div>
</li>
</ul>
</div> <!-- /.flexslider -->
</div> <!-- /.slider -->
</div> <!-- /.site-slider -->
</div> <!-- /.site-main -->
Carousel element is loading fine when i use href = "#terms".
However link does not work as it should (links in red rectangular not redirecting to a different page).
When i use href={{ path('terms') }} link works as it should, however carousel element is not loaded.
Looks like there is an issue with how i include js files into index.html.twig however i am not sure how to fir it. Below is the error from browser console:
Any assistance is appriciated

Replace the Include jQuery Library Code Snippet like below
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Checkout other jQuery CDN or save the file to your server.
http://www.w3schools.com/jquery/jquery_get_started.asp
Add Absolute URL for your Slider images
{{ absolute_url(asset('bundles/useruser/images/slide1.jpg')) }}

Related

Materialize css | js - visualization issue in the Carousel Slides

In the home page of my website there's a Materialize carousel with 3 slides.
The page is a python flask template an the Materialize carousel is injected in the page, this is the base.html template
<!DOCTYPE html>
<html class="home-bkg">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ga4MeasurementId}}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', '{{ga4MeasurementId}}');
</script>
{% block viewItemListAccessories %}{% endblock %}
{% block viewItemListBags %}{% endblock %}
{% block viewItemAccessory %}{% endblock %}
{% block viewItemBag %}{% endblock %}
<meta charset="utf-8" />
{% block homeTitle %}{% endblock %}
{% block bagsTitle %}{% endblock %}
{% block accessoriesTitle %}{% endblock %}
{% block reimaginedTitle %}{% endblock %}
{% block makingOfTitle %}{% endblock %}
{% block pressTitle %}{% endblock %}
{% block bagTitle %}{% endblock %}
{% block legalTitle %}{% endblock %}
<!--Import Google Icon Font -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import Font awesome icons -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!--Import Google Font-->
<link href="https://fonts.googleapis.com/css2?family=Arimo&family=Playfair+Display+Lato&display=swap"
rel="stylesheet">
<!--Import main.css and materialize.css-->
<link type="text/css" rel="stylesheet" href="{{url_for('static', filename='css/main.css')}}" />
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/materialize.min.css')}}"
media="screen,projection" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
{% block homeMeta %}{% endblock %}
{% block accessoriesMeta %}{% endblock %}
{% block reimaginedMeta %}{% endblock %}
{% block bagMeta %}{% endblock %}
{% block bagsMeta %}{% endblock %}
{% block legalMeta %}{% endblock %}
{% block makingOfMeta %}{% endblock %}
{% block pressMeta %}{% endblock %}
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>
<body>
<div>
<!-- header-menu -->
<div class="row no-margin-bottom">
<div class="header-menu valign-wrapper center-align">
<div class="col l1"></div>
<div class="col s12 m12 l3">
<!--main logo-->
<a href="/">
<img src="{{ url_for('static', filename='images/logo_black.png') }}" id="logo"
class="responsive-img" width="275" /></img>
</a>
</div>
<div class="col s12 m4 l2"><a id="bags" class="top-menu-item" href="/bags">BAGS</a></div>
<div class="col s12 m4 l2"><a id="accessries" class="top-menu-item" href="/accessories">ACCESSORIES</a>
</div>
<div class="col s12 m4 l2"><a id="lostAndFound" class="top-menu-item" href="/reimagined">REIMAGINED</a>
</div>
<div class="col l1"></div>
</div>
</div>
{% block home %}{% endblock %}
{% block bags %}{% endblock %}
{% block accessories %}{% endblock %}
{% block reimagined %}{% endblock %}
{% block makingOf %}{% endblock %}
{% block press %}{% endblock %}
{% block bag %}{% endblock %}
{% block accessory %}{% endblock %}
{% block legal %}{% endblock %}
<!-- footer -->
<div class="row">
<div class="footer valign-wrapper center-align">
<div class="col offset-s2 s8 offset-s2 m2 l1"><a id="imemoi" class="footer-item"
href="/imemoi">IMEMOI</a></div>
<div class="col offset-s2 s8 offset-s2 m2 l1"><a id="press" class="footer-item" href="/press">PRESS</a>
</div>
<div class="col offset-s2 s8 offset-s2 m4 l4 social-icons fa-lg">
<ul>
<li id="fb-icon"><a href="http://www.facebook.com/pages/imemoi/137151246299509"
target="_blank"><i class="fa fa-facebook footer-item"></i></a></li>
<li id="is-icon"><a href="http://instagram.com/imemoi_paris" target="_blank"><i
class="fa fa-instagram footer-item"></i></a></li>
<li id="pi-icon"><a href="http://pinterest.com/imemoi/" target="_blank"><i
class="fa fa-pinterest footer-item"></i></a></li>
</ul>
</div>
<div class="col offset-s2 s8 offset-s2 m4 l3"><a id="making-of" class="footer-item"
href="/making-of">MAKING OF & ENGAGEMENT</a></div>
<div class="col offset-s2 s8 offset-s2 offset-m4 m4 offset-m4 l1"><a id="legal" class="footer-item"
href="/legal">LEGAL</a></div>
<div class="col offset-s2 s8 offset-s2 offset-m4 m4 offset-m4 l2"><a id="contact-us" class="footer-item"
href="/contactUs">CONTACT US</a></div>
</div>
</div>
<div class="row">
<div class="subscribe valign-wrapper center-align">
<div class="input-field col s8 offset-m4 m4 offset-m4 offset-l4 l4 offset-l4">
<input id="subscriberEmail" type="email" class="validate"></input>
<label for="subscriberEmail">SUBSCRIBE</label>
<span class="promo">YOU'LL GET THE 15% OFF !!!</span>
</div>
<a id="subscriberBtn" class="waves-effect waves-light btn black"><i
class="material-icons right">send</i></a>
</div>
</div>
<div class="footer-copyright">
<div class="imemoi-copyright center-align">
Powered By IMEMOI - © Copyright 2011-2020 - VAT IT02883161206</a>
</div>
</div>
</div>
<!--jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--JavaScript -->
<script type="text/javascript" src="{{url_for('static', filename='js/materialize.min.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='js/main.js')}}"></script>
</body>
</html>
And this is the home.html template containing the carousel and the slides:
{% extends 'base.html' %}
{% block homeTitle %}
<title>imemoi: exclusive luxury bags | home</title>
{% endblock %}
{% block homeMeta %}
<meta name="description" content="happy few maximalist accessories & much more handmade in italy ★ 100% upcliclyng" />
<meta property="og:url" content="https://www.imemoi.com/" />
<meta property="og:image" content="https://www.imemoi.com/static/images/home_slide_3.jpg" />
<meta property="og:description" content="happy few maximalist accessories & much more handmade in italy ★ 100% upcliclyng" />
<meta property="og:type" content="website" />
{% endblock %}
{% block home %}
<div class="row">
<div class="carousel carousel-slider">
<a class="carousel-item" href="https://www.imemoi.com/"><img src="static/images/home_slide_1.jpg" alt="First slide"></a>
<a class="carousel-item" href="https://www.imemoi.com/"><img src="static/images/home_slide_2.jpg" alt="Second slide"></a>
<a class="carousel-item" href="https://www.imemoi.com/"><img src="static/images/home_slide_3.jpg" alt="Third slide"></a>
</div>
</div>
{% endblock %}
This is the Javascript that initialize the carousel:
$(document).ready(function () {
$('.carousel.carousel-slider').carousel({fullWidth: true });
window.setInterval(function () { $('.carousel').carousel('next') }, 4000);
});
The problem is this: when I load the page in the browser, the image is cutted and it remains cutted until I resize the screen, after resizing the screen the image dispays correctly:
I tried to solve the issue adding into the .css file this:
.slider{
height: 770.987px;
}
but then I have problems with the mobile visualization: there's empty space below the slide.
Last thig: images are all 3360 x 2240 pixels
I basically need to include the carousel in a way in which it will be visualized properly on laptop and mobile.
Basically the issue consists in the fact that the carousel is initialized before the images ar loaded and so the carousel height is not calculated properly.
Initializing the carousel when all the page is loaded and not only the DOM will solve the issue:
$( window ).on( "load", function() {
$('.carousel.carousel-slider').carousel({ fullWidth: true });
window.setInterval(function () { $('.carousel').carousel('next') }, 4000);
});

Displaying jquery result, data there but not displaying

Using flask and jquery. I can see the data returned in dev tools but i'ts not displaying.
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>integrator</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/skel.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/skel-layers.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/init.js') }}"></script>
<script src="{{ url_for('static', filename='js/searchUpdate.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/skel.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
</head>
<body id="top">
<!-- Header -->
<header id="header" class="skel-layers-fixed">
<h1>Integrator</h1>
<nav id="nav">
<ul>
<li>Home</li>
<li>Acct. Info</li>
<li>Ticket Search</li>
<li>Sharepoint</li>
</ul>
</nav>
</header>
<!-- Banner -->
<section id="banner">
<div class="inner">
<h2>integrator</h2>
<p>CNG service integrator</p>
<p><form class="pure-form" action="/clientLookup" method="post">
<input type="text" class="pure-input-rounded" name="clientID">
<button type="submit" class="pure-button">Search</button>
</form></p>
</div>
</section>
<!-- One -->
{% block content %}
{% endblock %}
<!-- Two -->
{% block secondContent %}
{% endblock %}
<!-- Three -->
{% block searchContent %}
{% endblock %}
<!-- Footer -->
<footer id="footer">
<div class="container">
<div class="row double">
<div class="6u">
<div class="row collapse-at-2">
<div class="6u">
<h3>Links</h3>
<ul class="alt">
<li>Link to stuff</li>
<li>Link to stuff</li>
<li>Link to stuff</li>
</ul>
</div>
<div class="6u">
<h3>Links</h3>
<ul class="alt">
<li>Link to stuff</li>
<li>Link to stuff</li>
<li>Link to stuff</li>
</ul>
</div>
</div>
</div>
<div class="6u">
<h2>integrator</h2>
<p>Connecting Sharepoint, Tigerpaw, Appenate,
Teams, and documentation into one interface</p>
</div>
</div>
<ul class="copyright">
<li>© Untitled. All rights reserved.</li>
</ul>
</div>
</footer>
</body>
</html>
searchUpdate.js
$(function() {
$('a#process_input').bind('click', function() {
$.getJSON('/soSearch', {
searchTerm: $('input[name="searchTerm"]').val(),
workType: $('input[name="workType"]:checked').val(),
clientID: $('input[name="acctNumber"]').val(),
}, function(data) {
$("#result").text(data.result);
});
return false;
});
});
related html block for index. held in clientInfo.html ( if it matters all 3 blocks are in this same file)
{% block searchContent %}
<section id="three" class="wrapper style1">
<div class="container">
<div class="row">
<div class="12u">
<section>
<h2>SO Search</h2>
<img src="{{ url_for('static', filename='images/pic03.jpg') }}" alt="" />
<form class="pure-form">
<fieldset>
<p>
<input type="text" placeholder="searchterm" name="searchTerm">
<input type="hidden" name="acctNumber" value="{{ infoItems[0]['AccountNumber'] }}">
<label for="option-one" class="pure-radio">
<input id="option-one" type="radio" name="workType" value="WorkPerformed">
Work Performed
</label>
<label for="option-two" class="pure-radio">
<input id="option-two" type="radio" name="workType" value="WorkRequested">
Work requested
</label>
<a href=# id=process_input><button class='pure-button'>Search</button></a>
</p>
</fieldset>
</form>
<p id=result></p>
</section>
</div>
</div>
</div>
</section>
{% endblock %}
Everything works up until trying to display the returned data. Nothing is shown in
<p id=result></p>
I was using this Python/AJAX as my go to.
Once I click search everything works. I can see in dev tools the json is handed back. Like I said, nothing is shown.
As a secondary question, since I'm passing back a good bit of info the <p> isn't going to work, it's just for testing. Should I assume that if I want to build a dynamic table of returned data that has to be done inside the js as opposed to python since there is no real page refresh?
Turns out the example I was using was wrong. Changed to:
$.getJSON('/soSearch', {
searchTerm: $('input[name="searchTerm"]').val(),
workType: $('input[name="workType"]:checked').val(),
clientID: $('input[name="acctNumber"] option:selected').val(),
}, function(data) {
resultList = '<ul class="alt">';
for ( x in data) {
console.log(data[x]);
resultList += '<li><b>' + x + ' </b> : ' + data[x] + '</li>';
}
resultList += '</ul>';
//console.log(JSON.stringify(data[0][0]));
$('#result').html(resultList);
});
return false;
});
Overall it was the .text to .html that made it display.

Django Project - bootstrap navigation with javascript script not working - Where should JavaScript go?

I have a Django project, in which I have a simple front-end bootstrap horizontal navigation bar (taken from here: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_ref_js_tab_js&stacked=h).
In it, a user clicks on a tab, and it displays the information for that tab, on click.
In this case, I have used django templating language and crispy forms to generate a form inside tab 1. This renders fine, and looks correct in terms of formatting and layout, but, the tabs are not functional. I have looked at other stackoverflow questions, but none are specific to what I am asking.
The functionality of the tabs, I assume, is controlled by the Javascript code snippet:
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
</script>
As a newbie to Django and front-end design, I am struggling to see, a) where I have made the mistake and what needs to be corrected in order for the tabs to function correctly on-click. b) how javascript is implemented inside of the whole structure of a Django html template.
By this,I mean, Javascript is usually put inside the 'head' tags, but in this case templates extend a base template in which there is a head, so I am unsure of where Javascript should go. Should I for example, be using external Javascript files in each case? What is best practice? Where should it go in relation to where the "{% blocks" (start and end) go?
A useful answer would
a) point out the error in the code such that my tabs will work
b) explain a little about the layout/structure of where JavaScript snippets go, which add to html/boostrap functionality, inside of a Django-based template and within the framework of using Django Templating language.
The whole code for my profile.html is shown below
{% extends "socialmedia/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="content-section">
<div class="media">
<img class="rounded-circle account-img" src="{{ user.profile.image.url }}">
<div class="media-body">
<h2 class="account-heading">{{ user.username }}</h2>
<p class="text-secondary">{{ user.email }}</p>
</div>
</div>
<div class="container mt-3">
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#home">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu1">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu2">Tab 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu3">Tab 4</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>Tab 1</h3>
<p>Please fill in your account/profile information here.</p>
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4">Profile Information</legend>
{{u_form|crispy}}
{{p_form|crispy}}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Update....</button>
</div>
</form>
</div>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Tab 2</h3>
<p>Tab 2 information here</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Tab 3</h3>
<p>Tab 3 information will go here</p>
</div>
<div id="menu3" class="container tab-pane fade"><br>
<h3>Calendar</h3>
<p>Manage your Calendar</p>
</div>
</div>
</div>
{% endblock content %}
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
</script>
What I've tried: I have tried putting the javascript code in various places - such as before the {% endblock content %} and at the top of the page, but neither has worked.
Update:
I noticed that above the cdn/css hasn't been added. On adding this, it messes up the formatting, and the on-click, sort of works, but not correctly.
The updated code is as below. Again, I'd need suggestions as to where to correctly place this block of code for correct formatting and functionality, as well as the javascript code.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Updated profile.html
The following now renders the page incorrectly, moving up the image at the top and the username and email variables in an undesirable fashion. Furthermore, the tabs work, but not completely. The crispy form is generated in each tab, instead of just the first, and the content of the other tabs is shown underneath.
{% extends "socialmedia/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<!--- this code has been added as per the update above -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="content-section">
<div class="media">
<img class="rounded-circle account-img" src="{{ user.profile.image.url }}">
<div class="media-body">
<h2 class="account-heading">{{ user.username }}</h2>
<p class="text-secondary">{{ user.email }}</p>
</div>
</div>
<div class="container mt-3">
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#home">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu1">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu2">Tab 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu3">Tab 4</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>Tab 1</h3>
<p>Please fill in your account/profile information here.</p>
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4">Profile Information</legend>
{{u_form|crispy}}
{{p_form|crispy}}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Update....</button>
</div>
</form>
</div>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Tab 2</h3>
<p>Tab 2 information here</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Tab 3</h3>
<p>Tab 3 information will go here</p>
</div>
<div id="menu3" class="container tab-pane fade"><br>
<h3>Calendar</h3>
<p>Manage your Calendar</p>
</div>
</div>
</div>
{% endblock content %}
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
</script>
I am also including my base template, base.html (which does include a head and a body) below.
{% load static %}
<html>
<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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
{% if title %}
<title>Fakebook Blog Posts - {{title}}</title>
{% else %}
<title>Fakebook Blog</title>
{% endif %}
<!--this is django templating language-->
<link rel="stylesheet" href="{% static 'worldguestbook\main2.css' %}"/>
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="/">FakeBook Newsfeed</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="{% url 'socialmedia-home' %}">Home</a>
<a class="nav-item nav-link" href="{% url 'socialmedia-about' %}">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
{% if user.is_authenticated %}
<a class="nav-item nav-link" href="{% url 'post-create' %}">New Post</a>
<a class="nav-item nav-link" href="{% url 'profile' %}">Profile</a>
<a class="nav-item nav-link" href="{% url 'logout' %}">Logout</a>
{% else %}
<a class="nav-item nav-link" href="{% url 'login' %}">Login</a>
<a class="nav-item nav-link" href="{% url 'register' %}">Register</a>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{message.tags}}">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% block content %}{% endblock %}
</div>
<div class="col-md-4">
<div class="content-section">
<h3>Our Sidebar</h3>
<p class='text-muted'>You can put any information here you'd like.
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>
<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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I came across a possible answer (not on stackoverflow) which suggested, that adding a DTL block in the base template like this:
{% block extra_js %}{% endblock extra_js %}
and then adding the script inside those tags in the profile.html page, would work, but it hasn't either. (see below addition that I've tried)
added to the base.html...
<body>
{% block extra_js %}{% endblock extra_js %}
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
in the profile.html ....
<h3>Calendar</h3>
<p>Manage your Calendar</p>
</div>
</div>
</div>
{% block extra_js %}
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
</script>
{% endblock extra_js %}
{% endblock content %}
The above, doesn't work at all.
But, on adding even more additional blocks to the base, and then adding the css in those blocks in the profile.html, the same problem as described above occurs. (tabs are clickable, but the form content is shown in all of them, and also the tab content is generated at the bottom like an overflow).
To clarify, the below is added to profile.html
{% block extra_css %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
{% endblock extra_css %}
with this added to base.html (in the head)
<head>
{% block extra_css %}{% endblock extra_css %}

How to dynamically update the contents of a div in HTML and maintain the previous style?

I have made a dashboard using Flask (Python) that displays the images present on a folder in my Desktop. Now, that folder is going to be updated with new images every 5 seconds or so and that's why I would like to update my website with the new images. I figured that using Javascript/Jquery AJAX would be best for smooth user experience. I succesfully managed to update my dashboard every 2 seconds using Jquery as shown in the following code.
However my problem is loss of styling. As you can see in the 1st screenshot , the Jumbotron is perfectly inside the inner boundary. But in the 2nd image you can see that the entire central portion of the website including the Jumbotron and the images shift slightly from centre. The red marking on the image indicates the shift. So, I wanted to know how can I prevent Jquery from changing my style. I want the refreshed page to replace the previous page as it is.
Here are my codes -
Flask routes.py -
#app.route('/image/<im>')
#login_required
def image(im):
image_src=[im+'/'+i for i in os.listdir(os.path.join(app.static_folder,im))]
rows=math.ceil(len(image_src)/3)
print(image_src)
return render_template('dashboard.html',title='Welcome',images=image_src,rows=rows,image_date=im)
HTML - dashboard.html
{% extends "base.html" %}
{% block content %}
<hr>
<div class="container dash-container main-body image-area" >
<div class="row">
<br>
<hr >
<br>
<div class="col-md-12">
<div class="jumbotron ">
<h1 id="hdr">DASHBOARD</h1>
</div>
</div>
</div>
{% if images %}
<div class="row" id="info">
<span class="glyphicon glyphicon-backward" aria-hidden="true"></span>
</div>
<br><br>
<div class="row">
<div class="col-md-12" id="info">
{% set ns = namespace(counter=0) %}
<table class="table table-hover table-condensed table-bordered images-table" cellspacing="5" cellpadding="5">
{% for row in range(rows) %}
<tr class="image-hover">
{% for data in range(3) %}
{% if ns.counter < images|length %}
<td style="width:10%;">
<img src="{{ url_for('static',filename=images[ns.counter]) }}" alt="User Image" width="220" height="220">
<br>
{% set ns.counter = ns.counter + 1 %}
</td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</table>
</div>
</div>
{% endif %}
</div>
<script type="text/javascript">
setInterval(function(){
$('.image-area').load("{{ url_for('image',im=image_date) }}");
}, 2000)
</script>
{% endblock %}
The HTML file basically arranges the images in rows with max items of 3 per row.
CSS - dashboard.css
#info{
font-size: 23px;
font-family: 'Saira',sans-serif;
text-align: center;
color: black;
}
.dash-container{
height: 100%;
}
.images-table{
width: auto !important;
margin-left: 10%;
margin-right: 10%;
}
.folder-link {
color:black /*#1cd1ff*/;
font-size: 30px;
}
table tr.row-hover:hover{
background-color: #190101;
}
table tr.row-hover:hover .folder-link{
color:white;
}
table tr.image-hover:hover .folder-link{
color:black;
}
table tr.row-hover:hover .folder-link:hover{
color:#00ff83;
}
table.images-table tr.image-hover:hover{
background-color: black;
}
table.images-table tr.image-hover td:hover{
background-color: white;
}
Here are the Images . Image 1 is the default website without any javascript and Image 2 is the website after ajax calls.
I want the refreshed page to perfectly overwrite the previous view and not produce the shift from center.
Please help.
EDIT 1:
I have noticed that if i replace the class selector in Jquery with 'body' tag, the styling is retained. However, unlike previous type, the page refresh takes atleast 3x more time.
$('.image-area').load("{{ url_for('image',im=image_date) }}");
changed to
$('body').load("{{ url_for('image',im=image_date) }}");
Here is my base.html code -
<!DOCTYPE html>
<html>
<head>
{{ moment.include_jquery() }}
{{ moment.include_moment() }}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/base.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/about.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/index.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/dashboard.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/display.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/feedback.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/login.css') }}">
<link href="https://fonts.googleapis.com/css?family=Saira" rel="stylesheet">
{% if title %}
<title>{{ title }}</title>
{% else %}
<title>Welcome_segregator</title>
{% endif %}
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-custom">
<div class="container" >
<div class="navbar-header">
{% if current_user.username %}
<a class="navbar-brand nav-custom" href="{{ url_for('index') }}" ><span id="header"><span id="logo"><strong>Welcome </strong></span id="header"><strong>{{ current_user.username|striptags }} !</strong></span></a>
{% else %}
<a class="navbar-brand nav-custom" href="{{ url_for('index') }}"><span id="header"><span id="logo"><strong>Welcome </strong></span></span></a>
{% endif %}
</div>
<ul class="nav navbar-nav navbar-right " >
<li class="nav-custom"><a class="nav navbar-nav" href="{{ url_for('index') }}"><span class="glyphicon glyphicon-home "> <span id="header"><strong>Home</strong></span></a></li>
<li><a class="nav navbar-nav" href="{{ url_for('dashboard') }}"><span class="glyphicon glyphicon-dashboard"> <span id="header"><strong>Dashboard</strong></span></a></li>
<li><a class="nav navbar-nav" href="{{ url_for('about') }}"><span class="glyphicon glyphicon-user"> <span id="header"><strong>About Us</strong></span></a></li>
<li><a class="nav navbar-nav" href="{{ url_for('feedback') }}"><span class="glyphicon glyphicon-pencil"> <span id="header"><strong>Feedback</strong></span></a></li>
{% if current_user.is_anonymous %}
<li><a class="nav navbar-nav" href="{{ url_for('login') }}"><span class="glyphicon glyphicon-log-in"> <span id="header"><strong>Login</strong></span></a></li>
{% else %}
<li><a class="nav navbar-nav" href="{{ url_for('logout') }}"><span class="glyphicon glyphicon-off"> <span id="header"><strong>Logout</strong></span></a></li>
{% endif %}
</ul>
</div>
</nav>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</body>
</html>
Per my comment above: I think your current call to $('.image-area').load("{{ url_for('image',im=image_date) }}"); is causing you to get nesting .image-area divs.
Try switching
{% block content %}{% endblock %}
to
<div id='img-cont'>{% block content %}{% endblock %}</div>
And then change your js to
$('.img-cont').load("{{ url_for('image',im=image_date) }}");

Link to specific tab Bootstrap

I'm developing a site with Django Framework and I'm trying to create a way for when a user access a link like http://www.example.com/site/#users_rating it opens a specific tab in the page.
I tried the following code that I found on the Internet (I'm new in JavaScript/JQuery), it isn't working:
<script type="text/javascript">
$(function() {
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
}
// Change hash for page-reload
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
window.location.hash = e.target.hash;
});
});
</script>
My template uses BootStrap 3, here is the HTML code (with some Django tags):
<div class="col-md-12" style="margin: 0 auto;">
<section class="panel">
<header class="panel-heading tab-bg-dark-navy-blue">
<ul class="nav nav-tabs nav-justified ">
<li class="active">
<a data-toggle="tab" href="#overview">
{% trans "Overview" %}
</a>
</li>
<li class="">
<a data-toggle="tab" href="#timeline">
{% trans "Timeline" %}
</a>
</li>
<li class="">
<a data-toggle="tab" href="#users_rating">
{% trans "Users Ratings" %} ({{ ptc.userrating.count }})
</a>
</li>
<li class="">
<a data-toggle="tab" href="#rating">
{% trans "Our Rating" %}
</a>
</li>
</ul>
</header>
<div class="panel-body">
<div class="tab-content tasi-tab">
<!-- Overview Tab-Pane -->
<div id="overview" class="tab-pane active">
{% include 'overview.html' %}
</div>
<!-- Timeline Tab-Pane -->
<div id="timeline" class="tab-pane">
{% include 'timeline.html' %}
</div>
<!-- User Rating Tab-Pane -->
<div id="users_rating" class="tab-pane">
{% include 'users_rating.html' %}
</div>
<!-- Our Rating Tab-Pane -->
<div id="rating" class="tab-pane">
{% include 'rating.html' %}
</div>
</div>
</div>
</section>
</div>
How can I open an specific tab according to an URL in my site?
Following code works for me
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="col-md-12" style="margin: 0 auto;">
<section class="panel">
<header class="panel-heading tab-bg-dark-navy-blue">
<ul class="nav nav-tabs nav-justified ">
<li class="active">
<a data-toggle="tab" href="#overview">
{% trans "Overview" %}
</a>
</li>
<li class="">
<a data-toggle="tab" href="#timeline">
{% trans "Timeline" %}
</a>
</li>
<li class="">
<a data-toggle="tab" href="#users_rating">
{% trans "Users Ratings" %} ({{ ptc.userrating.count }})
</a>
</li>
<li class="">
<a data-toggle="tab" href="#rating">
{% trans "Our Rating" %}
</a>
</li>
</ul>
</header>
<div class="panel-body">
<div class="tab-content tasi-tab">
<!-- Overview Tab-Pane -->
<div id="overview" class="tab-pane active">
{% include 'overview.html' %}
</div>
<!-- Timeline Tab-Pane -->
<div id="timeline" class="tab-pane">
{% include 'timeline.html' %}
</div>
<!-- User Rating Tab-Pane -->
<div id="users_rating" class="tab-pane">
{% include 'users_rating.html' %}
</div>
<!-- Our Rating Tab-Pane -->
<div id="rating" class="tab-pane">
{% include 'rating.html' %}
</div>
</div>
</div>
</section>
</div>
</body>
</html>
JS
<script type="text/javascript">
$(function() {
// Javascript to enable link to tab
var hash = document.location.hash;
if (hash) {
console.log(hash);
$('.nav-tabs a[href='+hash+']').tab('show');
}
// Change hash for page-reload
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
window.location.hash = e.target.hash;
});
});
</script>
Thanks a bunch. With newer versions of JQuery (mine=3.3.1) you need to make a little alteration:
<script>
$(function() {
// Javascript to enable link to tab
var hash = document.location.hash;
if (hash) {
console.log(hash);
$('.nav-tabs a[href=\\'+hash+']').tab('show');
}
// Change hash for page-reload
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
window.location.hash = e.target.hash;
});
});
</script>
Hope this saves someone the hour I lost

Categories