Here is my html code
Base.html
<title> {% block title %}{% endblock %} </title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/content">Home</a>
<a class="dropdown-item" href="#">Calendar</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Still in progress...</a>
</li>
</ul>
</form>
</div>
</nav>
<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>
and then this is my jquery code:
index.html
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Datepicker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<script>
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">Schedule an Appointment</div>
<div class="panel-body">
<form action="/ok" method="post">
<div class="row">
<div class='col-md-6'>
<div class="form-group">
<label class="control-label">Appointment Time</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" name="Time"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<input type="submit" class="btn btn-primary" value="Submit">
</form>
</div>
</div>
</div>
</body>
I have tried many times to modify the index.html to be able to extent by the base.html but failed.
Neither only the background color change nor the jquery cannot be load in the chrome, as a result no datetimepicker is appear.
How can I use the {% extends "base.html" %} (jinja2 method) to extend the base.html to index.html?
Thanks very much
First of all you have to define
{% block content %}{% endblock %}
in base.html and then in the index.html.
{% extends "base.html" %} // at top of file
All the content should be between
{% block content %}{% endblock %} in index.html. you can see in documentation
base.html
<html> ...
your_main_html.html
{% extends "base.html" %}
{% block extrahead %}
<style>
<!-- your css codes -->
</style>
{% endblock %}
{% block content %}
<!-- your html and jinja codes -->
{% endblock %}
{% block extrajs %}
<script>
<!-- your js codes -->
</script>
{% endblock %}
you will need to download jQuery js file from https://jquery.com/download/ and use it in your index file inside head tag as
<script src="jquery-3.6.1.min.js"></script>
or
use jQuery CDN as below
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
Related
When I was adding a template from the internet to my login.html code I encountered a problem. When I try to login it did not work. Even after I added CSRF tokens and login form control code. It has a clickable button that does not thing. I hope someone can help me. If any pictures or other codes needed please feel free to ask.
inn.html(login.html 1'this is a nickname'))
{% extends 'base.html' %}
{% block title %}Login{% endblock %}
{% block content %}
<div class="container">
<br/>
<h1>Login</h1>
<br/> <br/>
<div class="form-group">
<form method="POST">
{% csrf_token %}
{{ form.as_p }}
<button class="btn btn-secondary">Login</button>
</div>
{% endblock %}
login.html:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<!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">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{% static 'fonts/icomoon/style.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<!-- Style -->
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-6 order-md-2">
<img src="{% static 'images/undraw_file_sync_ot38.svg' %}" alt="Image" class="img-fluid">
</div>
<div class="col-md-6 contents">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="mb-4">
<h3>Sign In to <strong>C</strong></h3>
<p class="mb-4">Lorem.</p>
</div>
<form method="POST">
{% csrf_token %}
<div class="form-group">
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" for="password" placeholder="Password">
</div>
<input type="submit" value="Log In" class="btn text-white btn-block btn-primary">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
</body>
</html>
{% endblock %}
I am using navbar of this project, in my django project (Bootstarp 4.6). Here is the code:
Base.html :
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="{% static 'images/favicon.png' %}">
<!--Bootstarp CSS-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!--Bootstarp CSS ENDs-->
<!--CSS-->
{% block css %}{% endblock %}
<!--CSS ENDs-->
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<!--Navbar-->
{% include 'quicky/navbar.html' %}
<!--Navbar ENDs-->
{% block content %} {% endblock %}
<!--Bootstrap JS-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!--Bootstrap JS ENDs-->
<!--JS-->
{% block js %}{% endblock %}
<!--JS ENDs-->
</body>
</html>
Navbar.html :
{% load static %} {% block css %}
<link rel="stylesheet" href="{% static 'css/quicky/navbar.css' %}"> {% endblock %}
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<a class="navbar-brand mr-auto mr-lg-0" href="#">Offcanvas navbar</a>
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Notifications</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Switch account</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="nav-scroller bg-white shadow-sm">
<nav class="nav nav-underline">
<a class="nav-link active" href="#">Dashboard</a>
<a class="nav-link" href="#">
Friends
<span class="badge badge-pill bg-light align-text-bottom">27</span>
</a>
<a class="nav-link" href="#">Explore</a>
<a class="nav-link" href="#">Suggestions</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
</nav>
</div>
{% block js %}
<script src="{% static 'js/quicky/navbar.js' %}"></script>
{% endblock %}
And this is the navbar.js file placed in static folder.
$(function () {
'use strict'
$('[data-toggle="offcanvas"]').on('click', function () {
$('.offcanvas-collapse').toggleClass('open')
})
})
In the console I am getting this error.
Uncaught ReferenceError: $ is not defined.
I believe this error occurs because the navbar.js file, for some reason is not able to have the jquery. But if you see the Base.html file I first loaded the bootstrap files and then I placed the {% block js %}. So that first the jquery gets loaded and then my navbar.js file would come.
Also if I remove those block elements and write the contents of navbar.js file directly in Base.html I do not get this error.
What is the problem with the {% block js %}?
You are loading the static files including a function which requires jquery before you actually load the jquery library. This is why you are getting the error $ is not defined since $ is defined/instantiated in jquery
Try this - manually add the navbar.js to your index.html page after the jquery library and confirm that the error goes away. If it does, then it means your issue is with your load sequence.
The template included by an include tag is independent (except perhaps with regards to the context) of the including template. From the documentation:
The
include
tag should be considered as an implementation of “render this
subtemplate and include the HTML”, not as “parse this subtemplate and
include its contents as if it were part of the parent”. This means
that there is no shared state between included templates – each
include is a completely independent rendering process.
That is the blocks of the including template or the blocks of the templates which extend the including template are not at all related to the included template.
You should simply render that script tag (and any other things that you expect to be filled in the parent blocks templates) separately in your base template:
<script src="{% static 'js/quicky/navbar.js' %}"></script>
{% block js %}{% endblock %}
Or if you want to be able to remove this tag by extending the template:
<!-- in base template -->
{% block js %}
<script src="{% static 'js/quicky/navbar.js' %}"></script>
{% endblock %}
<!-- in children templates keeping the navbar js -->
{% block js %}
{{ block.super }}
<script src="{% static 'js/someother.js' %}"></script>
{% endblock %}
<!-- in children templates NOT keeping the navbar js -->
{% block js %}
<!-- Since we dont render block.super it is not rendered anymore -->
<script src="{% static 'js/someother.js' %}"></script>
{% endblock %}
I have a file that extends my base HTML file and this file contains a form. I want to create a margin for the form and also change the color of the submit button and form text box to match the theme of my website. How do I go about doing this in my CSS file? As of now, the margin does not seem to be working and I am also not sure how I would change the color as I mentioned earlier.
search.html file
{% extends 'base.html' %}
{%load static%}
<link rel="stylesheet" type= "text/css" href="{% static 'css/form.css' %}" >
<body>
{% block content %}
<container >
<center>
<form action="/searchoutput/" method="post">
{% csrf_token %}
Input Text:
<input type="text" name="param" required> <br><br>
{{data_external}}<br><br>
{{data}}
<br><br>
<input type="submit" value="Check for Service">
</form>
</container>
</center>
{% endblock %}
</body>
form.css file
form {
margin-top: 200px;
}
base.html
{%load static%}
<!DOCTYPE html>
<html>
<head>
<title>TweetyBird</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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">
<link rel="stylesheet" type= "text/css" href="{% static 'css/main.css' %}" >
<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>
</head>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">TweetyBird</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/search">Search by Tweet <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Twitter Bot</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">To be added</a>
</li>
</ul>
</div>
</nav>
{% block content %}
{% endblock %}
</body>
</html>
main.css
body
{
background-color: lightblue;
}
Add a block tag in your base.html ({%block staticfiles%}) just below your head tag.
Now in search.html add your css inside the staticfiles block.
Since you have extended base.html only the block content of search.html would be replaced with the content inside base.html's block
Since your link tag is outside the block hence that css would not even be picked up.
Also its better to use the body tag in base.html instead of search.html
This is my base.html file:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'css/css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'css/css/bootstrap-theme.css' %}">
</head>
</html>
<body>
<nav class="navbar navbar-default"></nav>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Fitbit</li>
{% if user.is_anonymous %}
{% else %}
<li>Log Out</li>
{% endif %}
</div><!--/.navbar-collapse -->
</div>
</nav>
<center>
{% block content %}{% endblock %}
</center>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="css/js/jquery.min.js"> <\/script>')</script>
<script src="/static/css/js/bootstrap.min.js"></script>
<script src="/static/css/js/bootstrap.js"></script>
</body>
</html>
<footer>
<p>© 2016 Hanze Hogeschool Groningen</p>
</footer>
As you can see I'm doing a check if the user is anonymous if he is not anonymous it should show the log out button. But at the moment when I return to the homepage it still shows the Log Out button.
My question is, how do I make it so that the log out will not show on the homepage. According to my own thinking I think django still thinks I'm not anonymous on the homepage.
And this is the image for the problem:
homepage
You should be using is_authenticated instead:
{% if user.is_authenticated %}
<li>Log Out</li>
{% endif %}
And, you are not passing the request context from your view to a template, use render():
return render(request, 'index.html')
Application - Flask app hosted on google app engine.
I get the following error when I try rendering my template
File "Show_Messages.html", line 1, in top-level template code
{% extends "AdminMaster.html" %}
TypeError: 'Key' object is not iterable
My template (Show_messages.html)
{% extends "AdminMaster.html" %}
{% block title %}News{% endblock %}
{% block page %}News{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block content %}
<div class="container">
<div class="page-header">
<h1>News</h1>
</div>
<div class="col-lg-12">
<ul class="list-group">
{% for newsitem in newsitems %}
<li class="list-group-item">
<span class="badge">
<a href="Edit-NewsItem?ID={{ newsitem.key.urlsafe() }}">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
</span>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endblock %}
The route function
#message_admin_routes.route('/xxxx/xxxx-xxxx')
#authenticate_admin
def show_messages():
breadcrumb, user = build_user_and_breadcrumbs()
messages = MessageFactory().get_messages_key()
return render_template('Show_Messages.html',
user=user,
breadcrumb=breadcrumb,
newsitems=messages)
------Edited---------
AdminMaster.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<!--googleoff: snippet-->
{% block head %}
<title>CFC Melbourne - {% block title %}{%endblock%}</title>
<meta name="Section" content="{% block page %}{%endblock%}">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://storage.googleapis.com/xxxx/xxx/xxx.css" type="text/css">
<link rel="stylesheet" href="https://storage.googleapis.com/xxxx/xxxx/xxxx.css" type="text/css">
<link rel="shortcut icon" href="https://storage.googleapis.com/xxxx/xxxx/favicon.ico">
<link href='https://storage.googleapis.com/xxx/xxx.css' rel='stylesheet' type='text/css'>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
{% endblock %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
/**
* Function that tracks a click on an outbound link in Google Analytics.
* This function takes a valid URL string as an argument, and uses that URL string
* as the event label.
*/
var trackOutboundLink = function(url) {
ga('send', 'event', 'outbound', 'click', url, {'hitCallback':
function () {
document.location = url;
}
});
}
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'xxx-xx-xx', 'xxx-xx-xx.xxx.xxx');
ga('send', 'pageview');
</script>
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<div id="wrap">
<div id="menu">
<nav class="navbar navbar-default" style="margin-bottom: 0px;">
<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>
<a class="navbar-brand" href="/Eden"><div class='logo-text-a' style="color: black">CFC Melbourne Admin</div></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="dropdown">
Applications <span class="caret"></span>
<ul class="dropdown-menu">
<li>List all applications</li>
<li>Create new application</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Vision</li>
<li role="separator" class="divider"></li>
<li>One more separated linkkk</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
{{ user.nickname() }}<span class="caret"></span>
<ul class="dropdown-menu">
<li>Permissions</li>
<li>User Information</li>
<li role="separator" class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
{% include 'AdminBreadcrumb.html' %}
</div>
<div id="content">
{% block content %}{% endblock %}
</div>
</div>
<!--googleoff: snippet-->
{% block footer %}
<script src="https://storage.googleapis.com/xxxx/js/jquery-2.1.0.min.js"></script>
<script src="https://storage.googleapis.com/xxxx/js/bootstrap.min.js"></script>
<script>
// Remove active for all items.
$('.page-sidebar-menu li').removeClass('active');
// highlight submenu item
$('li a[href="' + this.location.pathname + '"]').parent().addClass('active');
// Highlight parent menu item.
$('ul a[href="' + this.location.pathname + '"]').parents('li').addClass('active');
</script>
{% endblock%}
</body>
</html>
In your template code you have a for loop, which is expecting a iterable object like list. but some of your items passed here is non iterable.
you need to check the item is iterable before looping. An example given below;
<ul class="sitemap">
{%- for item in sitemap recursive %}
<li>{{ item.title }}
{%- if item.children -%}
<ul class="submenu">{{ loop(item.children) }}</ul>
{%- endif %}</li>
{%- endfor %}
</ul>
More details can be found here: https://stackoverflow.com/a/21006895/2336603