I'm trying to get the Artist's URI and DisplayName under the Performance section of Songkick's event detail's API.
Example data structure from their site:
{
"resultsPage": {
"results": {
"event": [
{
"id": 11129128,
"type": "Concert",
"uri": "http://www.songkick.com/concerts/11129128-wild-flag-at-fillmore?utm_source=PARTNER_ID&utm_medium=partner",
"displayName": "Wild Flag at The Fillmore (April 18, 2012)",
"start": {
"time": "20:00:00",
"date": "2012-04-18",
"datetime": "2012-04-18T20:00:00-0800"
},
"performance": [
{
"artist": {
"uri": "http://www.songkick.com/artists/29835-wild-flag?utm_source=PARTNER_ID&utm_medium=partner",
"displayName": "Wild Flag",
"id": 29835,
"identifier": []
},
"displayName": "Wild Flag",
"billingIndex": 1,
"id": 21579303,
"billing": "headline"
}
],
"location": {
"city": "San Francisco, CA, US",
"lng": -122.4333,
"lat": 37.78424
},
"venue": {
"id": 6239,
"displayName": "The Fillmore",
"uri": "http://www.songkick.com/venues/6239-fillmore?utm_source=PARTNER_ID&utm_medium=partner",
"lng": -122.4333,
"lat": 37.78424,
"metroArea": {
"uri": "http://www.songkick.com/metro_areas/26330-us-sf-bay-area?utm_source=PARTNER_ID&utm_medium=partner",
"displayName": "SF Bay Area",
"country": {
"displayName": "US"
},
"id": 26330,
"state": {
"displayName": "CA"
}
}
},
"status": "ok",
"popularity": 0.012763
}
]
},
"totalEntries": 24,
"perPage": 50,
"page": 1,
"status": "ok"
}
}
I'm using AJAX and jQuery. I can successfully access the name of the venue; however, when trying to get data within the Performance array, it breaks and nothing returns.
HTML:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="js/vendor/jquery-1.9.1.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Mesh.fm</a>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>Mesh.fm</h1>
<p>The best way to find new music happening near you!</p>
<button class="btn btn-warning btn-large" id="shows">Listen to NYC </button>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span2">
<h2>Type</h2>
<ul id="artistname"></ul>
</div>
<div class="span10">
<h2>Show</h2>
<ul id="localshows"></ul>
</div>
</div>
<hr>
</div> <!-- /container -->
</body>
</html>
jQuery:
$(document).ready(function() {
$.ajax({
url: "http://api.songkick.com/api/3.0/metro_areas/7644/calendar.json?&apikey={your_api_key}&per_page=all&max_date=2013-06-30&jsoncallback=?",
dataType: "jsonp",
success: function(data){
$.each(data["resultsPage"]["results"]["event"], function(i, entry){
$("#localshows").append('<li>'+entry.venue.displayName+'</li>');
$("#artistname").append('<li>'+entry["performance"][0]["artist"]["displayName"]+'</li>');
});
}
});
});
Looking at the response from the API, not all events have an artist property in the performance array, you will need to simply check the length of the performance array using the following:
$("#localshows").append('<li>' + entry.venue.displayName + '</li>');
if (entry.performance.length) {
$("#artistname").append('<li>' + entry["performance"][0]["artist"]["displayName"] + '</li>');
}
If you're looking at building html this way, this is another example (although you should really consider a templating solution like knockout, or handlebars if you're doing this often):
$.each(data.resultsPage.results.event, function (i, event) {
var showsContainer = $('#localshows');
var artistContainer = $('#artistname');
var showListItem = $('<li/>');
var showAnchor = $('<a/>').attr('href', event.uri).html(event.venue.displayName);
showListItem.append(showAnchor);
showsContainer.append(showListItem);
if (event.performance.length) {
var artistListItem = $('<li/>');
var artistAnchor = $('<a/>').attr('href', event.uri).html(event.performance[0].artist.displayName);
artistListItem.append(artistAnchor);
artistContainer.append(artistListItem);
}
});
PS. Remove your api key from your earlier comment and reset it if possible ;)
Related
I have included code of index.html, app.js and json. I have created views needed with me. But I want to load the json and display it on all the views of my application. I am able to call the json on one page but not on the other views. Please provide me some pointers.
HTML Code:
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body ng-app="myApp">
<div class="container">
<div>
<h1 style="text-align:right">Visa Cares</h1>
<h3 style="text-align: left">Total Body Transformation</h3>
</div>
<div ng-controller="myController" >
<ul class="nav nav-tabs">
<li>Home</li>
<li>Back</li>
</ul>
<button ng-click="clickButton()">List</button>
<table border="0" cellpadding="3">
<tr ng-repeat="x in modules">
<td>{{x.filters}}</td>
<td>{{ x.title}}</td>
<td>{{x.feature}}</td>
<td>{{x.order}}</td>
</tr>
</table>
<pre>
<div ng-repeat="y in modules">
{{y.buildings.building1.floors.floor1.rooms.room1 | prettyJSON}}
</div>
</pre>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view>
Hello AJ
</div>
<div>Angular seed app: v<span app-version></span></div>
<div>
<footer>
<ul class = "nav nav-tabs">
<li>Campus Buildings</li>
<li>Conference Rooms</li>
<li>Hotteling Areas</li>
<li>Huddle Rooms</li>
<li>Shuttle Schedule</li>
</ul>
</footer>
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="view3/view3.js"></script>
<script src="view4/view4.js"></script>
<script src="view5/view5.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</div>
</body>
</html>
Controller Code:
'use strict';
// Declare app level module which depends on views, and components
var wfApp = angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.view3',
'myApp.view4',
'myApp.view5',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
wfApp.controller('myController', ['$scope', '$http', function($scope, $http) {
$scope.clickButton = function() {
$http.get('document.json').success(function(data) {
$scope.modules = data.modules;
$scope.modules = data.modules.buildings.building1;
});
}
}]);
I have a document.json which contains following data:
{"modules": [
{
"title": "Conference Rooms",
"feature": "list",
"filters": "Conference",
"Order": 1,
"icon": "conference.png"
},
{
"title": "Hoteling Rooms",
"feature": "list",
"filters": "Hotel",
"order": 2,
"icon": "hoteling.png"
},
{
"title": "Huddle Rooms",
"feature": "list",
"filters": "Huddle",
"order": 3,
"icon": "huddle.png"
},
{
"title": "Shuttle Schedule",
"feature": "shuttle_list",
"order": 4,
"csvInput": {
"d1Pickup": [
"8:00",
"8:30",
"9:00"
],
"d4Pickup": [
"7:50",
"8:20",
"8:50"
]
},
"icon": "shuttle.png"
},
{
"feature": "map",
"order": 0,
"icon": "campus.png",
"buildings": {
"building1": {
"order": 0,
"id": "D1",
"label": "D1 - 8910 Ridgeline Blvd",
"floors": {
"floor1": {
"name": "1<sup>st</sup> Floor",
"order": 0,
"image": "floor1_map.png",
"rooms": {
"room1": {
"name": "Room 1",
"number": "D1-F1-1",
"occupancy": "12",
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Conference",
"coords": "100,100",
"hit_center": "80,80"
},
"room2": {
"name": "Room 2",
"number": "D1-F1-2",
"occupancy": 10,
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Hotel",
"coords": "150,100",
"hit_center": "130,80"
},
"room3": {
"name": "Room 3",
"number": "D1-F1-3",
"occupancy": 10,
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Huddle",
"coords": "200,150",
"hit_center": "180,130"
}
}
},
"floor2": {
"name": "2<sup>nd</sup> Floor",
"order": 1,
"image": "floor2_map.png",
"rooms": {
"room1": {
"name": "Room 1",
"number": "D1-F2-1",
"occupancy": "12",
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Conference",
"coords": "100,100",
"hit_center": "80,80"
},
"room2": {
"name": "Room 2",
"number": "D1-F2-2",
"occupancy": 10,
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Hotel",
"coords": "150,100",
"hit_center": "130,80"
},
"room3": {
"name": "Room 3",
"number": "D1-F2-3",
"occupancy": 10,
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Huddle",
"coords": "200,150",
"hit_center": "180,130"
}
}
},
"floor3": {
"name": "3<sup>rd</sup> Floor",
"order": 2,
"image": "floor3_map.png",
"rooms": {
"room 1": {
"name": "Room 1",
"number": "D1-F3-1",
"occupancy": "12",
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Conference",
"coords": "100,100",
"hit_center": "80,80"
},
"room2": {
"name": "Room 2",
"number": "D1-F3-2",
"occupancy": 10,
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Hotel",
"coords": "150,100",
"hit_center": "130,80"
},
"room3": {
"name": "Room 3",
"number": "D1-F3-3",
"occupancy": 10,
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Huddle",
"coords": "200,150",
"hit_center": "180,130"
}
}
}
}
}
}
}
],
"settings": {
"building": "D1",
"floor": 4,
"timeout": "120 (in seconds)",
"cssOverride": "custom.css",
"kiosk_coords": "200,200"
}
}
You should try returning your "views" as partials via the controller. This way they can all use the same scope. Otherwise, you need to call the app/controller in each view in order to get access to the same json data within the scope.
Sounds like the perfect use of a Service
// Adding injection of jsonService to controller
wfApp.controller('myController', ['$scope', '$http', 'jsonService', function($scope, $http, jsonService) {
// You can use jsonService.getJson() to get the file from anywhere the service is injected.
jsonService.getJson().success(function(data) {
$scope.modules = data.modules;
});
// Now your JSON is loaded (after promise resolves) and it can be used anywhere in the controller scope.
}]);
// Service to get the JSON file for use anywhere in the application
wfApp.service("jsonService", ["$http", function($http) {
return {
getJson: function() {
return $http.get('document.json');
}
}
}]);
The service can also be called in your $routeProvider using a resolve to load the JSON before the view is processed. This may be the ideal solution if you require the data immediately on page load for controller methods or data binding.
I'm developing a simple test app in angularJS for gaining knowledge and I've encountered with this problem.
KendoUI demo webpage offers a code snippet for each of its components. I'm trying to build a toolbar and a panelBar and I'm not being able to make the toolbar work. I'm using just the same code of the web demo, see here:
http://demos.telerik.com/kendo-ui/toolbar/angular
In my particular case, the toolbar does not visualize itself correctly, look at the images:
Here is the code I've written:
HTML view:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap- theme.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.default.min.css">
</head>
<body ng-app="controlApp" ng-controller="controller as control">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
</div>
<div id="navbar" class="navbar-collapse collapse">
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<div class="demo-section k-header">
<div kendo-toolbar k-options="control.toolbarOptions"></div>
</div>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-4">
<ul kendo-panel-bar k-options="panelBarOptions">
<li>
Metallica - Master of Puppets 1986
<ul>
<li>Battery</li>
<li>Master of Puppets</li>
<li>The Thing That Should Not Be</li>
<li>Welcome Home (Sanitarium)</li>
<li>Disposable Heroes</li>
<li>Leper Messiah</li>
<li>Orion (Instrumental)</li>
<li>Damage, Inc.</li>
</ul>
</li>
<li>
Iron Maiden - Brave New World 2000
<ul>
<li>The Wicker Man</li>
<li>Ghost Of The Navigator</li>
<li>Brave New World</li>
<li>Blood Brothers</li>
<li>The Mercenary</li>
<li>Dream Of Mirrors</li>
<li>The Fallen Angel</li>
<li>The Nomad</li>
<li>Out Of The Silent Planet</li>
<li>The Thin Line Between Love And Hate</li>
</ul>
</li>
</ul>
</div>
</div>
<hr>
<footer>
<p>© ABANTAIL S. Coop. 2014</p>
</footer>
</div>
<!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<script src="controller.js"></script>
</body>
</html>
Controller:
(function () {
var controller = function () {
var scope = this;
scope.toolbarOptions = {
items: [
{ type: "button", text: "Button" },
{ type: "button", text: "Toggle Button", togglable: true },
{
type: "splitButton",
text: "Insert",
menuButtons: [
{ text: "Insert above", icon: "insert-n" },
{ text: "Insert between", icon: "insert-m" },
{ text: "Insert below", icon: "insert-s" }
]
},
{ type: "separator" },
{ template: "<label>Format:</label>" },
{
template: "<input kendo-drop-down-list k-options='formatOptions' style='width: 150px;' />",
overflow: "never"
},
{ type: "separator" },
{
type: "buttonGroup",
buttons: [
{ spriteCssClass: "k-tool-icon k-justifyLeft", text: "Left", togglable: true, group: "text-align" },
{ spriteCssClass: "k-tool-icon k-justifyCenter", text: "Center", togglable: true, group: "text-align" },
{ spriteCssClass: "k-tool-icon k-justifyRight", text: "Right", togglable: true, group: "text-align" }
]
},
{
type: "buttonGroup",
buttons: [
{ spriteCssClass: "k-tool-icon k-bold", text: "Bold", togglable: true, showText: "overflow" },
{ spriteCssClass: "k-tool-icon k-italic", text: "Italic", togglable: true, showText: "overflow" },
{ spriteCssClass: "k-tool-icon k-underline", text: "Underline", togglable: true, showText: "overflow" }
]
},
{
type: "button",
text: "Action",
overflow: "always"
},
{
type: "button",
text: "Another Action",
overflow: "always"
},
{
type: "button",
text: "Something else here",
overflow: "always"
}
]
};
scope.formatOptions = {
optionLabel: "Paragraph",
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Heading 1", value: 1 },
{ text: "Heading 2", value: 2 },
{ text: "Heading 3", value: 3 },
{ text: "Title", value: 4 },
{ text: "Subtitle", value: 5 },
]
};
scope.panelBarOptions = {
};
}
//angular.module('controlCajaApp').controller('ControlCajaCtrl', controlCajaCtrl);
controlApp.controller('controller', controller);
}());
Moduler:
var controlApp = angular.module('controlApp', ['kendo.directives']);
So that's it. Any ideas of how to make the toolBar visualize in a correct way? Thanks in advance.
You are using Kendo 2014.3.1119 release version, but at the same time CSS files for the 2014.1.318, so they don't match. Update to correct version:
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />
and it should work fine.
Demo: http://plnkr.co/edit/HRi5bA4CaDm1HLUd3Tsq?p=preview
I am tring to create a TreeView with drag and drop functionality. I use this plugin
http://ngmodules.org/modules/angular-ui-tree, a demo is available here:
http://jimliu.github.io/angular-ui-tree/
But when I do the same thing things as written in the documentation my TreeViewdoes not load - why?
Here is my code.
<html ng-app="MyApp">
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="https://dl.dropboxusercontent.com/s/jm6a2zekeh9kixj/angular-ui-tree.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap#0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="https://dl.dropboxusercontent.com/s/nxy1if8uz0ndudn/angular-ui-tree.js?m="></script>
</head>
<body>
<div ng-controller="ctr">
<div ui-tree >
<ol ui-tree-nodes="" ng-model="list">
<li ng-repeat="item in list" ui-tree-node>
<div ui-tree-handle>
{{item.title}}
</div>
<ol ui-tree-nodes="" ng-model="item.items">
<li ng-repeat="subItem in item.items" ui-tree-node>
<div ui-tree-handle>
{{subItem.title}}
</div>
</li>
</ol>
</li>
</ol>
</div>
</div>
</body>
<script>
var myAppModule = angular.module('MyApp', ['ui.tree']);
myAppModule.controller('MainCtrl', function($scope) {
$scope.item = [{
"id": 1,
"title": "1. dragon-breath",
"items": []
}, {
"id": 2,
"title": "2. moiré-vision",
"items": [{
"id": 21,
"title": "2.1. tofu-animation",
"items": [{
"id": 211,
"title": "2.1.1. spooky-giraffe",
"items": []
}, {
"id": 212,
"title": "2.1.2. bubble-burst",
"items": []
}],
}, {
"id": 22,
"title": "2.2. barehand-atomsplitting",
"items": []
}],
}, {
"id": 3,
"title": "3. unicorn-zapper",
"items": []
}, {
"id": 4,
"title": "4. romantic-transclusion",
"items": []
}];
}
</script>
</html>
Plunker :
http://plnkr.co/edit/ueIUs4pDnWIrRKbVhvDq?p=preview
There is a syntax error, the last closing ) is missing in the bottom script block.
The controller name is mismatch, the MainCtrl is registered but the ctrl is used in ng-controller.
In the first ng-repeat="item in list", it loop over $scope.list but the data is in $scope.item.
Plunker: http://plnkr.co/edit/crEDsbbN5e7wKVKbFPlZ?p=preview
I'm working on a page and I can't seem to figure out why it's not displaying on IE 8. If I right click and view source the page code is being loaded but the whole page just displays blank and white.
I can't seem to figure it out because it displays fine in Firefox, Chrome, and IE 9 and above. Anyone had this happen / can see what's wrong in my code?
Page: http://kozyheat.com
Code:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Kozy Heat Fireplaces</title>
<meta name="description" content="For over 35 years, our commitment to quality and customer satisfaction remain the same. We offer a complete line of gas & wood fireplaces, unique cabinets and stylish accessories to complement any decor.">
<meta property="og:site_name" content="Kozy Heat Fireplaces"/>
<meta property="og:title" content="Kozy Heat Fireplaces"/>
<meta property="og:description" content="For over 35 years, our commitment to quality and customer satisfaction remain the same. We offer a complete line of gas & wood fireplaces, unique cabinets and stylish accessories to complement any decor."/>
<meta property="og:image" content="http://kozyheat.com/img/desktop/facebooklogo.png">
<meta name="viewport" content="width=device-width">
<script src="/scripts/js/desktop/jquery-1.10.2.min.js"></script>
<script src="/scripts/js/desktop/bootstrap.min.js"></script>
<script src="/scripts/js/desktop/modernizr-2.6.2.min.js"></script>
<script src="/scripts/js/desktop/selectivizr-min.js"></script>
<link rel="stylesheet" href="/css/desktop/bootstrap.min.css">
<link rel="stylesheet" href="/css/desktop/bootstrap-responsive.min.css">
<link rel="stylesheet" href="/css/desktop/font-awesome.min.css">
<link rel="stylesheet" href="/css/desktop/main.css">
<link rel="shortcut icon" href="/img/favicon/favicon.png">
<!--[if lte IE 9]>
<link rel="stylesheet" href="/css/desktop/main_ie8.css"/>
<![endif]-->
<script>
var backgroundInfo = [
{"imgURL": "/media/13631/dassel1.jpg", "URL": "product/dassel", "Name": "Dassel", "Description": "Keep the home fires burning with the Dassel gas fireplace. Numerous customizing options to fit any décor."},
{"imgURL": "/media/13660/northernfirelights2.jpg", "URL": "product/northern_firelights_patio_fireplace_table", "Name": "Northern Firelights Patio Fireplace Table", "Description": "What could be better than relaxing by, dining around or simply just enjoying the beauty of a patio fireplace table."},
{"imgURL": "/media/13624/bayport3.jpg", "URL": "product/bayport-l", "Name": "Bayport-L", "Description": "Our most popular 42” fireplace is now available in a Clean Face version. The Bayport-L offers a large and impressive viewing area with our most realistic logs and burner system yet. This fireplace is ordered in either the Log Set model or the Glass Media model."},
{"imgURL": "/media/13654/minnetonka3.jpg", "URL": "product/minnetonka", "Name": "Minnetonka", "Description": "The Minnetonka fireplace offers you a deeper firebox and an exterior-controlled "heat-dump" feature."}
];
$(window).load(function() {
updateBackground(1);
});
</script>
<script src="/scripts/js/desktop/main.js"></script>
<script>function detectMobile() {
var e = navigator.userAgent.toLowerCase();
var t = mobiles;
var n = false;
for (var r = 0; r < t.length; r += 1) {
if (e.indexOf(t[r]) != -1) {
n = t[r]
}
}
return n
}
$(function() {
if (detectMobile()) {
window.location.href = "http://kozyheat.com/mobile/"
}
});
var mobiles = ["midp", "240x320", "blackberry", "netfront", "nokia", "panasonic", "portalmmm", "sharp", "sie-", "sonyericsson", "symbian", "windows ce", "benq", "mda", "mot-", "opera mini", "philips", "pocket pc", "sagem", "samsung", "sda", "sgh-", "vodafone", "xda", "palm", "iphone", "ipod", "ipad", "android"]</script>
</head>
<body class="container-fluid">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-8302527-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
<div class="row-fluid">
<aside class="span3">
<img id="logo" src="/img/desktop/logo.png" alt="Kozy Heat Fireplaces">
<div class="fluid-row">
<div class="span10 offset1">
<h3>Our Story</h3>
<p>For over 35 years, our commitment to quality and customer satisfaction remain the same. We offer a complete line of gas & wood fireplaces, unique cabinets and stylish accessories to complement any decor.</p>
Read More
</div>
</div>
<div class="fluid-row">
<div class="span10 offset1">
<h3>Upgrade Today</h3>
<p>Ask us about our ways to upgrade your fireplace today with a SIT Proflame Remote control.</p>
Get Started
</div>
</div>
</aside>
<div class="span9 clearMargin">
<nav class="row-fluid">
About Us
Products
Find A Dealer
Support
Architects & Builders
Contact Us
</nav>
<section class="main clearfix">
<div class="box">
<div class="row-fluid" style="height:100%">
<section class="column">
<div id="imageRotator" class="row-fluid">
<span class="imgRotArrowLeft" onClick="updateBackgroundPrev();">‹</span>
<h2 id="imgRotName" class="clearMargin"></h2>
<p id="imgRotDesc"></p>
Learn More
<span class="imgRotArrowRight" onClick="updateBackgroundNext();">›</span>
</div>
</section>
</div>
</div>
</section>
<footer class="row-fluid">
<div class="span3">
<a class="nostyleW margR20" href="https://twitter.com/kozyheatfire" target="_blank"><i class="icon-twitter icon-3x"></i></a>
<a class="nostyleW margR20" href="https://www.facebook.com/KozyHeatFireplaces" target="_blank"><i class="icon-facebook icon-3x"></i></a>
<a class="nostyleW margR20" href="http://www.linkedin.com/company/2624342" target="_blank"><i class="icon-linkedin icon-3x"></i></a>
<a class="nostyleW margR20" href="http://www.youtube.com/user/KozyHeatFireplaces" target="_blank"><i class="icon-youtube icon-3x"></i></a>
</div>
<div class="span8">
<div class="row-fluid clearPadding" style="padding-bottom:5px;">
<a class="W" href="about_us">About Us</a> |
<a class="W" href="products">Products</a> |
<a class="W" href="find_a_dealer">Find a Dealer</a> |
<a class="W" href="support">Support</a> |
<a class="W" href="architects_builders">Architects & Builders</a> |
<a class="W" href="contact_us">Contact Us</a> |
<a class="W" href="dealers_login">Dealers Secured Area</a>
</div>
<div class="row-fluid clearPadding">
<strong>© 2013 Hussong MFG — 204 Industrial Park Drive / Lakefield, MN 56150 / <a class="W" href="tel:1-800-253-4904">800-253-4904</a></strong>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>
Update:
I've made sure there's no caching (reset manually, set to reset on exit, and ran CCleaner). I've also reset all IE 8 settings via this Fixit: http://windows.microsoft.com/en-us/windows-vista/reset-internet-explorer-8-settings
Here's a screenshot of my issue:
Okay I finally figured out the solution. Selectivizr was causing conflicts with font-face in IE 8 as detailed here:
Why is selectivizr.js causing "white screen of death" in IE8?
So solution is to only give selectivzr to browsers that aren't IE 8...which is kind of counter-intuitive but it works for now.
Code:
<!--[if !IE 8]><!-->
<script src="/scripts/js/desktop/selectivizr-min.js"></script>
<!--<![endif]-->
Change doctype to html 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Cache is a big factor when updating a website and refreshing a lot to see if your updates worked. A lot of time you might be viewing old cache, which seems to be what the issue is here.
Clear your cache and delete all data. Close IE. Open again. Now it should work. Check here for instructions: http://kb.wisc.edu/page.php?id=12314
Make sure to regularly clear your cache when changing website code, otherwise you always run the risk where you thought you fixed something (or thought you didn't) but really you were only viewing old cache. This can cause problems so make sure to clear your cache frequently when updating your website.
p.s. your website looks really good. Kudos to you! :)
I want to use a internationalization option at my jQuery Mobile and jQuery webside. I tried to generate an example with the documentation on http://i18next.com but it seems I failed. Does anybody has experiences with i18next?
Here my example:
index.html:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="js/i18next-1.5.6.min.js" type="text/javascript"></script>
<script src="js/translation.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="content">
<div id="headline1" data-i18n="headline"></div>
<table width="100%" border="0" id="menu1" class="menu">
<tr id="surname">
<td width="50%" data-i18n="menu.surname"></td>
<td width="50%"> </td>
</tr>
<tr id="firstName">
<td width="50%" data-i18n="menu.firstName"></td>
<td width="50%"> </td>
</tr>
</table>
</div>
</div>
</body>
</html>
Translation files:
/locales/de/translation.json
{
"menu": {
"surname": "Name:",
"firstName": "Vorname:"
},
"headline": "Daten:",
"headline_1": "Daten Allgemein:",
"headline_2": "Daten Speziell:"
}
/locales/en/translation.json
/locales/dev/translation.json
{
"menu": {
"surname": "Name:",
"firstName": "First Name:"
},
"headline": "Data:",
"headline_1": "Daten Common:",
"headline_2": "Daten Specific:"
}
/js/translation.js
$(document).ready(function(){
language_complete = navigator.language.split("-");
language = (language_complete[0]);
console.log("Sprache (root): %s", language);
i18n.init({ lng: language });
i18n.init({ debug: true });
$(".menu").i18n();
$("headline").i18n();
});
The translation for the menu I get is "menu.name" instead of expected "Name:".
For the headline I get no translation but I expected "Data:" or "Daten:".
If i try the following direct call I get no translation:
i18n.t("menu.surname", { defaultValue: "Name:"});
Does anybody know what the problem is? Or does anybody has a working example that fits what I try to do?
Main problem is you can't call i18n.t("menu.surname", { defaultValue: "Name:"}); directly after initialization, as loading the resources from server is async, so basically you try to translate before i18next fetched the resources.
Instead load it with callback:
$(document).ready(function(){
language_complete = navigator.language.split("-");
language = (language_complete[0]);
console.log("Sprache (root): %s", language);
i18n.init({ lng: language, debug: true }, function() {
// save to use translation function as resources are fetched
$(".menu").i18n();
$("headline").i18n();
});
});
or use flag to load resources synchron.
By the way:
Your html code has one closing </div> too many.
The call to $("headline").i18n(); should be $("#headline").i18n();.
<!DOCTYPE html>
<html>
<head>
<title>Basic Sample Usage</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/i18next.js" type="text/javascript"></script>
</head>
<body>
<h3> you can switch lng via ?setLng='lngTag' </h3>
<a id="en" href="?setLng=en"> en </a>
|
<a id="de" href="?setLng=de"> de </a>
<h3>loaded via attribute 'data-i18n' and $('.nav').i18n();</h3>
<h5>basic text</h5>
<ul class="nav">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<button id="btn" data-i18n="ns.common:add"></button>
<h5>extended usage of 'data-i18n' - apply to other attributes</h5>
<div id="extendedAttr">
<input data-i18n="[placeholder]ns.common:attr.placeholder;" type="text"></input>
<button data-i18n="[title]ns.common:attr.title;btn.hoverMe;"></button>
</div>
<script>
$.i18n.init({
//lng: 'en',
ns: { namespaces: ['ns.common', 'ns.special'], defaultNs: 'ns.special'},
useLocalStorage: false,
debug: true
}, function(t) {
//$('#navy').i18n(); for single
$('.nav').i18n(); // for group
$('#btn').i18n();
$('#extendedAttr').i18n();
});
</script>
</body>
</html>
locales/en/ns.special.json <=> make same for de/ns.speacial.json
{
"nav": {
"home": "en home",
"1": "en link 1",
"2": " en link 2"
},
"btn": {
"hoverMe": "en hover me!"
}
}
and locales/de/ns.common.json <=> make same for en/ns.speacial.json
{
"app": {
"company": {
"name": "my company"
}
},
"attr": {
"placeholder": "de translated placeholder",
"title": "translated title"
},
"add": "de add"
}