how to use blur event in form using angular..? - javascript

I make a form using this link
I able to validate form on button click, but there is way to validate onBlur but I didn't understand how I will achieve this.
Here is my plunker
<!DOCTYPE html>
<html >
<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 rel="stylesheet" href="style.css" />
</head>
<body ng-app="test" ng-controller="FormController">
<form name="ngform"
sf-schema="schema"
sf-form="form"
sf-model="model" sf-options="{ formDefaults: { ngModelOptions: { updateOn: 'blur' } }}" ng-submit="onSubmit(ngform)"></form>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//dl.dropboxusercontent.com/s/icrciconaesuw29/tv4.js?m="></script>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="//code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script src="//dl.dropboxusercontent.com/s/unk0id7tmc9w0mm/angular-sanitize.js?m="></script>
<script src="//dl.dropboxusercontent.com/s/rk0dfetihiqs7bi/ObjectPath.js"></script>
<script src="//dl.dropboxusercontent.com/s/8fq4c4t7jct4w4h/schema-form.js?m="></script>
<script type="text/javascript" src="//textalk.github.io/angular-schema-form/dist/bootstrap-decorator.min.js"></script>
<script>
angular.module('test',['schemaForm']).controller('FormController', function($scope,$http){
$scope.schema = {
type: "object",
properties: {
name: { type: "string", minLength: 2, title: "Name", description: "Name or alias" ,required:true},
"email": {
"title": "Email",
"type": "string",
"pattern": "^\\S+#\\S+$",
validationMessage: {
"default": "Just write a proper address, will you?" //Special catch all error message
},
"description": "Email will be used for evil.",
required:true
},
title: {
type: "string",
required:true,
enum: ['dr','jr','sir','mrs','mr','NaN','dj']
}
}
};
$scope.form = [
"*",
{
type: "submit",
title: "Save"
}
];
$scope.model = {};
$scope.onSubmit = function(form) {
// First we broadcast an event so all fields validate themselves
$scope.$broadcast('schemaFormValidate');
// Then we check if the form is valid
if (form.$valid) {
// ... do whatever you need to do with your data.
}
}
})
</script>
</body>
</html>

The ngModelOptions feature has been introduced in angularjs v1.3.0-beta.6
You have to use v1.3.0-beta.6 or newer then your plunker will just work!
Example Plunker: http://plnkr.co/edit/ZCZAcvD2jiBUZhFEcTFA?p=preview

Related

In a kendo grid, can I set column attributes dynamically with a function?

I've got some code here where I am trying to set a background color of a cell based on the value of the data item: http://dojo.telerik.com/#solidus-flux/eHaMu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "name",
title: "Name",
attributes: function(e) {
return {
"class": "table-cell",
style: e.name == "Jane Doe" ? "background-color: red" : "background-color: green"
};
}
//attributes: {
//"class": "table-cell",
//style: "text-align: right; font-size: 14px"
//}
} ],
dataSource: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
</script>
</body>
</html>
I realize I could do this with a template, but that would require an extra html element, since you can't change the markup of the td itself. I'd like to use a function to return attributes if that is supported.
You said you don't want to use templates, but I think you were talking about column templates.
You can change the markup of the td itself by using a row template:
<script id="template" type="text/x-kendo-template">
<tr data-uid="#= uid #">
# this.columns.forEach(function(col) {
var val = data[col.field],
css,
style = ''
cClasses = '';
if (typeof col.attributes === 'function') {
css = col.attributes(data);
cClasses = css["class"];
style = css.style
}
#
<td class='#= cClasses #' style='#= style #'>
#= data[col.field] #
</td>
# }) #
</tr>
</script>
For the loop to work, you need to bind your template to the grid though:
var grid = $("#grid").kendoGrid({
columns: [{
field: "name",
title: "Name",
attributes: function (e) {
return {
"class": "table-cell",
style: e.name == "Jane Doe" ?
"background-color: red" : "background-color: green"
};
}
}, {
field: "title",
title: "Title"
}],
dataSource: [{name: "Jane Doe", title: "Dr. Dr."},
{name: "John Doe", title: "Senior Citizen"}]
}).data("kendoGrid");
var template = kendo.template($("#template").html()).bind(grid);
grid.setOptions({
rowTemplate: template
});
(demo)
As an alternative, you could also create attributes like this:
{
field: "name",
title: "Name",
attributes: {
"class": "# if(data.name === 'Jane Doe') { # red # } else { # green # } #"
}
},
This would have the advantage of not using the row template, but you'd have to use the template syntax for the logic.
(demo)
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<style>
.greenBG {
background-color:green;
}
.redBG {
background-color:red;
}
</style>
</head>
<body>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [{
field: "name",
title: "Name",
attributes: function (e) {
return {
"class": "table-cell",
style: e.name == "Jane Doe" ? "background-color: red" : "background-color: green"
};
}
}],
dataSource: [{ name: "Jane Doe" }, { name: "John Doe" }],
dataBound: function () {
dataView = this.dataSource.view();
for (var i = 0; i < dataView.length; i++) {
if (dataView[i].name === "Jane Doe") {
var uid = dataView[i].uid;
$("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("greenBG");
}
else {
var uid = dataView[i].uid;
$("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("redBG");
}
}
}
});
</script>
</body>
</html>
In angular kendo callback e not work
Use this
attributes: {
"ng-confirm-message": "{{this.dataItem.is_active ? \'Are you sure deactive ?\' : \'Are you sure active ?\'}}",
"confirmed-click": "vm.inlineSubmit(this.dataItem.toJSON() ,true)"
}
For Kendo-JQuery.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [{
field: "name",
headerAttributes: {
"class": "table-header-cell",
style: "text-align: right; font-size: 14px"
}
}]
});
</script>
And this Kendo-MVC
.Columns(columns =>
{
columns.Bound(c => c.ActiveReason).Title("ActiveReason").HeaderHtmlAttributes(new { #class = "table-header-cell" });
})
Some years later but ... the attributes function is not working at all for me, is not even hit, seems pretty but not working (Why is needed a manual class toggle if a functions is provided to do the work? something seems weird).
I make editable cells based on other fields values but also I needed to change the styles
1) Add the validation on field that you want to inject the css class,
//Your other fields configuration
field:"dependentField",
attributes:
{
"class": "# if(data.ImportantField!==true) { # nonEditableCellStyle # } else { # editableCellStyle # }# ",
}
//Your other fields configuration
2) Bind the grid change event and check if some important field has changes, if is the field that controls the style of other cells just call the refresh method
var _kendoGrid = $('#myGrid').data("kendoGrid");
_kendoGrid.dataSource.bind("change", function (e) {
if (e.action === "itemchange") {
if (e.field === "ImportantField") {
_kendoGrid.refresh();
}
}
});
The refresh method will render your grid again, that means your functions weather is a template or an attribute function ( and again, that does not work at all for me) will run and apply the correct sytles, or classes in this case.

