trying to use data-filter attribute of listview but its working like a plain html listview getting some errors regarding "refresh" of listview
HTML code:
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="css/app/app-style.css"/>
<link rel="stylesheet" href="css/lib/jquery.mobile.structure-1.1.1.css"/>
<link rel="stylesheet" href="css/lib/jquery.mobile.theme-1.1.1.css"/>
<link rel="stylesheet" href="css/lib/simpledialog.min.css"/>
<link rel="stylesheet" href="css/lib/jquery-ui-1.10.2.custom.css"/>
<link href="css/lib/mobiscroll.css" rel="stylesheet" type="text/css"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jquery-ui-1.10.2.custom.js"></script>
<!-- <script type="text/javascript" src="js/lib/jquery.mobile-1.1.1.js"></script> -->
<script type="text/javascript" src="js/lib/jquery.validate.js"></script>
<script type="text/javascript" src="js/lib/additional-methods.js"></script>
<script type="text/javascript" src="js/lib/cordova-2.0.0.js"></script>
<script type="text/javascript" src="js/lib/jqm.page.params.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" defer>
$(document).ready(function()
{ $('#viewtag').on('click',function(e)
{
e.preventDefault();
getRegisterdUser();
$('#viewinformation').show();
});
});
</script>
</head>
<body>
<div data-role="page" id="logininfo" data-theme="b">
<div data-role="content">
<div class="ui-grid-a" data-theme="a">
<div class="ui-block-a" data-theme="e" style="width:50%;">VIEW</div>
</div>
</div>
</div>
<div data-role="page" id="viewinformation" data-theme="d">
<div data-role="header"> </div>
<div data-role="content">
<ul id="list" data-role="listview" data-filter="true" data-filter-placeholder="Search Student Name..." data-filter-theme="e" style="margin-top:20%;">
</ul>
</div>
</div>
</body>
</html>
(have written in alldatabsae.js file) JQUERY CODE to pull data from localDB and display only username in listview
var db;
function getRegisterdUser()
{
var query = 'SELECT username FROM loginTable';
console.log("query for username selection:" + query);
db.transaction(function(tx)
{
tx.executeSql(query,[],successCBofUsername,errorCBofUsername)
},errorCB,successCB);
}
function successCBofUsername(tx,results)
{
var resultslength = results.rows.length;
if(results!= null && results.rows.length > 0 && results.rows != null)
{
for(var i = 0; i <resultslength; i++)
{
var name = results.rows.item(i);
$('<li>'+ name.username +'</li>').appendTo($('#list'));
}
$('#list').listview('refresh');
//$('#displayinfo').empty().append('html').trigger('create');
}
else
{alert("no records exists");}
}
function errorCBofUsername()
{
alert("error of usernmae query");
}
but getting errors:
1. Uncaught Error: cannot call methods on listview prior to initialization; attempted to call method 'refresh' at http://code.jquery.com/jquery-1.8.2.min.js:2
2. Uncaught Error: cannot call methods on listview prior to initialization; attempted to call method 'refresh' at file:///android_asset/www/js/lib/jquery.js:506
getting error in this line of code
$('#list').listview('refresh');
Just replace below function in your code.
function successCBofUsername(tx,results)
{ var listdata='';
var resultslength = results.rows.length;
if(results!= null && results.rows.length > 0 && results.rows != null)
{
for(var i = 0; i <resultslength; i++)
{
var name = results.rows.item(i);
listdata+='<li>'+ name.username +'</li>';
}
$("#list").append(listdata).listview('refresh');
}
else
{alert("no records exists");}
}
You should use:
$('#list').listview().listview('refresh');
Because listview is dynamically created and don't exist in reality it first must be initialized before its markup can be enhanced.
To find out why take a look at my other answer: jQuery Mobile: Markup Enhancement of dynamically added content. Search for chapter: Markup enhancement problems:
Related
I am trying to set atributes for my div from Json, but i cannot get it to work. Writing the values manually works, but not when setting them. i cannot figure out what i am doing wrong.
This is my code:
<html>
<head>
<title>ThingSpeak Live Colours</title>
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
var Temp;
var Humidity;
var Light;
$(document).ready(function () {
$.getJSON('http://api.thingspeak.com/channels/200101/feed/last.json', null, function (data) {
Temp = data["field1"];
Humidity = data["field2"];
Light = data["field3"];
var PreviewGaugeMeter_1 = document.getElementById("PreviewGaugeMeter_1");
var Data_percent_1 = PreviewGaugeMeter_1.getAttribute("data-percent");
PreviewGaugeMeter_1.setAttribute("data-percent", Temp);
});
});
</script>
</head>
<body>
<div class="GaugeMeter" id="PreviewGaugeMeter_1" data-percent="" data-append="%" data-size="90" data-theme="Green-Gold-Red" data-animate_gauge_colors="1" data-animate_text_colors="1" data-width="9" data-label="" data-style="Arch" data-label_color="fff"></div>
</html>
And this my JSON output:
{"created_at":"0016-12-12T00:00:00Z","entry_id":37,"field1":" 4","field2":" 7","field3":"4"}
I found a workaround, by getting "$.getJSON" to send variables to another webpage, from there i used $_GET, to retrieve them from the url, and it works.
I am trying to create a tagging tool where a user can manually tag untagged call centre requests by means of a web page application.
The app structure is as follows:
client
js
controllers
editTagController.js
editUntagController.js
tagnamesController.js
tagsController.js
untagsController.js
imports
jquery-3.1.1.js
app.js
views
index.html
edit-tags.html
view-tagnames.html
view-tags.html
view-untags.html
node_modules
body-parser
express
jquery
mongoose
tether
server
controllers
tagscontroller.js
models
tag.js
name.js
package.json
README.MD
server.js
My error message is at the below. I am currently running it locally and I can't seem to fix it at all. I think it has something to do with my order of imports in my index.html file.
I think it could also be something to do with the factory that I am defining named taggingApp. However I am not sure if it is just this latter error or another error with it. Any help/advice on conventions would be helpful.
Failed to instantiate module taggingApp due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=n...)
at https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:6:412
at https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:40:222
at q (https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:7:355)
at g (https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:39:319)
at https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:39:488
at q (https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:7:355)
at g (https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:39:319)
at cb (https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:43:336)
at c (https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:20:390)
at Bc (https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:21:179
Here is my code:
server.js
var express = require('express'),
app = express(),
bodyParser = require('body-parser'),
mongoose = require('mongoose'),
tagsController = require('./server/controllers/tagscontroller');
mongoose.connect('mongodb://localhost:27017/STDBank');
app.use(bodyParser());
app.get('/', function (req, res) {
res.sendfile(__dirname + '/client/views/index.html');
});
app.use('/js', express.static(__dirname + '/client/js'));
// app.get('/api', function (req, res) {
// res.sendfile(__dirname + '/client/views/index.html');
// });
//REST API
app.get('/api/tags', tagsController.list);
app.post('/api/tags/:id', tagsController.update);
app.get('/api/untags', tagsController.listUntags);
app.post('/api/untags/:id', tagsController.updateUntags);
app.get('/api/tagnames', tagsController.listName);
app.listen(3000, function() {
console.log('I\'m Listening...');
})
tagscontroller.js (Server Side)
var Tag = require('../models/tag');
var TagName = require('../models/name');
module.exports.list = function (req, res) {
Tag.find({}, function (err, results) {
console.log("RESULTS ARE: ",results);
var arr = [];
for(var i = 0; i<results.length;i++){
if(results[i].itag[0]){
arr.push({
_id : results[i]._id,
name : results[i].name,
itag : results[i].itag
});
console.log("enter if: ", results[i]);
}//end of if statement
else{
console.log("enter if: ", results[i].itag);
console.log("enters else statement ", arr);
}//end of else statement
}//end of for loop
console.log("results ",arr);
res.json(arr);
});
}
module.exports.update = function(req, res){
var arr = [];
//for(var k = 0;k<req.body.intentTag.length();k++){
// arr[k]= req.body.intentTag[k];
//}
console.log("Server side entered ", req.body.itag);
Tag.findByIdAndUpdate(req.params.id, {
$set: {
name: req.body.name,
itag: req.body.itag //arr
}
}, function (err, tag){
if(err) res.send(err);
res.json(tag);
});
}
module.exports.listUntags = function (req, res) {
Tag.find({}, function (err, results) {
var arr = [];
for(var i = 0; i<results.length;i++){
if(results[i].itag[0]){
//console.log("enter if: ", results[i].intentTag);
}//end of if statement
else{
//console.log("enter if: ", results[i].intentTag);
//console.log("enters else statement ", arr);
arr.push({
_id : results[i]._id,
name : results[i].name
});
}//end of else statement
}//end of for loop
//console.log("results ",arr);
res.json(arr);
});
}
module.exports.updateUntags = function(req, res){
var arr = [];
//for(var k = 0;k<req.body.intentTag.length();k++){
// arr[k]= req.body.intentTag[k];
//}
console.log("Server side entered ", req.body.itag);
Tag.findByIdAndUpdate(req.params.id, {
$set: {
name: req.body.name,
itag: req.body.itag //arr
}
}, function (err, tag){
if(err) res.send(err);
res.json(tag);
});
}
module.exports.listName = function(req, res){
TagName.find({}, function(err, results){
console.log("RESULTS: ", results);
res.json(results);
});
}
If we are only assuming a call to /tags then you will need to know what the Tag model looks like:
tag.js
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var TagSchema = new Schema({
name: String,
itag: []// arr
}, {collection : "requests"});
module.exports = mongoose.model('Tag', TagSchema);
app.js
var app = angular.module("taggingApp", ["ngRoute","ngResource"]);
app.config(function($routeProvider) {
$routeProvider.when("/tags", {
templateUrl: "../views/view-tags.html",
controller: "tagsController"
})
.when("/tags/:index", {
templateUrl: "../views/edit-tags.html",
controller: "/controllers/editTagController"
})
.when("/untags", {
templateUrl: "../views/view-untags.html",
controller: "/controllers/untagsController"
})
.when("/untags/:index", {
templateUrl: "/views/edit-tags.html",
controller: "/controllers/editUntagController"
})
.when("/tagnames", {
templateUrl: "../views/view-tagnames.html",
controller: "/controllers/tagnamesController"
})
.otherwise({
redirectTo: "/tags"
});
});
Due to our previous assumption we can see that we need the tagsController and the view/view-tags.html files
view-tags.html
<div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Search Tag Details" data-ng-model="search" />
</div>
<table class="table table-striped table-hover">
<tbody>
<tr>
<th>Request</th>
<th>Tag Name</th>
</tr>
<tr data-ng-repeat="item in items | filter: search" data-ng-click="editItem($index)">
<td>{{item.name}}</td>
<td>{{item.tag}}</td>
</tr>
</tbody>
</table>
<div class="form-group">
<button data-ng-click="untaggedView()" class="btn btn-primary">Untagged View</button>
</div>
<div class="form-group">
<button data-ng-click="tagnamesView()" class="btn btn-primary">View Tagnames</button>
</div>
tagsController.js (Client Side)
app.controller("tagsController", ["$scope", "$resource", "$location", "$routeParams", function($scope, $resource, $location, $routeParams) {
var Tag = $resource("/api/tags");
Tag.query(function(results){
$scope.items = results;
console.log("The items = ", items);
});
$scope.untaggedView = function() {
$location.path("/untags");
};
$scope.editItem = function(index) {
$location.path("/tags/" + index);
};
$scope.tagnamesView = function() {
$location.path("/tagnames");
};
}]);
And then Lastly index.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap -->
<script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js"></script><!-- Bootstrap -->
<link data-require="bootstrap#*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous" />
<!-- <script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="bootstrap#*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> --> <script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script data-require="angular-route#*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
<script data-require="ui-bootstrap#*" data-semver="2.2.0" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-2.2.0.js"></script>
<script data-require="tether#*" data-semver="1.3.4" src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.1/js/tether.min.js"></script>
<link rel="stylesheet" href="https://bootswatch.com/cyborg/bootstrap.min.css" />
<script type="text/javascript" src="/js/app.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1> Tagging Tool</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div data-ng-view=""></div>
<p>{{search}}</p>
</div>
</div>
</div>
<script type="text/javascript" src="/js/controllers/tagsController.js"></script>
<!-- <script type="text/javascript" src="/js/controllers/untagsController.js"></script>
<script type="text/javascript" src="/js/controllers/editTagController.js"></script>
<script type="text/javascript" src="/js/controllers/editUntagController.js"></script>
<script type="text/javascript" src="/js/controllers/tagnamesController.js"></script> -->
</body>
</html>
Any Help whatsoever would be greatly appreciated
EDIT:
I have added the comments in below however it seems that it cannot get that Angular. Any ideas on that?
NEW view-tags.html file
<!DOCTYPE html>
<html ng-app="taggingApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap -->
<script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js"></script><!-- Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<!--<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>-->
<script src="cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.9/angular-resource.js"></script>
<link data-require="bootstrap#*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous" />
<!-- <script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="bootstrap#*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> -->
<!-- <script data-require="angular-route#*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script> -->
<script data-require="ui-bootstrap#*" data-semver="2.2.0" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-2.2.0.js"></script>
<script data-require="tether#*" data-semver="1.3.4" src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.1/js/tether.min.js"></script>
<link rel="stylesheet" href="https://bootswatch.com/cyborg/bootstrap.min.css" />
<script type="text/javascript" src="/js/app.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1> Tagging Tool</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div ng-view=""></div>
<p>{{search}}</p>
</div>
</div>
</div>
<script type="text/javascript" src="/js/controllers/tagsController.js"></script>
<!-- <script type="text/javascript" src="/js/controllers/untagsController.js"></script>
<script type="text/javascript" src="/js/controllers/editTagController.js"></script>
<script type="text/javascript" src="/js/controllers/editUntagController.js"></script>
<script type="text/javascript" src="/js/controllers/tagnamesController.js"></script> -->
</body>
</html>
These are the errors I have been getting when I updated my HTML file
EDIT:
Here is your error Aravind:
#Aravind
NEWEST EDIT:
edited index.html file:
<!DOCTYPE html>
<html ng-app="taggingApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="//www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap -->
<script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js"></script><!-- Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!--<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.9/angular-resource.js"></script>
<link data-require="bootstrap#*" data-semver="4.0.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous" />
<!-- <script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="bootstrap#*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> -->
<!-- <script data-require="angular-route#*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script> -->
<script data-require="ui-bootstrap#*" data-semver="2.2.0" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-2.2.0.js"></script>
<script data-require="tether#*" data-semver="1.3.4" src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.1/js/tether.min.js"></script>
<link rel="stylesheet" href="https://bootswatch.com/cyborg/bootstrap.min.css" />
<script type="text/javascript" src="/js/app.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1> Tagging Tool</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div ng-view=""></div>
<p>{{search}}</p>
</div>
</div>
</div>
<script type="text/javascript" src="/js/controllers/tagsController.js"></script>
<!-- <script type="text/javascript" src="/js/controllers/untagsController.js"></script>
<script type="text/javascript" src="/js/controllers/editTagController.js"></script>
<script type="text/javascript" src="/js/controllers/editUntagController.js"></script>
<script type="text/javascript" src="/js/controllers/tagnamesController.js"></script> -->
</body>
</html>
I am still receiving the [$injector:modulerr] error however the others are all sorted out.
EDIT:
I have changed the relative directories of my App.js so that they actually load the controllers and views. On top of that I have added an app definition into every controller. This fixes my current errors, gives me no other errors however the data is not displaying
Include angular scripts in the index.html and your reference for the ngResource is missing
Use
//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js
//cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.9/angular-resource.js
Update :
Replace this line
"cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.9/angular-resource.js"
with this
"//cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.9/angular-resource.js"
Reason : you missed //
if // is not there it will be searching in your localhost.
adding // will be searching in the internet http or https is not mentioned because // refers to your current protocol and makes request correspondingly
I'm an angular beginner and it does not seem to respond to me. I'm trying to to a simple ng-click to add and subtract to a counter. I get his error:
Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=FirstController&p1=not%20a%20function%2C%20got%20undefined...
this is index.html:
controller.js:
var app = angular.module('app', []);
app.controller('FirstController', function($scope) {
$scope.word = "ever";
$scope.counter = 0;
$scope.add = function(amount) {
$scope.counter += amount;
};
$scope.subtract = function(amount) {
$scope.counter -= amount;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app>
<head>
<title>Simple App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<div ng-controller="FirstController">
<h4>The simplest adding machine ever</h4>
<button ng-click="add(1)" class="button">Add</button>
<a ng-click="subtract(1)" class="button alert">Subtract</a>
<h4>Current count: {{ counter }}</h4>
</div>
<script type="text/javascript" src="js/controller.js"></script>
</body>
</html>
Any help will be appreciated. Thanks
I think you forgot to specify what app you use , try the following code :
<html ng-app="app">
Check this it seems your missing the ng-app inclusion in the html
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.1" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="test">
<div trans-directive></div>
<h1>Hello Plunker!</h1>
<div ng-controller="trans">
<h4>The simplest adding machine ever</h4>
<button ng-click="add(1)" class="button">Add</button>
<button ng-click="subtract(1)" class="button alert">Subtract</button>
<h4>Current count: {{ counter }}</h4>
</div>
</body>
</html>
var app = angular.module("test",[]);
app.controller('trans',function($scope){
$scope.name = 'amruth';
$scope.word = "ever";
$scope.counter = 0;
$scope.add = function(amount) {
$scope.counter += amount;
};
$scope.subtract = function(amount) {
$scope.counter -= amount;
};
});
http://plnkr.co/edit/khFwKUvKkruhMa5CYtRt?p=preview
Here is your code that works: Plunkr.
Changes required :
ng-app should have a value assigned to it.
add ng-app to the body tag, as your angular script is in the head tag, html will not recognize angular
Include your controller.js after the angular but before the script code.
var app = angular.module('app', []);
app.controller('FirstController',function($scope) {
$scope.word = "ever";
$scope.counter = 0;
$scope.add = function(amount) {
$scope.counter += amount;
};
$scope.subtract = function(amount) {
$scope.counter -= amount;
};
});
<!DOCTYPE html>
<html>
<head>
<title>Simple App</title>
<script data-require="angular.js#1.3.1" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="FirstController">
<h4>The simplest adding machine ever</h4>
<button ng-click="add(1)" class="button">Add</button>
<a ng-click="subtract(1)" class="button alert">Subtract</a>
<h4>Current count: {{ counter }}</h4>
</div>
{{6+2}}
</body>
</html>
1. modify html file
Here is solution for your problem.Add following line inside your html code
<html ng-app='app'>
inside <head> tag add script : <script src="app.js"></script>
2. modify controller.js
app.controller('FirstController',function($scope){});
Error occured because you added extra space between "'FirstController'," and "function($scope){})"
I have started using JQPlot to draw the graph in real time as well. I have got one sample example working in which it will draw the graph with two data only-
var storedData = [70, 10];
Then I have added a button, if I click on that button, it will start rendering some more data. Basically, you can say just like real time data from the server-
But the problem that I am facing currently is, as soon as I clicked on Start Updates button, it doesn't draw anything. So I believe, I messed up something the button click thing. It's been a long time I worked on Javascript and HTML thing so I have forgotten lot of things.
Below is my code-
<!DOCTYPE html>
<html>
<head>
<title>Line Charts and Options</title>
<link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
<link rel="stylesheet" type="text/css" href="examples.min.css" />
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="colmask leftmenu">
<div class="colleft">
<div class="col1" id="example-content">
<div id="chart1" style="height: 300px; width: 500px; position: relative;"></div>
<button>Start Updates</button>
<script class="code" type="text/javascript">
$(document).ready(function(){
var storedData = [70, 10];
var plot1;
renderGraph();
$('button').click( function(){
doUpdate();
$(this).hide();
});
function renderGraph() {
if (plot1) {
plot1.destroy();
}
plot1 = $.jqplot('chart1', [storedData]);
}
var newData = [9, 1, 4, 6, 8, 2, 5];
function doUpdate() {
if (newData.length) {
var val = newData.shift();
$.post('/echo/html/', {
html: val
}, function(response) {
var newVal = new Number(response); /* update storedData array*/
storedData.push(newVal);
renderGraph();
log('New Value '+ newVal+' added')
setTimeout(doUpdate, 3000)
})
} else {
log("All Done")
}
}
function log(msg) {
$('body').append('<div>'+msg+'</div>')
}
});
</script>
<script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
</body>
</html>
I am not able to make the button click event work. As soon as I click on Start Update button, it does not draw anything. Correct behavior should be that it should start rendering on the graph with new datasets.
I tried to make that real-time rendering thing work from this jsfiddle
I copied same bunch of code from the above JSFiddle in my HTML but it doesn't working for me. Can anybody help me with this?
Here you go - you will have to update to your jqplot location in script tags. Also, I had to change the doUpdate to doUpdate2 as $.post will not work without jfiddle as far as I know.
<!DOCTYPE html>
<html>
<head>
<title>Line Charts and Options</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript">
$(function(){
/* store empty array or array of original data to plot on page load */
var storedData = [70, 10];
/* initialize plot*/
var plot1;
renderGraph();
$('button').click( function(){
doUpdate2();
$(this).hide();
});
function renderGraph() {
if (plot1) {
plot1.destroy();
}
plot1 = $.jqplot('chart1', [storedData]);
}
var newData = [9, 1, 4, 6, 8, 2, 5];
var cp = 0;
function doUpdate2() {
var newVal = new Number(newData[cp]); /* update storedData array*/
storedData.push(newVal);
renderGraph();
log('New Value '+ newVal+' added')
if (cp < newData.length-1) setTimeout(doUpdate2, 3000)
cp++;
}
function doUpdate() {
if (newData.length) {
var val = newData.shift();
$.post('/echo/html/', {
html: val
}, function(response) {
var newVal = new Number(response); /* update storedData array*/
storedData.push(newVal);
renderGraph();
log('New Value '+ newVal+' added')
setTimeout(doUpdate, 3000)
})
} else {
log("All Done")
}
}
function log(msg) {
$('body').append('<div>'+msg+'</div>')
}
});
</script>
</head>
<body>
<div id="chart1" style="height: 300px; width: 500px; position: relative;"></div>
<button>Start Updates</button>
</body>
</html>
I have 1 site under foo.com/test1/test1.html and another at foo.com/test2/test2.html
test1.html looks like this:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
document.ready = function(){
var name = localStorage.getItem("name");
if(name){
console.log("name is defined");
}else{
console.log("name is not defined");
localStorage.setItem("name", "test1");
}
$('#name').text(name);
}
</script>
</head>
<body>
<p id="name"></p>
</body>
</html>
And test2.html is like this:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
document.ready = function(){
var name = localStorage.getItem("name");
if(name){
console.log("name is defined");
}else{
console.log("name is not defined");
localStorage.setItem("name", "test2");
}
$('#name').text(name);
}
</script>
</head>
<body>
<p id="name"></p>
</body>
</html>
My question is that is it possible to achieve that that if I go to test1, the value of name is "test1" and if I go to test2 the name will be test2. Basically I suspect that I need to name them differently but I rather not do that. Is there any good work around for this?
Thank you in advance.
local storage is defined per domain. You should keep objects in localstorage to maintain page context.
Here is solution to do it.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
document.ready = function(){
var thispage = JSON.parse(localStorage.getItem("page1"));
if(thispage.name){
console.log("name is defined");
}else{
console.log("name is not defined");
var obj={name : "test1"}
localStorage.setItem("page1", JSON.stringify(obj));
}
}
</script>
</head>
<body>
<p id="name"></p>
</body>
</html>
similar to all pages.