jqueryjsonajaxhandlebars.js
Handlebars template rendering html with no content
The main file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Teacher</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet">
<link rel="stylesheet" href="/css/users.css" >
</head>
<body>
<div class="wrapper">
<!-- Page Header -->
<div class="header">
<button type="button" class="btn btn-default toggle">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
<div class="btn-group pull-right">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-cog"></span>
Settings
</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#"><b>{{name}}</b></a></li>
<li role="separator" class="divider"></li>
<li class="logout"><a href="/sign-in">Logout</a></li>
</ul>
</div>
</div>
<!-- Left Navbar -->
<div class="sidebar">
<ul class="nav">
<li><a href="/teacher"><i class="glyphicon glyphicon-lock"></i><span> Course Management</span></a></li>
<li><a href="/teacher/createCourse"><i class="glyphicon glyphicon-film"></i><span> Create Course</span></a></li>
</ul>
</div>
<div class="content">
<div class="container-fluid">
{{{ body }}}
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{{{_sections.handlebars}}}
{{{_sections.script}}}
<script src="/js/teacher.js"></script>
</body>
</html>
Template to add:
<div class="row">
<div class="col-md-7">
<h1>Manage Courses</h1>
<div class="courses"></div>
</div>
</div>
<script id="course-template" type="text/x-handlebars-template">
<div class="panel panel-default">
<div class="panel-heading">{{coursecode}}</div>
<div class="panel-body">
<a href="">{{coursename}}</a>
</div>
</div>
</script>
{{#section 'handlebars'}}
<script src="js/handlebars-v4.0.5.js"></script>
{{/section}}
{{#section 'script'}}
<script type="application/javascript">
$(function() {
let source = $('#course-template').html();
let template = Handlebars.compile(source);
console.log(source);
let placeHolder = $('.courses');
$.get("/json/courses.json", function(data, status, xhr){
$.each(data, function(index,element){
var html = template(element);
placeHolder.append(html);
});
});
});
</script>
{{/section}}
JSON to render:
[
{
"coursecode": "ELEC 101",
"coursename": "Introduction to Electrical engineering"
},
{
"coursecode": "SYSC 102",
"coursename": "Object-Oriented Programming"
},
{
"coursecode": "ELEC 301",
"coursename": "Electronics I"
},
{
"coursecode": "SYSC 402",
"coursename": "Real-Time Systems"
},
{
"coursecode": "BUSI 101",
"coursename": "Introduction to Business Models"
},
{
"coursecode": "ECON 102",
"coursename": "Economic paradigms"
}
]
I am trying to read the json file through ajax and display on the main file but the page is only displaying the divs and not the text (coursecode and coursename).
What I want.
what I'm getting:
Solution
Handerbar can handle array itself. No need to use $.each. Just Render all your array using {{#each}} {{/each}}.
Have modified your code and it is working fine. You can test it on your mahine. I have used locally json array to render. You just to comment it and uncomment your $.get function and it will work perfectly if your get function data is an array as given format.
Code is as like below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Teacher</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet">
<link rel="stylesheet" href="/css/users.css">
</head>
<body>
<div class="wrapper">
<!-- Page Header -->
<div class="header">
<button type="button" class="btn btn-default toggle">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
<div class="btn-group pull-right">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-cog"></span> Settings
</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#"><b>{{name}}</b></a></li>
<li role="separator" class="divider"></li>
<li class="logout"><a href="/sign-in">Logout</a></li>
</ul>
</div>
</div>
<!-- Left Navbar -->
<div class="sidebar">
<ul class="nav">
<li><a href="/teacher"><i class="glyphicon glyphicon-lock"></i><span> Course Management</span></a></li>
<li><a href="/teacher/createCourse"><i class="glyphicon glyphicon-film"></i><span> Create Course</span></a></li>
</ul>
</div>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<h1>Manage Courses</h1>
<div class="courses"></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/js/handlebars-v4.0.5.js"></script>
<script type="application/javascript">
$(function() {
/* for local use only to test */
var data = [
{
"coursecode": "ELEC 101",
"coursename": "Introduction to Electrical engineering"
},
{
"coursecode": "SYSC 102",
"coursename": "Object-Oriented Programming"
},
{
"coursecode": "ELEC 301",
"coursename": "Electronics I"
},
{
"coursecode": "SYSC 402",
"coursename": "Real-Time Systems"
},
{
"coursecode": "BUSI 101",
"coursename": "Introduction to Business Models"
},
{
"coursecode": "ECON 102",
"coursename": "Economic paradigms"
}
];
let source = $('#course-template').html();
let template = Handlebars.compile(source);
let placeHolder = $('.courses');
var html = template(data);
placeHolder.append(html);
/* test code ends here */
/* uncomment below code and comment test code */
// $.get("/json/courses.json", function(data, status, xhr) {
// let source = $('#course-template').html();
// let template = Handlebars.compile(source);
// let placeHolder = $('.courses');
// var html = template(data);
// placeHolder.append(html);
// });
});
</script>
<script id="course-template" type="text/x-handlebars-template">
<div class="panel panel-default">
{{#each this }}
<div class="panel-heading">{{coursecode}}</div>
<div class="panel-body">
<a href="">{{coursename}}</a>
</div>
{{/each }}
</div>
</script>
</body>
</html>
- Set selected option of select box
- little issue in jquery paging code
- How to get only directly contained text in DOM element in Javascript?
- Uppercase first letter of variable
- Get selected variation price in jQuery on Woocommerce Variable products
- How store all DataTable's data in javascript array after column search?
- EventListener not being removed
- How can I how one div and hide multiple others with jQuery?
- How can I hide one div and show another with jQuery?
- open vimeo url in colorbox using jQuery filter
- Failed to execute 'atob' on 'Window'
- Improve table paging logic
- Javascript: How to read a hand held barcode scanner best?
- dynamic row numbering after add/delete using jquery
- Selected text event trigger in Javascript
- How can i do paging in asp.net mvc3?
- aoColumnDefs data in jQuery DataTables
- Why does Datatables paging using AjaxSource and MVC only return one page?
- What is the best way to remove a table row with jQuery?
- How to validate array of array inputs Jquery?
- How to execute jquery validation to array of input elements
- How does one align a single row to the top in JQGrid?
- How do I refresh a page using JavaScript?
- How to get a value of an element by name instead of ID
- how to remove class from selected dom's siblings? how to open a div and have all the other ones close? do i use siblings() or what
- Find all elements with an 'id' attribute on the DOM
- How can I preserve pager state when adding rows to a table with jQuery Tablesorter?
- if index > 0: loop; else: do only once (JSON & jQuery)
- jQuery how to fix Cannot set property '_DT_CellIndex' of undefined?
- how to open fancybox gallery with button helpers "manually"