how to generate form dynamically in angular js?

I am using this https://github.com/Textalk/angular-schema-form plugin to generate my form will not display .I study all documentation and add all js required i didn't get any error but it not display why ?
http://plnkr.co/edit/FO5iEs6ulmP3aR0PW4nt?p=preview
<!DOCTYPE html>
<html >
<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" />
<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/8fq4c4t7jct4w4h/schema-form.js?m="></script>
<script src="https://dl.dropboxusercontent.com/s/unk0id7tmc9w0mm/angular-sanitize.js?m="></script>
<script src="https://dl.dropboxusercontent.com/s/icrciconaesuw29/tv4.js?m="></script>
<script src="https://dl.dropboxusercontent.com/s/rk0dfetihiqs7bi/ObjectPath.js"></script>
</head>
<body>
<div ng-controller="FormController">
<form sf-schema="schema" sf-form="form" sf-model="model"></form>
</div>
<script>
function FormController($scope) {
$scope.schema = {
type: "object",
properties: {
name: { type: "string", minLength: 2, title: "Name", description: "Name or alias" },
title: {
type: "string",
enum: ['dr','jr','sir','mrs','mr','NaN','dj']
}
}
};
$scope.form = [
"*",
{
type: "submit",
title: "Save"
}
];
$scope.model = {};
}
</script>
</body>
</html>
The problem was the javascript plugins included were not in a proper order.
Also use angular.module() to initialize the controller.
JS:
angular.module('test',['schemaForm']).controller('FormController', function($scope,$http){
$scope.schema = {
type: "object",
properties: {
name: { type: "string", minLength: 2, title: "Name", description: "Name or alias" },
title: {
type: "string",
enum: ['dr','jr','sir','mrs','mr','NaN','dj']
}
}
};
$scope.form = [
"*",
{
type: "submit",
title: "Save"
}
];
$scope.model = {};
})
Demo

uncaught typeerror object object object has no method 'kendoUi' Error in Parsing

