Related
I am using JsonForm library ( https://github.com/jsonform/jsonform ) to describe a form in html and I have defined the schema and form of the JsonForm structure, but "onSubmit" function that enables the send button does not work. The button does not appear.
My code in javascript is the following (data.js) :
$('#myForm').jsonForm({
schema: {
Min: {
type: 'integer',
title: 'Minimo(%):',
minimum: 0,
maximum: 100,
},
Max: {
type: 'number',
title: 'Máximo (%):',
minimum: 0,
maximum: 100,
}
},
form: [
{
key:'Min',
type:'number',
htmlClass: 'col-md-2'
}
],
onSubmit: function (errors, values){
if (errors) {
alert(errors);
}
else {
document.getElementById("selectedComponents").innerHTML = "it works";
}
}
});
My html is defined as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>web</title>
<link rel="stylesheet" style="text/css" href="css/bootstrapCss/bootstrap.css" />
<link rel="stylesheet" style="text/css" href="css/newCss.css" />
</head>
<body onLoad="createInitOptions()">
<br>
<div class="row">
<div class="col-md-3 text-center" id="selectedComponents">
</div>
<div class="row">
<div class="col-md-5 text-center">
</div>
<div class="col-md-4" id="component">
<div class="form-group">
<form id="myForm"></form>
<div id="res" class="alert">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/underscore.js"></script>
<script type="text/javascript" src="js/jsv.js"></script>
<script type="text/javascript" src="js/jsonform.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</body>
</html>
What could be the reason?
You need to put a definition for the submit or "*" in the "form" section, and move the "onSubmit" outside to the root.
{
"schema": {
"email": {
"type": "string",
"title": "Email",
"required": true,
"maxLength": 128
},
"password": {
"type": "string",
"title": "Password",
"required": true,
"maxLength": 128
},
"remember": {
"type": "boolean",
"default": true
}
},
"form": [
{
"key": "email",
"type": "email"
},
{
"key": "password",
"type": "password"
},
{
"key": "remember",
"inlinetitle": " Remember me",
"notitle": true
},
{
"type": "submit",
"title": "Login"
}
],
"onSubmit": (errors, values) => {
console.info(errors, values);
}
}
I use that to my advantange, storing the form setup in a json file (without the "onSubmit") and then adding the onSubmit via javascript.
var schema = await $.get("/parts/model.login.json");
schema.onSubmit = (errors, values) => {
LoginResults = values;
LoginNext = true;
};
I am using kendo UI grid with angular and I want to bind grid using json file (model.json) stored in the root directory as the index.html (I am using visual studio 2013 and web empty project template). My javascript controller is stored in Scripts/app/ directory.
This is my json file:
{
"model": [
{
"RowNumber": "1",
"AccountNo": "10236",
"PostingDate": "20.01.2015",
"AmountDebit": "1800.0",
"AmountCredit": "1500.0",
"Balance": "300.0",
"Description": "Neki Opis"
},
{
"RowNumber": "2",
"AccountNo": "10648",
"PostingDate": "26.01.2015",
"AmountDebit": "3000.0",
"AmountCredit": "1700.0",
"Balance": "1300.0",
"Description": "skafiskafnjak"
},
{
"RowNumber": "3",
"AccountNo": "10700",
"PostingDate": "22.01.2015",
"AmountDebit": "2900.0",
"AmountCredit": "1800.0",
"Balance": "1100.0",
"Description": "knjizenje"
},
{
"RowNumber": "4",
"AccountNo": "10810",
"PostingDate": "24.01.2015",
"AmountDebit": "3800.0",
"AmountCredit": "1400.0",
"Balance": "2400.0",
"Description": "hlabuka"
},
{
"RowNumber": "5",
"AccountNo": "10101",
"PostingDate": "29.01.2015",
"AmountDebit": "3800.0",
"AmountCredit": "1500.0",
"Balance": "2300.0",
"Description": "Neki Opis"
},
{
"RowNumber": "6",
"AccountNo": "10364",
"PostingDate": "25.01.2015",
"AmountDebit": "4300.0",
"AmountCredit": "1800.0",
"Balance": "2500.0",
"Description": "TestNova"
}
]
}
This is my controller:
(function () {
'use strict';
angular.module("app", ["kendo.directives"]).controller("generalledgerController", function ($scope, $http) {
$scope.gridMaster = {
dataSource: {
dataType: "json",
transport: {
read: "model.json"
},
schema: {
data: "model"
}
},
selectable: true,
sortable: true,
pageable: {
refresh: true,
pageSize: true,
buttonCount: 5
},
columns: [
{ field: "RowNumber", title: "R. Br.", width: "50px", template: '<div style="text-align:center;">#= kendo.toString(RowNumber) #</div>' },
{ field: "AccountNo", title: " Br. Knjiženja", width: "77px", template: '<div style="text-align:left;">#= kendo.toString(AccountNo) #</div>' },
{ field: "PostingDate", title: "Datum", width: "70px" },
{ field: "Description", title: "Opis", width: "170px" },
{ field: "AmountCredit", title: "Duguje", width: "80px", template: '<div style="text-align:right;">#= kendo.toString(AmountCredit, "n2") #</div>' },
{ field: "AmountDebit", title: "Potražuje", width: "80px", template: '<div style="text-align:right;">#= kendo.toString(AmountDebit, "n2") #</div>' },
{ field: "Balance", title: "Saldo", width: "80px", template: '<div style="text-align:right;">#= kendo.toString(Balance, "n2") #</div>' }
],
toolbar: ["create"]
};
});
})();
This is my html page:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<link rel="stylesheet" type="text/css" media="all" href="content/bootstrap.css">
<link rel="stylesheet" type="text/css" media="all" href="content/metisMenu.css">
<link rel="stylesheet" type="text/css" media="all" href="content/bootstrap-theme.css.map">
<link rel="stylesheet" type="text/css" media="all" href="content/Site.css">
<link rel="stylesheet" type="text/css" media="all" href="content/kendo/2015.3.1111/kendo.common.min.css">
<link rel="stylesheet" type="text/css" media="all" href="content/kendo/2015.3.1111/kendo.mobile.all.min.css">
<link rel="stylesheet" type="text/css" media="all" href="content/kendo/2015.3.1111/kendo.dataviz.min.css">
<link rel="stylesheet" type="text/css" media="all" href="content/kendo/2015.3.1111/kendo.dataviz.default.min.css">
<link rel="stylesheet" type="text/css" media="all" href="content/kendo/2015.3.1111/kendo.metro.min.css">
<link href="content/generalledger.css" rel="stylesheet" />
<script src="scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="scripts/bootstrap.js"></script>
<script src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/kendo/2015.3.1111/kendo.all.min.js"></script>
<script src="scripts/kendo/2015.3.1111/kendo.web.min.js"></script>
<script type="text/javascript" src="scripts/app/generalledgercontroller.js"></script>
<title>App</title>
</head>
<body ng-app="app" ng-controller="generalledgerController">
<div id="wrapper" class="active">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="col-lg-2">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h3 class="navbar-brand" style="font-family: 'Lato', calibri;width: 100%;margin: 0;left: 3%;color: grey;font-size: 24px;font-weight: 400">Logo</h3>
</div>
</div>
<div class="collapse navbar-collapse" style="padding-right: 20px">
<ul class=" nav navbar-nav" style="padding-left:20px"></ul>
</div>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu"></ul>
</div>
</div>
</nav>
</div>
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div>
<div class="divH3Style">
<h3 class="h3LabelForm">General Ledger</h3>
</div>
<div id="tabstrip" class="k-tabstrip-wrapper" kendo-tab-strip="tabStrip">
<ul>
<li>Overview</li>
<li>Update</li>
</ul>
<div id="tabstrip-1">
<div kendo-grid k-options="gridMaster" >
</div>
</div>
<div id="tabstrip-2">
<!-- fields for input/update data -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The grid doesn't load any data, all I see are the headers.
I watched all the relevant links to this problem:
Simple Json connection not working, Binding a kendo ui grid to a json file without generating the grid in code, http://www.telerik.com/forums/simple-json-databinding...
Any help would be appreciated.
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.
In the code below Hard coded div works fine. But trying to render s using angularJS, which is not working
<!doctype html>
<html ng-app>
<head>
<title> AngularJS Tabs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.box {
margin : 5px;
display : inline-block;
width: 150px;
height: 250px;
background-color: grey;
text-align:center;
vertical-align: top;
}
</style>
</head>
<body>
<!-- Testing hard coded div works -->
<div class='box'>
<b>fdhfg</b>
</div>
<!-- div through loops not works -->
<div ng-app="myApp" ng-controller="myCtrl">
<div class='box' ng-repeat="product in Products">
<b>fdhfg</b>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Products = [
{
"ProductID": "12",
"ProductName": "GreenDetergentBar",
"ProductImagePath": "/images/12.png",
"SubCategoryID": "1",
"SubCategoryName": "DetergentBar",
"BrandID": "1",
"BrandName": "Wheel",
"Variants": [
{
"VariantID": "1",
"VariantName": "500GM",
"VariantImagePath": "/images/12_1.png",
"MRP": "20.00",
"SellPrice": "19.50"
},
{
"VariantID": "2",
"VariantName": "1KG",
"VariantImagePath": "/images/12_2.png",
"MRP": "40.00",
"SellPrice": "38.00"
}
]
},
{
"ProductID": "13",
"ProductName": "AmlaHairOil",
"ProductImagePath": "/images/13.png",
"SubCategoryID": "2",
"SubCategoryName": "HairOil",
"BrandID": "2",
"BrandName": "Dabur",
"Variants": [
{
"VariantID": "3",
"VariantName": "100ML",
"VariantImagePath": "/images/13_3.png",
"MRP": "30.00",
"SellPrice": "29.50"
},
{
"VariantID": "4",
"VariantName": "200ML",
"VariantImagePath": "/images/13_4.png",
"MRP": "60.00",
"SellPrice": "58.00"
}
]
}
];
alert ($scope.Products);
});
</script>
</body>
</html>
Can someone help me to fix the problem?
You've missed to define the app name in ng-app.
But in your js you have mentioned:
var app = angular.module('myApp', []);
So correct in your HTML:
ng-app="myApp"
Oops, you have defined ng-app twice. That's why its not working properly. Only one ng-app must be there.
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