This is my EXTJS code:
Ext.onReady(function(){
var treeLoader=new Ext.tree.TreeLoader({
dataUrl:'json.php'
});
var rootNode=new Ext.tree.AsyncTreeNode({
text:'Root'
});
var tree=new Ext.tree.TreePanel({
renderTo:'treecontainer',
loader:treeLoader,
root:rootNode
});
});
HTML code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tree Formation </title>
<link rel=stylesheet" type="text/css" href="ext-all.css" />
<script src="ext-base.js"> </script>
<script src="ext-all.js"> </script>
</head>
<body>
<script src="tree.js"> </script>
<title id="title">Tree Formed</title>
</body>
<div id="treecontainer" style="height:300px;width:200px;">
</div>
<html>
Json.php:
[
{id:'1',text:'No Children',leaf:true},
{id:'2'.text:'Has Children',
children:[{
id:'3',
text:'Youngster',
leaf:true
}]
}
After executing the above code,it's displaying with only 'Root' as done,rest not displaying.When i click on that 'Root' Error encountered as "ACCESS IS DENIED" at LINE 7,CHAR 20287 in ext-base.js.Can u tell me what it's ....?
]
Looks like you don't have the correct path to your Json.php file, or you don't have read access.
Related
I am new to Angular JS, when I tried to get and print out some JSON data using $scope variable, but double curly braces just don't work as i thought it would do.
HTML:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-08">
<meta name="author" content="YYQ">
<meta name="description" content="YYQAngularJS">
<title>YYQAngularJS</title>
<script src="Script/angular.js" type="javascript"></script>
</head>
<body ng-controller="myController">
<div> haha {{ p.name }} </div>
<script src="Script/jquery-3.1.1.js" type="javascript"></script>
<script src="Script/index.js" type="javascript"></script>
</body>
</html>
JS:
$(window).on("load",function () {
var $myApp = angular.module('myApp',[]);
$myApp.controller('myController',function ($scope) {
$scope.p =
{
"name":"a",
"id":"1"
}
});
});
result:
haha {{ p.name }}
Update:
HTML file:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-08">
<meta name="author" content="YYQ">
<meta name="description" content="YYQAngularJS">
<title>YYQAngularJS</title>
<script src="Script/angular.js" type="javascript"></script>
</head>
<body ng-controller="myController">
<div> haha {{ p.name }} </div>
<script src="Script/jquery-3.1.1.js" type="javascript"></script>
<script src="Script/index.js" type="javascript"></script>
</body>
</html>
JS file:
var $myApp = angular.module('myApp',[]);
$myApp.controller('myController',function ($scope) {
$scope.p =
{
"name":"a",
"id":"1"
}
});
And now i got this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Remove $(window).on("load",function () {
Change type="javascript" to type="text/javascript" in all <script></script> tags
Angularjs will load it before DOM is loaded
Here is the working code
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-08" />
<meta name="author" content="YYQ" />
<meta name="description" content="YYQAngularJS" />
<title>YYQAngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body ng-controller="myController">
<div> haha {{ p.name }} </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var $myApp = angular.module('myApp', []);
$myApp.controller('myController', function($scope) {
$scope.p = {
"name": "a",
"id": "1"
}
});
</script>
</body>
</html>
$(window).on('load', () => {}) is causing conflict with your angular app.
var $myApp = angular.module('myApp', []);
$myApp.controller('myController', function($scope){
$scope.p = {
"id": 1,
"name": "Angular App working"
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-08">
<meta name="author" content="YYQ">
<meta name="description" content="YYQAngularJS">
<title>YYQAngularJS</title>
<script src="Script/angular.js" type="javascript"></script>
</head>
<body ng-controller="myController">
<div> haha {{ p.name }} </div>
<script src="Script/jquery-3.1.1.js" type="javascript"></script>
<script src="Script/index.js" type="javascript"></script>
</body>
</html>
I'm having some problems when I tried to open a calendar using jquery ui thru NgRoute Angularjs. I've tried removing ng-view tag and it works fine. i need it working with NgRoute.
index.html
<!DOCTYPE html>
<html ng-app="mainApp">
<head lang="en">
<title>AngularJS Routing</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<li> Date Picker </li>
<div ng-app="mainApp">
<ng-view></ng-view>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.jsp
(function() {
"use strict";
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(function($routeProvider) {
$routeProvider
.when('/datePicker', {
templateUrl: 'DatePicker.html',
controller: 'DemoCtrl'
})
.otherwise({
redirectTo: '/index'
});
});
mainApp.controller('DemoCtrl', ['$scope', '$http', function ($scope, $http) {
//$('#datepicker1').datepicker();
}]);
})();
DatePicker.html
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="main.js"></script>
<script>
$(function() {
$( "#datepicker1" ).datepicker();
});
</script>
</head>
<body>
<form>
<p>Fecha: <input id="datepicker1" type="text" ></p>
Main menu
</form>
</body>
</html>
http://plnkr.co/edit/Wk4zZo0WfoypMmaMgv4j
I will appreciate any help on this issue.
Thank you so much,
Ariel.
in DatePicker.html you dont need all tags again only the ones that will go inside ng-view:
<script>
$(function() {
$( "#datepicker1" ).datepicker();
});
</script>
<form>
<p>Fecha: <input id="datepicker1" type="text" ></p>
Main menu
</form>
And this will go inside index.html:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="main.js"></script>
I dont know if it will sove your problem, but it is the correct thing to do...
Im trying to get info from this API :
In my main.js file I have this controller which is requesting an http request:
(function(){
var app = angular.module('provider',['provider-movies']);
app.controller('ProviderController',['$http',function($http){
var provider = this;
provider.movies =[];
$http.get('/http://private-5d90c-kevinhiller.apiary-mock.com/angular_challenge/horror_movies').succes(function(data){
provider.movies = data;
});
}]);
})();
Then in my html I'm trying to print the title of the movie like this:
<div ng-controller="ProviderController as provider">
<p>{{provider.movies.title}}</p>
</div>
But when i load the file on the browser it just shows this:
{{provider.movies.title}}
Angular is installed and working, if I add {{'hello '+'you'}} it prints **hello you**
Any ideas on why is this not working ?
Also , my html looks like this:
<!doctype html>
<html ng-app="provider">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="bower_components/foundation/css/foundation.css">
<script src="bower_components/angular/angular.min.js"></script>
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<div ng-controller="ProviderController as provider">
<p>{{provider.movies.title}}</p>
<p>{{'hello'}}</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>
thanks!
You seem to have some typo and a missing closing parenthesis. If you looked at the console of your webbrowser you should definitely seen this.
Try this:
(function() {
var app = angular.module('provider', []);
app.controller('ProviderController', [ '$http', function($http) {
var provider = this;
provider.movies = [];
$http.get('http://private-5d90c-kevinhiller.apiary-mock.com/angular_challenge/horror_movies').success(function(data) {
provider.movies = data;
});
}]);
})();
Also in your markup the provider.movies is an array which doesn't contain a title property:
<div ng-controller="ProviderController as provider">
<p>{{provider.movies}}</p>
</div>
If you wanted to have the title you may consider looping through them:
<p ng-repeat="movie in provider.movies">
{{movie.title}}
</p>
And here's the working plunkr.
I want to write a simple sample in extjs5 and use Draw Package.
according to sencha doc my code is:
1.index.html
<head>
<script type="text/javascript">
var contextPath = '<%=context%>';
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<%--extJS--%>
<link rel="stylesheet" type="text/css" href="<%= context%>/js/ext5/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"/>
<script type="text/javascript" src="<%= context%>/js/ext5/build/ext-all.js"></script>
<script type="text/javascript" src="<%=context%>/js/extjspages/app.js"></script>
2.app.js
Ext.require("Ext.draw.Container");
Ext.application({
name: 'MyApp',
launch: function () {
Ext.create('Ext.draw.Container', {
sprites: [{
type: 'circle',
fillStyle: 'red',
r: 100,
cx: 100,
cy: 100
}],
height:205,
width:205,
renderTo:Ext.getBody()
});
}
});
but I catch an
GET .../Ext/draw/Container.js?_dc=1403991476236 404 (Not Found) error
what is my wrong?
thank you
I don't know how to use sencha cmd. But you can add "sencha-charts" in index.html code using:
<script type="text/javascript" src="<%= context%>/js/ext5/build/packages/sencha-charts/build/sencha-charts-debug.js"></script>
I'm trying some backbone.js examples and can't get change triggers to work. The "Welcome to this world" alert shows up as expected, but "Changed my name to" is never shown. Debugging the code with firefox reveils the same result, a breakpoint on the second alert is never hit.
Any ideas what's wrong?
This is my code:
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello-backbonejs</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script src="model.js" type="text/javascript"></script>
</body>
</html>
model.js
Person = Backbone.Model.extend({
defaults: {
name: 'Fetus',
age: 0
},
initialize: function(){
alert("Welcome to this world");
this.on("change:name", function(model){
var name = model.get("name"); // 'Stewie Griffin'
alert("Changed my name to " + name );
});
}
});
var person = new Person({ name: "Thomas", age: 67});
person.set({name: 'Stewie Griffin'}); // This triggers a change and will alert()
To get the correct version of the js libraries I had to change main.html into this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello-backbonejs</title>
</head>
<body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="model.js" type="text/javascript"></script>
</body>
</html>