This is My JSonSctipt file code:
var data = [
{
"SearchResult": {
"assets": [
{
"agent": "6.1.0",
"id": 1,
"model": "Gateway1",
"modelId": 2,
"name": "Name",
"serialNumber": "Serial01"
},
{
"agent": "M2M",
"id": 2,
"model": "Gateway1",
"modelId": 3,
"name": "Name",
"serialNumber": "Serial02"
}
],
"searchCriteria": {
"paginationEnabled": false,
"rowsPerPage": -1,
"startRow": -1,
"totalAvailableRows": -1,
"alternateId": {
"#xsi.nil": "true"
},
"modelNumber": {
"#xsi.nil": "true"
},
"name": "*",
"serialNumber": {
"#xsi.nil": "true"
}
}
}
}
];
$("#grid").kendoGrid({
dataSource: {
data: data,
schema: {
data: function(rawData) {
return rawData[0].SearchResult.assets;
}
}
}
});
Thsi is My Index.html file
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="scripts/hello-world.js"></script>
<script src="kendo/js/kendo.dataviz.min.js"></script>
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
</head>
<body>
<div id="grid"></div>
</body>
</html>
when i run this code uncaught typeerror object object object has no method 'kendoUi' Error I m getting so am Unable to Display data In Grid please tell me how i will fix it or can any one Please tell me how i will Json parsing In Kendo UI
It looks like you are trying to use Kendo Grid, which is a part of Kendo Web, but only have a reference to Kendo Mobile (i.e. kendo.mobile.min.js). You need to add a script reference to either kendo.web.min.js or kendo.all.min.js. Take a look at this jsfiddle, paying particular attention to the External Resource (i.e. kendo.all.min.js)
P.S. SO won't let me post a link to jsfiddle without some code, so here is part of the code again, to satisfy their requirements:
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<bo
<div id="grid"></div>
</body>

jQuery Fancy Tree with Local Array Data

I am trying to implement jQuery FancyTree http://wwwendt.de/tech/fancytree/demo/ with local array data
Referred from https://code.google.com/p/fancytree/
This is the code. But it is not working, No Script Error.But Tree is empty!!!
Even i copied the jQuery, UI versions of the file they using in a demo
site. Still nothing works
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.custom.js" type="text/javascript"></script>
<link href="ui.fancytree.css" rel="stylesheet" type="text/css" />
<script src="jquery.fancytree.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#tree").fancytree({
onActivate: function (node) {
// A DynaTreeNode object is passed to the activation handler
// Note: we also get this event, if persistence is on, and the
// age is reloaded.
alert("You activated " + node.data.title);
},
children: [ // Pass an array of nodes.
{title: "Item 1" },
{ title: "Folder 2", isFolder: true,
children: [
{ title: "Sub-item 2.1" },
{ title: "Sub-item 2.2" }
]
},
{ title: "Item 3" }
]
});
});
</script>
</head>
<body>
<div id="tree">
</div>
</body>
</html>
I have noticed that source:[] is how you initializes the tree in $("#tabTree").fancytree() initialization call, so your example would be:
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.custom.js" type="text/javascript"></script>
<link href="ui.fancytree.css" rel="stylesheet" type="text/css" />
<script src="jquery.fancytree.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#tree").fancytree({
onActivate: function (node) {
// A DynaTreeNode object is passed to the activation handler
// Note: we also get this event, if persistence is on, and the
// age is reloaded.
alert("You activated " + node.data.title);
},
source: [ // Pass an array of nodes.
{title: "Item 1" },
{ title: "Folder 2", isFolder: true,
children: [
{ title: "Sub-item 2.1" },
{ title: "Sub-item 2.2" }
]
},
{ title: "Item 3" }
]
});
});
</script>
</head>
<body>
<div id="tree">
</div>
</body>
</html>
btw, in case you noticed it, the documentation is quite messy, as they are refactoring the code, the documentation is half what's left from dynatree and the new conventions of fancytree. So expect more weird stuff like that :-)
are the Scriptpath right?
Do you download "jquery.js, jquery-ui.custom.js, ui.fancytree.css and jquery.fancytree.js" ?

jQuery Autocomplete > Select > Link

I have this code implemented and I like how straight forward it is because I plan to add ALOT to the Source -- however for the life of me I cannot figure out how to add the selected one as a Link.
EG > Begin Typing > Autofill works > Select > Go to that URL
Current Code:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("input#autocomplete").autocomplete({
source: ["NYC", "LA", "Philly", "Chitown", "DC", "SF", "Peru"]
});
});
</script>
</head>
<body style="font-size:62.5%;">
<input id="autocomplete" />
</body>
</html>
I found a few discussions about this on here, but none of the code suggestions had worked. How do I add a URL associated with the values above; I'd love if I could keep the same syntax and near the values just add; EG: "peru" www.peru.com
You could add a url property to each object in the source array and then set window.location to that URL when the user selects an item:
$(document).ready(function() {
$("input#autocomplete").autocomplete({
source: [
{ value: "NYC", url: 'http://www.nyc.com' },
{ value: "LA", url: 'http://www.la.com' },
{ value: "Philly", url: 'http://www.philly.com' },
{ value: "Chitown", url: 'http://www.chitown.com' },
{ value: "DC", url: 'http://www.washingtondc.com' },
{ value: "SF", url: 'http://www.sanfran.com' },
{ value: "Peru", url: 'http://www.peru.com' }
],
select: function (event, ui) {
window.location = ui.item.url;
}
});
});

Categories