Using Semantic-ui.
Have a form that uses Semantic built in form validation.
On form submit I want to call a dimmer.
Is there a way to trigger the dimmer after the form passes validation.
As it is now I have the dimmer connected to a onclick="dimmer()" on the submit button.
This means that the dimmer triggers even if the form is not submitting because of failed validation.
onSuccess: function(event, fields) {
dim();
}
example
$(document)
.ready(function() {
$('.ui.form')
.form({
fields: {
trailer: {
identifier : 'trailer',
rules: [
{
type : 'empty',
prompt : 'Please select a Trailer'
}
]
},
movie: {
identifier : 'movie',
rules: [
{
type : 'empty',
prompt : 'Please select a Movie'
}
]
}
},
onSuccess: function(event, fields) {
dim();
}
})
;
})
;
Related
The problem is that submit doesn't validate other tabs. If I remove hidden from excluded list it validates but the problem it also then validates hidden input boxes.
How can i get it to validate all tabs but not validate hidden fields inside the tabs? How to fix this?
Here is some of the code from the validation section-.
jQuery('#form').bootstrapValidator({
container: '#messages',
excluded: [':disabled'],
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
Name: {
validators: {
notEmpty: {
message: 'Name is required.'
}
}
},
EmployerName: {
validators: {
notEmpty: {
message: 'Employer Name required.'
}
},
JobTitle: {
validators: {
notEmpty: {
message: 'JobTitle required.'
}
}...
Name field is on the active tab
EmployerName & Job Title are in seperate tab to Name.
Job Title is in a Div that is hidden.
When code runs Job Title is validated as well as Employer Name. Job Title shouldnt be as its hidden. If i include hidden in the excluded list, EmployerName doesnt validate anymore. I hope this is a little clearer.
I'm using autoform and simple schema and I've defined a schema object with the following field:
confirm_nominee: {
type: Boolean,
autoform: {
type: "select-checkbox-inline",
options: function () {
return [
{
label: "Check here to certify that the volunteer nominated in the application is not a current member of the organization’s Board of Directors.",
value: 1
}
];
}
}
},
I just want it so if the box is left unchecked, the error reports "This field is required" and if it's checked, then the user is good to go.
This seems like it should be a really simple validation of whether the checkbox is checked or not. I've tried adding in a defaultValue of 0, but that doesn't work either.
Any thoughts?
Thanks so much.
Set in your schema rules the key allowedValues: [true] and the checkbox must be checked to be true and pass validation
confirm_nominee: {
type: Boolean,
autoform: {
type: "select-checkbox-inline",
allowedValues: [true],
options: function () {
return [
{
label: "Check here to certify that the volunteer nominated in the application is not a current member of the organization’s Board of Directors.",
value: 1
}
];
}
}
We are using a server based simple grid. The grid reads and updates data for a remote data source. It has two columns that are using drop down editors. Everything seems to work fine except that after saving, when editor closes, the changed values are not displayed in the edited row. It still shows the old value. When we try to refresh the grid using the sync event, it changes the order of the rows however, it does update the values on refresh.
It seems like the template function is not executed after the update is completed. How to edit the grid / code to ensure that the changed value is reflected in the grid?
Grid Definition code:
$("#servicetype-grid").kendoGrid({
pageable: true,
toolbar: [{name: "create", text: ""}, { template: kendo.template($("#servicetype-search-template").html())}],
columns: [
{
field: "serviceName", title: "Service Name"
},
{
field: "billCalculationTypeId",
editor: calculationTypeDropDownEditor,
template: function(dataItem) {
return kendo.htmlEncode(dataItem.billCalculationTypeName);
},
title: "Bill Calculation Type"
},
{
field: "payCalculationTypeId",
editor: calculationTypeDropDownEditor,
template: function(dataItem) {
return kendo.htmlEncode(dataItem.payCalculationTypeName);
},
title: "Pay Calculation Type"
},
{
command: [
{ name: "edit", text: { edit: "", cancel: "", update: "" }},
{ name: "destroy", text:""}
],
title: "Actions"
}
],
dataSource: dataSource,
sortable: {
mode: "single",
allowUnsort: false
},
dataBound: function(e) {
setToolTip();
},
edit: function(e) {
$('.k-grid-update').kendoTooltip({content: "Update"});
$('.k-grid-cancel').kendoTooltip({content: "Cancel"});
},
cancel: function(e) {
setToolTip();
},
editable: {
mode: "inline",
confirmation: "Are you sure that you want to delete this record?"
}
});
Drop down function is defined as:
function calculationTypeDropDownEditor(container, options) {
$('<input required data-text-field="name" data-value-field="id" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: baseURL + "rips/services/calculationType/lookupList"
}
}
}
});
}
After doing some search on Google and browsing through different examples on Kendo site, I finally was able to resolve this issue. Following is my understanding of the problem and solution:
When we are using drop down box or combo box as a custom editor, generally we have a different datasource that contains a list options with an id and a value to show. I defined the template as "#=field.property#" of the field that I was looking up. In my case it was calculation type. Following is my model:
model: {
id: "serviceId",
fields: {
serviceName: { field:"serviceName", type: "string", validation: { required: { message: "Service Name is required"}} },
billCalculationType: { field: "billCalculationType", validation: { required: true}},
payCalculationType: { field: "payCalculationType", validation: { required: true} }
}
In above, billCalculationType and payCalculationType are supposed to be drop down list values displaying the calculation type name but storing the id of the corresponding calculation type. So, in my grid definition, I added following:
{ field: "billCalculationType",
editor: calculationTypeDropDownEditor,
template:"#=billCalculationType.name#",
title: "Bill Calculation Type" },
Where calculation dropdown editor is a function that builds a drop down from external data source. So, it works fine. However, for the template definition to work in (field.property) format, the server must return the value as a class for this field and not a simple text. So, in my server service, I returned in following format:
{"billCalculationType":{"id":"4028828542b66b3a0142b66b3b780001","name":"Hourly","requiredDetails":false},"payCalculationType":{"id":"4028828542b66b3a0142b66b3b960002","name":"Kilometers","requiredDetails":false},"serviceId":"4028828542b66b3a0142b66b3c16000a","serviceName":"XYZ"}
Notice that the billCalculationType and payCalculationType are returned as objects with name and id as properties. This allows the template to work properly.
Hope this helps.
I have a button inside a view and I have set a action property of it so that I can listen to its tap event in controller as follows
view code
{
xtype:'button',
text:'SKIP',
action:'skip'
}
controller code
onSkipContact:function(){
console.log('tap');
}
now what I want to pass the parameter to onSkipContact action something like as follows
{
xtype:'button',
text:'SKIP',
action:'skip(data.index)' //i want to pass the index of record to the controller
}
so that I can read in controller as follows
onSkipContact:function(index){
console.log('tap' + index );
}
panel containing cv
Ext.define('ca.view.ContactInfoPanel',{
extend:'Ext.Panel',
xtype:'contactinfopanel',
requires: [ 'ca.view.ContactInfo','ca.view.ContactVote'],
config:{
layout:'vbox',
defaults: {
margin: '10 10 10 10'
} ,
items:[{
xtype:'contactinfo'
},{
xtype:'contactvote', // its a CV
}]
},
initialize:function(){
this.callParent();
}
});
here is the contactvote i.e. cv
Ext.define("ca.view.ContactVote",{
extend:'Ext.Container',
xtype:'contactvote',
requires:['Ext.Button'],
config:{
bottom:0,
width: '100%',
defaults: {
margin: '10 20 0 0'
} ,
items:[{
xtype:'button',
text:'SKIP',
action:'skip',
id:'skipbtn'
}]
},
initialize:function(){
console.log(this.data);
this.callParent();
}
});
First, store the data you want to pass to the handler method in the button itself. For example:
{
xtype: 'button',
text: 'SKIP',
action: 'skip',
// Give it the name you want, just ensure it won't
// overlap a property defined by Ext.
dataIndex: data.index
}
Ext event listeners are always passed the event source (in your case the button) as their first argument. So in your handler, you can access your data this way:
onSkipContact: function(button) {
var index = button.index;
console.log('tap' + index);
}
Try this, Set the index in button configuration
{
xtype:'button',
text:'SKIP',
action:'skip',
index : data.index
}
In controller action
onSkipContact:function(button){
// You can get index config like this
console.log('tap' + button.index );
}
I assumed that your have something like following configuration in controller
refs: {
skipBtn : 'button[action=skip]'
},
control: {
skipBtn : {
tap: 'onSkipContact'
}
}
Update
Try
this.getCv().down('button[action=skip]').index = record.data.index;
instead of
this.getCV().setData(record.data)
your button code remain
{
xtype:'button',
text:'SKIP',
action:'skip'
}
I have a grid where user and add new rows as many as they want. After adding all the rows, they click the "Save" button. On Save button click, I want to send all the data entered by the user in JSON format to the server side code (i.e. a servlet in my case)
Below is the model and store definition:
Ext.define('Plant', {
extend: 'Ext.data.Model',
fields: [
// the 'name' below matches the tag name to read, except 'availDate'
// which is mapped to the tag 'availability'
{name: 'common', type: 'string'},
{name: 'botanical', type: 'string'},
{name: 'light'},
{name: 'price', type: 'float'},
// dates can be automatically converted by specifying dateFormat
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
{name: 'indoor', type: 'bool'}
]
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Plant'
});
On click of the save button, I am able to get the store like this:
{
text: 'Save',
handler : function(){
//Getting the store
var records = grid.getStore();
console.log(records.getCount());
Ext.Ajax.request({
url: '/CellEditing/CellEditingGridServlet',
method: 'POST',
jsonData: {
//How to assign the store here such that
//it is send in a JSON format to the server?
},
callback: function (options, success, response) {
}
});
}
But I don't know like how to convert the store content into JSON and send it in the jsonData of the ajax request.
I want the JSON data something like this in the server side:
{"plantDetails":
[
{
"common": Plant1,
"light": 'shady',
"price": 25.00,
"availDate": '05/05/2013',
"indoor": 'Yes'
},
{
"common": Plant2,
"light": 'most shady',
"price": 15.00,
"availDate": '12/09/2012',
"indoor": 'No'
},
]
}
Please let me know how to achieve this.
Regards,
Agreed with Neil, the right way to do this is through an editable store outfited with a proxy and a writer. See example here: http://docs.sencha.com/ext-js/4-1/#!/example/grid/cell-editing.html
Store
writer :
{
type : 'json',
allowSingle : true
}
Experiment with allowSingle as per your use case
In your controller
//if you want to set extra params
yourStore.getProxy().setExtraParam("anyParam",anyValue);
// sync the store
yourStore.sync({success : function() {
yourGrid.setLoading(false);
.. },
scope : this // within the scope of the controller
});
You should be creating the model with a new id ( you can ignore it at the server side and use your own key generation , but it lets extjs4 for its internal purposes know that a new record has been created).
creating a model instance
var r = Ext.create('yourModel', { id: idGen++, propA : valA , ... });
insert to grid
store.insert(0,r);
var editPlugin = grid.getPlugin(editPluginId);
editPlugin.startEdit(0,1);
Once you receive a response back the id's can be update to their true value.
in the Store
reader :
{
type : 'json',
root : 'yourdata',
successProperty : 'success',
idProperty : 'id'
}
If you were to use the same grid for handling and editing then you could use the write event or the appropriate event
for more advanced handling in the Store
listeners :
{
write : function(store,operation, eOpts)
{
var insertedData = Ext.decode(operation.response.responseText);
.. do something
}
}
I would recommend using the mvc architecture of Extjs4
This is what I tried and it seems to work:
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Plant',
proxy: {
type: 'ajax',
url: '/CellEditing/CellEditingGridServlet',
writer: {
type: 'json',
root: 'plantDetails'
}
}
handler : function(){
grid.getStore().sync();
But I am getting an additional parameter in the JSON at the server side:
"id": null
I don't have this id set in my model then where is this coming from? Is there some way to set some values to it rather than having a default null value?