This is my code. At this moment only one product display. I would like to display all of the products by the click of a button or on page load.
<html>
<head>
<title>
Products
</title>
<script src="/appmachine/core.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/bridge/core.js"></script>
<link rel="stylesheet" href="styles.css">
<script src="script.js" type="text/javascript"></script>
<script type="text/javascript"> window.App</script>
</head>
<body>
<p id="name"></p>
<p id="imageid"></p>
<p id="shop"></p>
<p id="description"></p>
<a onClick="window.App.navigateToBlock('products', function(alert('Succes')))">Test</a>
</body>
<script>
App.getCurrentRecord(function(products){
document.getElementById('name' ).innerHTML = products.name;
document.getElementById('imageid').innerHTML = '<img width="300" src="'+ products.imageid +'"/>';
document.getElementById('shop').innerHTML = products.shop;
document.getElementById('description').innerText = products.description;
});
</script>
</html>
Manual DOM manipulation is painful, try using templates.
This example uses mustache.js, but you can use whatever you prefer.
JSBin Demo
<div id="target"></div>
<script id="template" type="x-tmpl-mustache">
{{#products}}
<p id="name">{{ name }}</p>
<img id="imageid" src="{{imageid}} />
<p id="shop">{{ shop }}</p>
<p id="description">{{ description }}</p>
{{/products}}
</script>
The syntax {{#products}} {{/products}} specifies a list based off of JSON data.
var products = {
"products": [{
name: "Alice",
imageid: '<img width="300" src="#"/>',
shop: 'Test Shop',
description: 'test description'
}, {
name: "Bob",
imageid: '<img width="300" src="#"/>',
shop: 'Another Shop',
description: 'super description'
}]
};
Using this data you can populate the template in JavaScript.
function loadView(products) {
var template = $('#template').html();
Mustache.parse(template);
var rendered = Mustache.render(template, products);
$('#target').html(rendered);
}
loadView(products);
Related
I'm trying to implement a Livesearch list onto a page where it takes an array and its objects and by using the search box, will filter matches and only show match of the search term,
The issue I'm having is that when looping through the array items using a forEach and trying to append the results to the DOM,
jQuery is Not defined
Essentially the code should grab the array, loop through the array, grab the building names and append each to the .list DIV as h4 items.
//testItemsArray
//array will contain objects used in the mockup for a livesearch function on the map pages.
var testItemsArray = [{
id: '1',
building: 'building1'
}, {
id: '2',
building: 'building2'
}, {
id: '3',
building: 'building3'
}, {
id: '4',
building: 'building4'
}, {
id: '5',
building: 'building5'
}];
(function($) {
$search = $('#searchbox'); // This is used for the filter input field
var buildingList = '',
buildingh4 = '';
testItemsArray.forEach(function(buildings) {
buildingh4 = "<h4>" + buildings.building + "</h4>";
buildingList += buildingh4
$('.list').html(buildingList);
});
}(jQuery));
<html lang="en">
<head>
<script src="./js/list.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Main Page</title>
</head>
<body>
<div class="container" id="search">
<header class="header">
<h1>University Of Lincoln Map Search</h1>
<h2></h2>
</header>
<div class="logo">
<p>This page is to be used for the locating of campus buildings and rooms</p>
</div>
<div class="info">
<div class="list">
********THIS IS WHERE I WANT ALL ITEMS TO DISPLAY** *****
</div>
</div>
<div class="key">
<div class="key-bg"></div>
<div class="key-text"><span><h2>Find the room you are looking for</h2></span></div>
<hr>
</div>
<div class="footer">
<p>map</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
You should place this line of code before closing the body tag. Instead of using IIFE, use document.ready
In your code, you put your list.js before jquery.min.js, that's why you get jQuery is undefined error.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./js/list.js"></script>
</body>
var testItemsArray = [{
id: '1',
building: 'building1'
}, {
id: '2',
building: 'building2'
}, {
id: '3',
building: 'building3'
}, {
id: '4',
building: 'building4'
}, {
id: '5',
building: 'building5'
}];
$(document).ready(function() {
$search = $('#searchbox'); // This is used for the filter input field
var buildingList = '',
buildingh4 = '';
testItemsArray.forEach(function(buildings) {
buildingh4 = "<h4>" + buildings.building + "</h4>";
buildingList += buildingh4
$('.list').html(buildingList);
});
});
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Main Page</title>
</head>
<body>
<div class="container" id="search">
<header class="header">
<h1>University Of Lincoln Map Search</h1>
<h2></h2>
</header>
<div class="logo">
<p>This page is to be used for the locating of campus buildings and rooms</p>
</div>
<div class="info">
<div class="list">
********THIS IS WHERE I WANT ALL ITEMS TO DISPLAY** *****
</div>
</div>
<div class="key">
<div class="key-bg"></div>
<div class="key-text"><span><h2>Find the room you are looking for</h2></span></div>
<hr>
</div>
<div class="footer">
<p>map</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./js/list.js"></script>
</body>
</html>
Put your js reference that is
<!-- listJS cdn link-->
<script src="./js/list.js"></script>
After Jquery library reference that is below
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You should have a reference to your Jquery library.
// IIFE - Immediately Invoked Function Expression
(function($, window, document) {
// The $ is now locally scoped
// The rest of your code goes here!
}(window.jQuery, window, document));
// The global jQuery object is passed as a parameter
Check here for references
I am new to javeScript and I am creating a website with slideshow feature. I want "when the user click the forward or backward button, the slideshow URL will change to "slideshow/img#1, slideshow/img#2, etc", but it is still a single page application." Can anyone give some idea? Thank you.
Note: This is not a homework or any academic work, but just my personal project.
There is a slider in angularjs which can be used by injecting ui.bootstrap.
Working plunker: https://plnkr.co/edit/aTl515SYqSawOk6f97RM?p=preview
script.js
angular.module('app', ['ui.bootstrap']);
function CarouselDemoCtrl($scope){
$scope.myInterval = 3000;
$scope.slides = [
{
image: 'http://lorempixel.com/400/200/'
},
{
image: 'http://lorempixel.com/400/200/food'
},
{
image: 'http://lorempixel.com/400/200/sports'
},
{
image: 'http://lorempixel.com/400/200/people'
}
];
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="app">
<div ng-controller="CarouselDemoCtrl" id="slides_control">
<div>
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}">
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</slide>
</carousel>
</div>
</div>
</div>
</body>
</html>
I'm having some trouble figuring out a way to insert a <p> in the DOM in each item of ng-repeat.
I'm doing ng-repeat of this array of objects:
$scope.items = [
{name: "john", paragraph:"<p>hi, im john</p>"},
{name: "rita", paragraph:"<p>hi, im rita</p>"},
{name: "joe", paragraph:"<p>hi, im joe</p>"}
];
then in the html file I have:
<div ng-repeat="item in items">
<br>
<br>
<p>this is the beginning of {{$index}} box</p>
<p>{{item.name}}</p>
{{insertHTML(item.paragraph)}}
<p>this is the end of {{$index}} box</p>
<br>
<br>
</div>
the insert.HTML(str) function is supposed to transform the string on each item.paragraph into an html element.
Here's the function:
$scope.insertHTML = function(str) {
var wrapper = document.createElement('div');
wrapper.innerHTML = str;
};
I created this plunker where you can check the whole code running
Try Directives. See demo here
var app = angular.module('plunker', []);
app.directive('myDir',function(){
return{
link : function(scope,element){
element.append(' <br><br><p>this is the beginning of box</p>');
element.append('<p>'+scope.item.name+'</p>');
element.append(' <p>this is the end of box<br><br><br></p>');
}}
})
app.controller('MainCtrl', function($scope) {
$scope.items = [
{name: "john", paragraph:"<p>hi, im john</p>"},
{name: "rita", paragraph:"<p>hi, im rita</p>"},
{name: "joe", paragraph:"<p>hi, im joe</p>"}
];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="item in items">
<my-dir></my-dir>
</div>
</body>
</html>
You should use Angular's built in ng-bind-html and ngSanitize:
angular.module("demo", ["ngSanitize"]);
angular
.module("demo")
.controller("demoController", ["$scope", "$sce", function($scope, $sce) {
$scope.items = [{
name: "john",
paragraph: $sce.trustAsHtml('<iframe border="0" frameborder="0" allowtransparency="true" width="603" height="465" src="//www.chess.com/emboard?id=3681802"></iframe>')
},
{
name: "rita",
paragraph: "<p>hi, im rita</p>"
},
{
name: "joe",
paragraph: "<p>hi, im joe</p>"
}
];
}])
.red {
background-color: red
}
.blue {
background-color: blue
}
.green {
background-color: green
}
<!DOCTYPE html>
<html ng-app="demo">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-controller="demoController">
<p>hello everyone</p>
<div ng-repeat="item in items">
<br>
<br>
<p>this is the beginning of {{$index}} box</p>
<p>{{item.name}}</p>
<div ng-bind-html="item.paragraph"></div>
<p>this is the end of {{$index}} box</p>
<br>
<br>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-sanitize.js"></script>
</body>
</html>
I'm new to angular and want to start practicing some code. I created a simple app but the angular expression is not evaluating in the browser. My {{inventory.product.name}} prints to the browser as {{inventory.product.name}}; however, if I go to view page source my angular.min file is loaded. Can someone please tell me what I'm doing wrong, thanks.
HTML CODE
<title>Angular Practice</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body ng-app="inventory">
<div ng-controller="InventoryController as inventory">
<h1>{{inventory.product.name}}</h1>
<h2>Product Amount</h2>
<p>Product description</p>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
ANGULAR CODE
(Function(){
var app = angular.module('inventory', []);
app.controller('InventoryController', function(){
this.product = item;
});
var item = {
name: 'Test Item',
amount: 10,
description: 'This is the first test item',
}
})();
In your JS code, Function() should be function(). Note that Javascript is case sensitive.
Working code snippet:
(function() {
var app = angular.module('inventory', []);
app.controller('InventoryController', function() {
this.product = item;
});
var item = {
name: 'Test Item',
amount: 10,
description: 'This is the first test item',
}
})();
<body ng-app="inventory">
<div ng-controller="InventoryController as inventory">
<h1>{{inventory.product.name}}</h1>
<h2>Product Amount</h2>
<p>Product description</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
I am really struggling with Handlebars.js. The below example is the extent of my test html document.
I just cannot work out why the html variable is not writing the desired context content is not providing an output:
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="js/handlebars-v4.0.5.js"></script>
</head>
<body>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
<script type="text/javascript">
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {
title: "My New Post",
body: "This is my first post!"
};
var html = template(context);
</script>
</body>
</html>