Displaying jquery result, data there but not displaying - javascript

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.

Related

changing javascript function name or ID of element in HTML template makes it stop working

I am developing an app in Django.
I have this weird issue.
on my template I have:
<div class="form-group">
<input name="Data_inserimento_entry" type="date" class="form-control" id="date_to_turn_into_toda" >
</div>
<script type="text/javascript" src={% static "js/get_today_date.js" %}></script>
<script> get_today_date(date_to_turn_into_toda) </script>
on the js file get_today_date.js stored at static > js > get_today_date.js
I have
function get_today_date(id_data) {
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear()+"-"+(month)+"-"+(day);
document.getElementById(id_data).value = today;
}
when I run the server and load the template, in the input slot, today's date appears. I am glad of that.
If I comment any of the two javascript lines in the template, it does not work anymore. I am glad of that.
Here comes the weird part
If I change the id ,
like this:
<div class="form-group">
<input name="Data_inserimento_entry" type="date" class="form-control" id="date_to_turn_into_today" >
</div>
<script type="text/javascript" src={% static "js/get_today_date.js" %}></script>
<script> get_today_date(date_to_turn_into_today) </script>
It does not work anymore. Why?
And even if I change the function name in both scripts, like:
<script type="text/javascript" src={% static "js/get_today_date.js" %}></script>
<script> get_today_date_ID(date_to_turn_into_today) </script>
and
function get_today_date_ID(id_data) {
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear()+"-"+(month)+"-"+(day);
document.getElementById(id_data).value = today;
}
It does not work anymore. Why?
Is the syntax to call javascript correct?
Am I forgetting to change the ID or the function name in some other place than the template and the javascript file?
Note: the function in the javascript file and the javascript file have the same name (except for the extention .js), is this the problem?
Update:
in my model, I have:
class mymodel(models.Model):
Data_inserimento_entry = models.DateField(blank=False, null=False, default=timezone.now().date() )
Update:
here I post the whole template aggiungi_terminologia.html, responding to a comment asking for more explanation
{% extends 'base.html'%}
{% block content %}
<h1>Aggiungi terminologia in massa</h1>
<!-- scarica template glossario -->
<p>
<form method="get" action="static/files_for_download/template_glossario.xlsx">
<div class="container"></div>
<button type="submit" class="btn btn-success">Scarica template</button>
</div>
</form>
</p>
<div class="container">
<small id="inputHelp" class="form-text text-muted">NOTA: Non rinominare le colonne del template.</small>
</div>
<br>
<!-- carica glossario -->
<p>
<form class="container" method="POST" enctype="multipart/form-data" >
{% csrf_token %}
<div class="file-upload-wrapper" id="input-file-now">
<small id="inputHelp" class="form-text text-muted">Seleziona il template compilato con la terminologia da caricare.</small>
<input type="file" name="uploaded_glossary" id="input-file-now" data-max-file-size="5M" class="file-upload">
<br><br>
<div class="form-group">
<input name="Data_inserimento_entry" type="hidden" class="form-control" id="date_to_turn_into_toda">
</div>
<button type="submit" class="btn btn-primary">Carica glossario</button>
</div>
</form>
</p>
<br><br><br><br>
<!-- Django tag load static -->
{% load static %}
<!-- CSS -->
<link rel="stylesheet" type="text/css" href={% static "css/searchbar_style.css" %}>
<link rel="stylesheet" type="text/css" href={% static "css/upload_glossary_slot.css" %}>
<!-- Javascript -->
<script type="text/javascript" src={% static "js/get_today_date.js" %}></script>
<script> get_today_date("date_to_turn_into_toda") </script>
{% endblock %}
Here I post my entire template base.html:
{% 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">
<!-- favicon -->
<!-- <link rel="shortcut icon" href="{% static 'img/gestisco_logo_round_favicon2.png' %}" /> -->
<link rel="shortcut icon" href="{% static 'img/metaglossary_favicon_3.png' %}" />
<!-- 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">
<title>G</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- Pagina iniziale -->
<!-- questa nel tutorial non c è -->
<a class="navbar-brand" href="{% url 'home' %}">GESTI.S.CO Interreg IT-CH</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">
<!-- glossario -->
<li class="nav-item">
<a class="nav-link" href="{% url 'glossario' %}">Glossario<span class="sr-only">(current)</span></a>
</li>
<!-- Aggiungi terminologia -->
<li class="nav-item">
<a class="nav-link" href="{% url 'aggiungi_terminologia' %}">Aggiungi terminologia</a>
</li>
<!-- Aggiungi glossario -->
<li class="nav-item">
<a class="nav-link" href="{% url 'aggiungi_glossario' %}">Aggiungi terminologia in massa</a>
</li>
</ul>
</div>
</nav>
<br/>
<!-- SEZIONE MESSAGGI -->
{% if messages %}
{% for message in messages %}
{% if insert_attempt_output == "errato" %}
<!-- form compilato in modo NON valido - messaggio rosso -->
<div class="alert alert-danger" role="alert">
<button class="close" data-dismiss="alert">
<small><sup>[X]</sup></small>
</button>
{{message}}
</div>
{% else %}
<!-- form compilato in modo valido - messaggio verde -->
<div class="alert alert-success" role="alert">
<button class="close" data-dismiss="alert">
<small><sup>[X]</sup></small>
</button>
{{message}}
</div>
{% endif %}
{% endfor %}
{% endif %}
<br>
<!-- formattazione del body -->
<div class="container">
{% block content %}
{% endblock %}
</div>
<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>
<!-- css -->
<link rel="stylesheet" type="text/css" href={% static "css/top_navbar_style.css" %}>
</body>
</html>

when I run the server and load the template, in the input slot, today's date appears. I am glad of that.
I have no idea how it could work, because it looks like the main problem you have is you pass variable into the function get_today_date instead of string (id), i.e. instead of
<script> get_today_date(date_to_turn_into_today) </script>
call
<script> get_today_date('date_to_turn_into_today') </script>

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 %}

