I have JSON data with this format
{
"count": 3,
"value": {
"title": "Daily Feeds Mashup",
"description": "Feeds Description",
"items": [
{
"title": "Title One",
"link": "http://linkone.com",
"description": "Title one description"
},
{
"title": "Title Two",
"link": "http://titletwo.com",
"description": "Title two description"
},
{
"title": "Title Three",
"link": "http://linkone.com",
"description": "Title three description"
}
]
}
}
The "items" part is an array. How can I construct a template in Handlebars to give me a an html result in a jQM listview. Here's the full html source of what I currently have, including the JavaScript
<script src="libs/jquery-2.0.3.min.js"></script>
<script src="libs/jquery.mobile-1.4.0.min.js"></script>
<script src="libs/handlebars-v1.3.0.js"></script>
<link rel="stylesheet" href="../styles.css">
<script type="text/javascript">
$("document").ready(function() {
var template = $("#itemTemplate").html();
var renderer = Handlebars.compile(template);
var result = renderer({
"count" : 3,
"value" : {
"title" : "Daily Feeds Mashup",
"description" : "Feeds Description",
"items" : [{
"title" : "Title One",
"link" : "http://linkone.com",
"description" : "Title one description"
}, {
"title" : "Title Two",
"link" : "http://titletwo.com",
"description" : "Title two description"
}, {
"title" : "Title Three",
"link" : "http://linkone.com",
"description" : "Title three description"
}]
}
});
$("#container").html(result);
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h3>Header<h3>
</div>
<div data-role="content">
<script type="text/x-handlebars-template" id="itemTemplate">
<ul data-role="listview" id="posts">
{{#each items}}
<li>
<a data-transition="" href="{{{link}}}">
<p>{{{title}}}</p>
<small>{{{description}}}</small>
</a>
</li>
{{/each}}
</ul>
</script>
<h1>This is my header one</h1>
<h3>This is my header three</h3>
<!-- This is the container where the templates will be instantiated -->
<div id="container"></div>
</div>
</div><!-- page -->
</body>
Working example: https://github.com/theAcadian/phonegap-workshop-jqm/blob/master/index.html
Update:
Working jsFiddle: http://jsfiddle.net/Gajotres/vds2U/43/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<script id="items-template" type="text/x-handlebars-template">
{{#.}}
<li><h3>{{this.title}}</h3><p>{{this.description}}</p></li>
{{/.}}
</script>
<ul id ="items_list" data-role="listview" data-filter="true">
</ul>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
JavaScript:
$(document).on('pagebeforeshow', '#index', function(){
var items = {
"count": 3,
"value": {
"title": "Daily Feeds Mashup",
"description": "Feeds Description",
"items": [
{
"title": "Title One",
"link": "http://linkone.com",
"description": "Title one description"
},
{
"title": "Title Two",
"link": "http://titletwo.com",
"description": "Title two description"
},
{
"title": "Title Three",
"link": "http://linkone.com",
"description": "Title three description"
}
]
}
};
var itemsHandler = Handlebars.compile($("#items-template").html());
$('#items_list').html(itemsHandler(items.value.items));
$('#items_list').listview().listview('refresh');
});
Related
I am trying to combine 2 html file together. Both working fine when using separately. But when i am trying to combine them they are losing formatting.
w3 containers are not showing correctly. It only shows the graph and above graph is non formatted text.
I try to place the scripts at different places but not much with success.
<!DOCTYPE HTML>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<head>
<title>ESXI AD Authentication Report</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.w3schools.com/lib/w3.js"></script>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2",
animationEnabled: true,
title: {
text: "Shares of Electricity Generation by Fuel"
},
subtitles: [{
text: "United Kingdom, 2016",
fontSize: 16
}],
data: [{
type: "pie",
indexLabelFontSize: 18,
radius: 80,
indexLabel: "{label} - {y}",
yValueFormatString: "###0.0\"%\"",
click: explodePie,
dataPoints: [
{ y: 42, label: "Gas" },
{ y: 21, label: "Nuclear"},
{ y: 24.5, label: "Renewable" },
{ y: 9, label: "Coal" },
{ y: 3.1, label: "Other Fuels" }
]
}]
});
chart.render();
function explodePie(e) {
for(var i = 0; i < e.dataSeries.dataPoints.length; i++) {
if(i !== e.dataPointIndex)
e.dataSeries.dataPoints[i].exploded = false;
}
}
}
</script>
</head>
<body>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<div class="w3-container w3-light-blue">
<h1>ESXI AD Authentication Report</h1>
</div>
<div class="w3-bar w3-light-grey">
<div class="w3-dropdown-hover">
<button class="w3-button">Vcenter Configured</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
b1
b2
</div>
</div>
<div class="w3-bar-item"></div>
<div class="w3-bar-item">Last Updated: #date#</div>
</div>
<div id="chartContainer" style="height: 370px; width: 100%;">
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</div>
</body>
</html>
It seems you forgot to use w3's CSS into your HTML, ie you should put this line in <head> tag
<link rel="StyleSheet" href="https://www.w3schools.com/lib/w3.css" type="text/css" />
so your code became below:
<!DOCTYPE HTML>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<head>
<title>ESXI AD Authentication Report</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.w3schools.com/lib/w3.js"></script>
<link rel="StyleSheet" href="https://www.w3schools.com/lib/w3.css" type="text/css" />
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2",
animationEnabled: true,
title: {
text: "Shares of Electricity Generation by Fuel"
},
subtitles: [{
text: "United Kingdom, 2016",
fontSize: 16
}],
data: [{
type: "pie",
indexLabelFontSize: 18,
radius: 80,
indexLabel: "{label} - {y}",
yValueFormatString: "###0.0\"%\"",
click: explodePie,
dataPoints: [
{ y: 42, label: "Gas" },
{ y: 21, label: "Nuclear" },
{ y: 24.5, label: "Renewable" },
{ y: 9, label: "Coal" },
{ y: 3.1, label: "Other Fuels" }
]
}]
});
chart.render();
function explodePie(e) {
for (var i = 0; i < e.dataSeries.dataPoints.length; i++) {
if (i !== e.dataPointIndex)
e.dataSeries.dataPoints[i].exploded = false;
}
}
}
</script>
</head>
<body>
<div class="w3-container w3-light-blue">
<h1>ESXI AD Authentication Report</h1>
</div>
<div class="w3-bar w3-light-grey">
<div class="w3-dropdown-hover">
<button class="w3-button">Vcenter Configured</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
b1
b2
</div>
</div>
<div class="w3-bar-item"></div>
<div class="w3-bar-item">Last Updated: #date#</div>
</div>
<div id="chartContainer" style="height: 370px; width: 100%;">
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</div>
</body>
</html>
When I have cellTemplate as the following,
{ field: 'Trial', cellTemplate: '<div class="ui-grid-cell-contents" title="TOOLTIP">{{grid.appScope.getAnchorLink(row)}}</div>' }
what I get is <a data-ng-href="localhost:50849/PatientCategory/Edit/1">Edit</a> in the column. But what I want is simply an anchor link with Edit text.
The getAnchorLink function is as follows
$scope.getAnchorLink = function (rowObj) {
var tempId = rowObj.entity.Id.toString();
return '<a data-ng-href="localhost:50849/PatientCategory/Edit/' + tempId + '">Edit</a>'
};
Can someone please correct me where I am wrong?
If you want to show anchor tag in ui-grid below is an example code,
app.js
var app = angular.module('app', ['ui.grid', 'ui.grid.cellNav','ui.grid.pinning']);
app.controller('MainCtrl', ['$scope', '$http', '$log',
function($scope, $http, $log) {
$scope.gridOptions = {
columnDefs: [{
'field': 'code'
}, {
'field': 'name'
}, {
'field': 'status'
},{
'field':'link',
'cellTemplate':'celltemplate.html'
}]
};
$scope.gridOptions.data = [{
"code": "Cox",
"name": "Carney",
"status": 0
}, {
"code": "Lorraine",
"name": "Wise",
"status": 1
}, {
"code": "Nancy",
"name": "Waters",
"status": 2
}];
}
]);
celltempalte.html
<div>
<a href="test.html?code={{row.entity.code}}&name={{row.entity.name}}&status={{row.entity.status}}">
Click me
</a>
</div>
index.html
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-cellNav></div>
</div>
<script src="app.js"></script>
</body>
</html>
main.css
.grid {
width: 500px;
height: 400px;
}
I'm loading data from a json file in which i plan to use on html list with links, i'm not sure if the problem is the how i wrote the json file or how i access the data in the file.
according http://jsonlint.com/ the json file is correct
the menu.json file
[
{
"opciones": {
"oferta": [
{
"tipo": "1001"
},
{
"tipo": "1002"
},
{
"tipo": "1003"
},
{
"tipo": "1004"
}
]
}
},
{
"opciones": {
"demanda": [
{
"tipo": "2001"
},
{
"tipo": "2002"
},
{
"tipo": "2003"
}
]
}
}
]
Here is how i try to fill the html list code:
<html ng-app="App">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<title>test html</title>
<script src="json_load_menu.js"></script> <!--script que cargar archivo json-->
<link rel = "stylesheet" type = "text/css" href = "./css/style.css" /> <!--css con colores de celdas -->
</head>
<body ng-controller="menuCtrl">
<div class="container">
<ul >
<li ng-repeat="menuOpcion in menu"><a href="#" >{{menuOpcion.opciones.oferta}}</a></li>
</ul>
<ul >
<li ng-repeat="menuOpcion in menu"><a href="#" >{{menuOpcion.opciones.demanda}}</a></li>
</ul>
</div>
</body>
</html>
this is the result:
[{"tipo":"1001"},{"tipo":"1002"},{"tipo":"1003"},{"tipo":"1004"}]
*
[{"tipo":"2001"},{"tipo":"2002"},{"tipo":"2003"}]
*
what is supposed to do:
*1001
*1002
*etc
*2001
*2002
How to avoid this?
EDIT:i have tried
<ul >
<li ng-repeat="menuOpcion in menu"><a href="#" >{{menuOpcion.opciones.oferta.tipo}}</a></li>
</ul>
Try
<ul>
<li ng-repeat="menuOpcion in menu[0].opciones.oferta"><a href="#" >{{menuOpcion.tipo}}</a></li>
</ul>
<ul >
<li ng-repeat="menuOpcion in menu[0].opciones.demanda"><a href="#" >{{menuOpcion.tipo}}</a></li>
</ul>
The following are my HTML, AngularJS, JSON codes
index.html
<! DOCTYPE HTML>
<html>
<head>
<link type='text/css' rel='stylesheet' href='styles/photostyle.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="app/app.js"></script>
<title>My Photography</title>
</head>
<body ng-app="photoPage">
<div class="container">
<div id="header">
<p id="title">My Photography</p>
</div>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<div class="content">
<div class="photoNo" ng-repeat="photo in photos">
<photo-infos info="photo"></photo-infos>
</div>
</div>
</div>
</div>
</body>
</html>
app.js
var app = angular.module("photoPage", []);
app.controller("MainController", ['$scope', 'photos', function($scope, photos) {
photos.success(function(data) {
$scope.photos=data;
});
}])
.directive('photoInfos', function() {
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'photoInfos.html'
};
})
.factory("photos", ["$http", function($http) {
return $http.get('addonFiles/photoInfo.json')
.success( function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
photoInfo.json
[
{
"name": "shot 01",
"date": 20150321075416,
"photoUrl": "photos/01.jpg"
},
{
"name": "shot 02",
"date": 20150527111604,
"photoUrl": "photos/02.jpg"
},
{
"name": "shot 03",
"date": 20150626113654,
"photoUrl": "photos/03.jpg"
}
]
photoInfos.html
<div class="photo-container">
<img class="photo-responsive" ng-src="{{ info.photoUrl }}"/>
<h3>{{ info.name }}</h3>
<p class="photoDate">{{ info.date }}</p>
The files are kept in the correct places as they should be. But my output comes out with just the div in id="header" and not the photos whose information is in JSON file.
why is the data in JSON not showing in the output??
Here is a plunker with a solution:
http://plnkr.co/edit/pJBMtDkSx8gcGqPY4AyS?p=preview
Basically, I added the following template
<li>{{info.name}}</li>
And changed the directive:
.directive('photoInfos', function() {
return {
restrict: 'E',
scope: {
info: '=info'
},
templateUrl: 'photoInfos.html'
};
})
I'm having trouble populating a table, accessing a text file that has JSON like this:
{
"1000": {
"country": "US",
"eventid": 1000,
"venue": "San Francisco, USA"
},
"2000": {
"country": "DE",
"eventid": 2000,
"venue": "Munich, Germany"
},
"3000": {
"country": "GB",
"eventid": 3000,
"venue": "UK (Market House)"
}
}
I have followed the examples on datatables.net and tried loading it on to my HTML
<HTML>
<head>
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="dataTables.bootstrap.css"/>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.dataTables.min.js"></script>
<script type="text/javascript" src="datatable.js"></script>
<script type="text/javascript" src="dataTables.bootstrap.js"></script>
</head>
<body>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Country</th>
<th>Event</th>
<th>Venue</th>
</tr>
</thead>
</table>
</body>
</html>
And the datatable.js is as simple as this
$(document).ready(function() {
$('#example').dataTable( {
"processing": true,
"ajax": 'sample.txt',
"columns": [
{ "country" },
{ "eventid" },
{ "venue" }
]
} );
} );
Can someone help me figure out where I have gone wrong with the code ?
I managed to fix the issue by adding a custom function as part of dataSrc attribute (Thanks Jongyu Lin). Here is the change to my Javascript
$(document).ready(function () {
$('#example').dataTable({
"processing": true,
"ajax": {
"url": 'json.txt',
"dataSrc": function (json) {
var arr = Object.keys(json).map(function(k) { return json[k] });
return arr;
}
},
"columnDefs": [
{
"targets": [2],
"visible": true,
"searchable": true
}
],
"columns": [
{
"data": "eventid"
},
{
"data": "country"
},
{
"data": "venue"
}
]
});
});