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){})"
Related
When I use vscode in the window environment and type in the script part of the .html file and save it, the sentences are automatically arranged as I do not want, so I am worried.
enter image description here
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react#17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
let counter = 0;
function countUp() {
counter = counter + 1;
render();
}
function render() {
ReactDOM.render(<Container />, root);
}
function Container() {
return (
<div>
<h3>Total Clicks:{counter} </h3>
<button onClick={countUp}>Clock me</button>
</div>
);
}
render();
</script>
</html>
after saving
enter image description here
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react#17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root"); let counter = 0; function countUp() { counter = counter + 1; render(); } function render() { ReactDOM.render(
<Container />, root); } function Container() { return (
<div>
<h3>Total Clicks:{counter} </h3>
<button onClick={countUp}>Clock me</button>
</div>
); } render();
</script>
</html>
I did some searching and tried changing the formmater in the user settings in vscode but it still changed in a way I didn't want it to.
When I typed in js, automatic alignment was good, but when I typed in the script of the html file, the readability of the sentence was reduced Help me:(
do you installed any extension for sorting html files? if yes, then try to uninstall it.
I have change value in textarea to Decode. I want change from value Decode Html to text normal. How I do it?
$("#editor").kendoTextArea({
change: function (e) {
var value = this.value();
var decoded = $("textarea").html(value).text();
$("#9").text(decoded);
}
});
result example: < strong >sadsadasdas< /strong >.
I want: < strong >sadsadasdas< /strong > =to=> sadsadasdas (normal text)
Here's a kendoTextArea example for you in changing HTML to text. Try this in the DOJO. The HTML is changed into text after two seconds.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
<textarea id="description" style="width: 100%;"></textarea>
<script>
$(document).ready(function(){
var textArea = $("#description").kendoTextArea({
value: "<b>Bold text</b>",
rows:5,
change: function(e) {
var value = e.sender.value();
e.sender.value($(value).text());
},
}).data("kendoTextArea");
setTimeout(function() {
textArea.trigger("change");
}, 2000);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>The jQuery AJAX Example</title>
<script type = 'text/javascript'
src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script type = 'text/javascript' language = 'javascript'>
$.getJSON('https://api.flickr.com/services/feeds/photos_public.gne?tags=frenchay,uwe&tagmode=any&format=json&jsoncallback=?',
function(data){
$.each(data.items, function(i,item){
$('<img/>').attr('src', item.media.m).appendTo('#images');
if ( i == 10 ) return false;
});
});
</script>
</head>
<body>
<h3>Flickr (images tagged with uwe or frenchay)</h3>
<div id = 'images'>
</div>
</body>
</html>
Hello I am trying to run this code:
<!DOCTYPE html>
<html>
<head>
<title>The jQuery AJAX Example</title>
<script type = 'text/javascript'
src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script type = 'text/javascript' language = 'javascript'>
$.getJSON('https://api.flickr.com/services/feeds/photos_public.gne?tags=frenchay,uwe&tagmode=any&format=json&jsoncallback=?',
function(data){
$.each(data.items, function(i,item){
$('<img/>').attr('src', item.media.m).appendTo('#images');
if ( i == 10 ) return false;
});
});
</script>
</head>
<body>
<h3>Flickr (images tagged with uwe or frenchay)</h3>
<div id = 'images'>
</div>
</body>
</html>
If I try to run it on my own machine with xampp on my mac it will not show the photos it is like something about jquery is missing on my laptop.
The code runs in jsfiddle.
For future searches I've attached the solved result here, tightening up the spaces between = and "" fixed it for the original poster of the issue:
<!DOCTYPE html>
<html>
<head>
<title>The jQuery AJAX Example</title>
<script type='text/javascript'
src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script type='text/javascript' language='javascript'>
$.getJSON('https://api.flickr.com/services/feeds/photos_public.gne?tags=frenchay,uwe&tagmode=any&format=json&jsoncallback=?',
function(data){
$.each(data.items, function(i,item){
$('<img/>').attr('src', item.media.m).appendTo('#images');
if ( i == 10 ) return false;
});
});
</script>
</head>
<body>
<h3>Flickr (images tagged with uwe or frenchay)</h3>
<div id='images'>
</div>
</body>
</html>
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:
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.