JavaScript element issue in Twig template with Symfony 2

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')) }}

Spaceless is not working for removing whole html data spaces

what i need
i need to remove space between html elements.
twig code
{% spaceless %}
<head>
{% block title %}
<title>times</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
{% endblock %}
<meta property="fb:admins" content="10timesevents" />
<meta property="fb:app_id" content="432858816746099" />
{% block css %}
<noscript>
<link rel="stylesheet" href="http://im.gifbt.com/css/skel-noscript.css" />
<link rel="stylesheet" href="http://im.gifbt.com/css/style9.css" type="text/css" >
{% if DeviceDetcet() =='computer' %}
<link rel="stylesheet" href="http://im.gifbt.com/css/style9-desktop.css" type="text/css />
{% elseif DeviceDetcet() =='tablet' %}
<link rel="stylesheet" href="http://im.gifbt.com/css/style9-1000px.css" type="text/css />
{% elseif DeviceDetcet() =='phone' %}
<link rel="stylesheet" href="http://im.gifbt.com/css/style9-mobile.css" type="text/css />
{%endif%}
</noscript>
{% endblock %}
{% block scripts %}
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
{# <script src="http://im.gifbt.com/js/jquery.poptrox-2.2.js"></script>#}
<script src="http://im.gifbt.com/js/skel.min.js"></script>
{% if DeviceDetcet()=='phone'%}
<script src="http://im.gifbt.com/js/skelnew-panels.min.js"></script>
{%endif%}
<script src="http://im.gifbt.com/js/common.10.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
{% endblock %}
<!--[if lte IE 8]><script src="http://im.gifbt.com/js/html5shiv.js"></script><link rel="stylesheet" href="http://im.gifbt.com/css/ie8.css" /><![endif]-->
</head>
{% block body_tag %}
<body>
{% if 'android' in UserAgent() or 'Android' in UserAgent() %}
<div style="position:fixed; width:100%; z-index:9; right:0; left:0; bottom:0;">
<div class="row flush">
<div style="height:60px; background:#fb6d02; padding:14px 7px 7px 7px!important; border-bottom:1px solid #e16000; border-top:1px solid #e16000">
<img src="http://im.gifbt.com/images/android100.png"style="float:left; width:30px; padding:0 5px 0 0" />
<p style=" font-size:.9em; line-height:1.1em; margin:0; ">
Download Now
<b class="bld" style="float:left; padding:7px 0 0 0; color:#fff">Stay updated with 10times App</b>
</p>
</div>
</div>
</div>
{% endif %}
<span id="evtname"></span>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-MMVJS3"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MMVJS3');</script>
<!-- End Google Tag Manager -->
{% endblock %}
<!-- Header Wrapper -->
{% block homepage_head %}
{#Fixed navbar#}
<div class="navbar navbar-static navbar-default navbar-fixed-top" style="margin:0; min-height:38px; offsetheight:38px!important">
<div class="not-mobile" style="background:#fff">
<div class="new_header">
<div class="headerdiv">
<div class="l">
<ul class="navigation">
<li>Trade Shows</li>
<li>Conferences</li>
<li>Top 100</li>
<li>Venues</li>
</ul>
</div>
<div class="c">
<a href="http://10times.com" class="newlogo" ></a>
</div>
<div class="r">
<div class="user-nav">
<div id="header-login-dd-link">
<div class="user-dropdown dis-non">
<ul class="udr">
<li><a class="manage udbr" href="http://{{-login_url}}">Manage Event</a></li>
<li><a class="contact udbr" onclick="feed_back();">Contact Us</a></li>
<li><a class="signin udbr" onclick = "signin();">Sign In</a></li>
<li><a class='dashboard udbr' href='http://{{-login_url}}/dashboard'>My Dashboard</a></li>
</ul>
</div>
</div>
</div>
<div class="screen-block" style="display: none;"></div>
<a class="advt" href="{{ DomainDetect()}}/services">Advertise</a>
Add Event
<div class="searchdiv">
<span style="margin-top:10px" class="srhbx 4u" id="srh"><input type="button" value=" " class="srhbtn" onclick="checkHeaderSearch($(this));" id="explore-button" style="float:right" /><div id="search-box-area" class="p-relative search-box-area zind"><input type="text" name="" autocomplete="off" id ="explore-keywords" placeholder="search"
class="srhtxt homesearch" style="width:75%" required /><div id="explore-keywords-dropdown" autocorrect="off" ><div id="keywords-dd" class="kkdd"><ul id="keywords-by" style="margin:0;"></ul></div></div></div></span>
</div>
</div>
{#<div class="searchdiv">
<form action="{{ DomainDetect()}}/search" method="get" id="srh">
<div class="srhbx" id="search-box-area ">
<input type="text" class="srhtxt homesearch" autocomplete="off" id ="explore-keywords" placeholder="Search" name="q" {% if DeviceDetcet()=='computer'%} style="width:75%" {%endif%} required="">
<input type="submit" value=" " class="srhbtn" required="" >
<div id="explore-keywords-dropdown" autocorrect="off" >
<div id="keywords-dd" class="kkdd">
<ul id="keywords-by" style="margin:0;"></ul>
</div></div>
</div>
</form>
</div>
</div>#}
</div>
</div>
</div>
<div class="only-mobile">
<div class="new_header">
<div id="hide-header" class="headerdiv">
<div class="l">
<button type="button" class="navbar-toggle toggle-left" data-toggle="sidebar" data-target=".sidebar-left" style="margin:4px 0 0 5px; border:0; padding:8px">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="c">
</div>
<div class="r">
<div class="mobile_menu">
<a onclick="change();" class="srhbtn"> </a>
</div>
</div>
</div>
<div id="search-field" class="headerdiv dis-non" style="display: none;">
<form method="get" action="http://10times.com/search" id="srh" class="mr">
<div class="ll">
<button type="button" class="navbar-toggle toggle-left" data-toggle="sidebar" data-target=".sidebar-left" style="margin:4px 0 0 5px; border:0; padding:8px">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="search-field" class="cc">
<input type="hidden" name="cx" value="partner-pub-8525015516580200:vtujn0s4zis">
<input type="hidden" name="cof" value="FORid:10">
<input type="hidden" name="ie" value="ISO-8859-1">
<input type="text" name="q" id ="q" placeholder="Search..." class="srhtxt1" required />
</div>
<div class="rr">
<input type="submit" value=" " class="srhbtn1">
</div>
</form>
</div>
</div>
</div>
</div>{#endo of new main col-md-12#}
<div class="col-xs-7 col-md-3 sidebar sidebar-left sidebar-animate" style="background:#212628; padding:0; top:39px; position:fixed!important">
<div id="sidebar-wrapper" class="only-mobile">
<ul class="sidebar-nav" style="margin:0; padding:0;">
<li class="only-mobile">Home</li>
<li class="only-mobile">Trade Shows</li>
<li class="only-mobile">Conferences</li>
<li class="only-mobile">Top 100</li>
<li class="only-mobile">Venues</li>
<li class="only-mobile">Add Event</li>
<li class="only-mobile">Advertise</li>
<li class="only-mobile">Manage Event</li>
</ul>
</div>
</div>
</div>{#endo of row#}
</div>
{% block heightfromhead %}
<div style="height:51px" class="not-mobile"> </div>
<div style="height:40px" class="only-mobile"> </div>
{% endblock %}
<!-- header end -->
{% endblock %}
{# {% block search_head %}body goes here!{% endblock %} #}
{% block body %}body goes here!{% endblock %}
<!-- PAGE END -->
<script type="text/javascript">
function feed_back(){modal.open({content:'<div class="12u skel-cell-mainContent"><div class="box panel pd"><image src="/img/lineloading.gif"></div></div>'});$.get("/feedback",function(e){modal.open({content:e})})}
</script>
<script async src="http://im.gifbt.com/js/suggestive_search_2.js"></script>
{% block bottom_script %}
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
{% endblock %}
{# <script type="text/javascript">#}
{# $(document).ready(function(){#}
{# $("#searchpanel").removeClass('dis-non'); #}
{# });#}
{# </script>#}
</div>
{% if 'android' in UserAgent() or 'Android' in UserAgent() %}
<script>
$( document ).ready(function() {
{% if cookie('get','10tphpopup') == '0'%}
{{-cookie('get','10tphpopup')}}
{{-cookie('set','10tphpopup',1,3600*24*365)}}
//$("div").first().addClass('dis-non');
var height=$( window ).height();
//height=height-50;
height=height+"px";
{%endif%}
});
</script>
{%endif%}
{% if 'iPhone' in UserAgent() or 'iphone' in UserAgent() %}
<script>
$( document ).ready(function() {
{% if cookie('get','10tphpopup') == '0'%}
{{-cookie('get','10tphpopup')}}
{{-cookie('set','10tphpopup',1,3600*24*365)}}
//$("div").first().addClass('dis-non');
var height=$( window ).height();
//height=height-50;
height=height+"px";
//modal.open({content:'<div class="12u skel-cell-mainContent"><div class="box panel pd"><image src="/img/lineloading.gif"></div></div>'});$.get("{{ DomainDetect()}}/android?type=iphone",function(e){modal.open({content:e})})
{%endif%}
});
</script>
{%endif%}
{% block bottom_script2 %}
{%endblock%}
{% block bottom_script3 %}
{#<link rel="stylesheet" type="text/css" href="{{ DomainDetect()}}/headersearch.css" />#}
{%endblock%}
{% if 'android' in UserAgent() or 'Android' in UserAgent() %}
<script type="text/javascript">
if(sessionStorage.getItem("count1")=='NaN')
{
sessionStorage.setItem("count1", 0);
counters = 0;
}
if(sessionStorage.getItem("count1") == null)
{
sessionStorage.setItem("count1", 0);
counters = 0;
}
else
{
counters= parseInt(sessionStorage.getItem("count1"));
//alert(sessionStorage.getItem("count1"));
}
if (page_count == 4)
{
dataLayer.push({'event':'mobilePromo-android'});
}
</script>
{% endif %}
{%if 'iPhone' in UserAgent() or 'iphone' in UserAgent() %}
<script type="text/javascript">
if(sessionStorage.getItem("count2")=='NaN')
{
sessionStorage.setItem("count2", 0);
counters = 0;
}
if(sessionStorage.getItem("count2") == null)
{
sessionStorage.setItem("count2", 0);
counters = 0;
}
else
{
counters= parseInt(sessionStorage.getItem("count2"));
//alert(sessionStorage.getItem("count2"));
}
if (page_count == 4)
{
dataLayer.push({'event':'mobilePromo-iphone'});
}
</script>
{% endif %}
</body>
</html>
{% endspaceless %}
snapshot
while using spaceless spaces between html element are not removed.
i need to remove the spaces between html elements.
i have found use trim in twig but where to used in code.
any suggestion are most welcome.

This always worked for me.
{% extends '::base.html.twig' %}
{% block body %}
{% spaceless %}
HTML and anything else code goes here where spaces are removed
{% endspaceless %}
{% endblock %}

Spaces you're actually showing in your screenshot are between attributes, not tags.
That's why they are not removed.
If you look at Twig's source code, lib/Twig/Node/Spaceless.php, you can see the regular expression used:
public function compile(Twig_Compiler $compiler)
{
$compiler
->addDebugInfo($this)
->write("ob_start();\n")
->subcompile($this->getNode('body'))
->write("echo trim(preg_replace('/>\s+</', '><', ob_get_clean()));\n")
;
}
As you can see, only spaces between html tags are removed.
Check this fiddle, and especially the compiled template:
echo trim(preg_replace('/>\s+</', '><', ob_get_clean()));

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