jsfiddle throws an error while validating the form - jsfiddle

My form isn´t validated I don´t know why. I tried js fiddle and now there is an error:
{"error": "Shell form does not validate{'html_initial_name': u'initial-js_lib', 'form': <mooshell.forms.ShellForm object at 0xa9dfd8c>, 'html_name': 'js_lib', 'html_initial_id': u'initial-id_js_lib', 'label': u'Js lib', 'field': <django.forms.models.ModelChoiceField object at 0xa77d52c>, 'help_text': '', 'name': 'js_lib'}{'html_initial_name': u'initial-js_wrap', 'form': <mooshell.forms.ShellForm object at 0xa9dfd8c>, 'html_name': 'js_wrap', 'html_initial_id': u'initial-id_js_wrap', 'label': u'Js wrap', 'field': <django.forms.fields.TypedChoiceField object at 0xa92e7cc>, 'help_text': '', 'name': 'js_wrap'}"}
http://jsfiddle.net/JeffersonSampaul/GSY83/2/
can anybody tell what mistake I am doing here???

Your fiddle doesn't use the jQuery library nor the jquery.validation external library.
Here's a fixed jsFiddle Demo.
The code is the untouched.
jQuery.validator.addMethod("notEqual",
function (value, element, param) {
return this.optional(element) || value !== param;
},
"Please specify a different (non-default) value");
$("#research").validate({
rules: {
address: {
notEqual: "ADDRESS"
},
building: {
notEqual: "BUILDING"
}
},
submitHandler: function () {
$("#research").submit();
}
});

Related

How to display multiple select options in Sweetalert2 with VueJS?

I want to configure Sweetalert2 modal in such a way in which I am able to select different options from a list. This was easily achieved using the following code:
swal({
title: 'Select Outage Tier',
input: 'select',
inputOptions: {
'1': 'Tier 1',
'2': 'Tier 2',
'3': 'Tier 3'
},
inputPlaceholder: 'required',
showCancelButton: true,
inputValidator: function (value) {
return new Promise(function (resolve, reject) {
if (value !== '') {
resolve();
} else {
reject('You need to select a Tier');
}
});
}
}).then(function (result) {
if (result.value) {
swal({
type: 'success',
html: 'You selected: ' + result.value
});
}
});
It was copied from a different question and it worked like a charm for the first part of my project. I can add new options in the inputOptions: {} tag. However, I want to display the options dynamically without having to change the code manually every time add/remove one.
I am retrieving the options from a database, by calling an API. This part was also done quickly and it works pretty well. I retrieve the data and store in a variable options: ''. The data is stored and ready to be used with the above code.
HERE COMES THE PROBLEM: I am still pretty new to VueJS and all I can do for now is basic coding. I tried to use a code snippet, from my own project, inside the inputOptions: {} tag, hoping it will work in the same way it works inside a method:
inputOptions: {
this.options.forEach((option) => {
option.id : option:name
});
},
However, it doesn't work at all. I get an error Uncaught SyntaxError: Unexpected token . on the second line of the snippet code above.
All I want to do is to retrieve and display the options, from the database, inside the Sweetalert2 modal. Is there an easier, more efficient way to do so?
You can use computed property to prepare data for inputOptions
computed: {
optionsDict() {
if (!this.options) return {}
return this.options.reduce((a, c) => {
a[c.id] = c.name
return a
}, {})
}
}
and then
swal({
...
inputOptions: this.optionsDict
...
})

Vue.js - Element UI - HTML message in MessageBox

I'm using vue-js 2.3 and element-ui. This question is more specific to the MessageBox component for which you can find the documentation here
Problem
I'd like to be able to enter html message in the MessageBox
More specifically I would like to display the data contained in dataForMessage by using a v-for loop.
Apparently, we can insert vnode in the message but I have no idea where to find some information about the syntax.
https://jsfiddle.net/7ugahcfz/
var Main = {
data:function () {
return {
dataForMessage: [
{
name:'Paul',
gender:'Male',
},
{
name:'Anna',
gender:'Female',
},
],
}
},
methods: {
open() {
const h = this.$createElement;
this.$msgbox({
title: 'Message',
message: h('p', null, [
h('span', null, 'Message can be '),
h('i', { style: 'color: teal' }, 'VNode '),
h('span', null, 'but I would like to see the data from '),
h('i', { style: 'color: teal' }, 'dataForMessage'),
])
}).then(action => {
});
},
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
I think this is what you want.
methods: {
open() {
const h = this.$createElement;
let people = this.dataForMessage.map(p => h('li', `${p.name} ${p.gender}`))
const message = h('div', null, [
h('h1', "Model wished"),
h('div', "The data contained in dataForMessage are:"),
h('ul', people)
])
this.$msgbox({
title: 'Message',
message
}).then(action => {
});
},
}
Example.
You can also use html directly and convert to vnodes by using domProps:
const html = '<div><h1>Model wished</h1><div>The data contained in dataForMessage are:</div><ul><li>Paul Male</li><li>Anna Female</li></ul></div>'
const message = h("div", {domProps:{innerHTML: html}})
(The above is simplified without the loop. Just to get the idea)
Fiddle

can't ascess to field in Ext.form.field.VTypes

This code is working:
Ext.application({
name: 'WebClient',
autoCreateViewport: true,
launch: function() {
Ext.apply(Ext.form.field.VTypes, {
IPAddress: function(v) {
return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
},
IPAddressText: 'Некорректный IP Адресс',
IPAddressMask: /[\d\.]/i
});
Ext.apply(Ext.form.field.VTypes, {
port: function(v) {
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
if (!isNumber(v)) return false;
return (v>=0 && v<=65535)
},
portText: 'Порт 2 байта 0..65535',
portMask: /[\d\.]/i
});
},
models: ['Request','RPCLog','Connection']
});
But if I comment line autoCreateViewport: true, or set this property to false, the browser produces an error: Uncaught TypeError: Cannot read property 'field' of undefined. How to make Ext.form.field.VTypes available without autoCreateViewport:true?
I had the same issue, except that I was defining the custom VType in the view.
Defining the VType inside the initComponent helped resolve the issue.
initComponent : function(){
// Add the additional 'advanced' VTypes
Ext.apply(Ext.form.field.VTypes, {
daterange: function(val, field) {

dojox.mobile: Custom ListItem widget: "... is not a constructor"

I want to create a custom ListItem widget for my dojox.mobile app. It works if i use it in my HTML Code, but it throws a TypeError if i try to use it programmatically.
This is the JS-Code for my custom ListItem:
define([
"dojo/_base/declare",
"dojo/dom-construct",
"dojox/mobile/ListItem"], function(declare, domConstruct, ListItem){
var LabeledInputListItem = declare("myapp.LabeledInputListItem", ListItem, {
labelText: "",
placeholder: "",
value: "",
_setItemLabelAttr: function(val) {
this.labelText = val;
this.qDescSpan.innerHTML = val;
},
_setPlaceholderAttr: function(val) {
this.placeholder = val;
},
_setValueAttr: function(val) {
this.value = val;
},
startup: function(){
if(this._started){ return; }
},
constructor: function(params) {
this.placeholder = params.placeholder;
this.labelText = params.labelText;
this.valu = params.value;
},
buildRendering: function(){
this.inherited(arguments);
this.qDescDiv = domConstruct.create("div", {className: "tableItemDescription", id: "asd"}, this.labelNode, "before");
this.qDescSpan = domConstruct.create("span", null, this.qDescDiv, "first");
this.qInputDiv = domConstruct.create("div", {className: "tableItemInput"}, this.qDescDiv, "after");
this.qInputText = domConstruct.create("input", {className: "mblTextBox sessionTextbox", placeholder: this.placeholder, value: this.value}, this.qInputDiv, "first");
console.log(this.labelText, this.placeholder, this.value);
},
});
return LabeledInputListItem; });
I can use this custom ListItem in my html Code like this:
<li data-dojo-type="myapp/LabeledInputListItem" data-dojo-props="itemLabel: 'asdasd', placeholder: 'placeholder', value: 'value'"></li>
However, if I try to create my custom ListItem programmatically it results in the following error:
TypeError: myapp.LabeledInputListItem is not a constructor
var childWidget = new myapp.LabeledInputListItem({placeholder: "placeholder"});
Does anybody know what i'm missing?
Thanks in advance for your help!
The only (obvious) reason I can think of would be that you did not require the module?
By the way Dojo is now moving towards a "no globals" approach, so it may be better to not give an explicit id to your class, and use the value of the AMD module instead of the global myapp.LabeledInputListItem.

Reading json values after loading to a store

I am trying to read the values from json which is returned from the db. But I am unable to do that. Its giving undefined.
In Firebug its giving the correct values in the following format
{ "COLUMNS":["B","C","D","E","F","G"],
"DATA":[[1.253,0.54,2.54,8.245,0,0.253]]
}
When I give console.log(response[0].DATA.B), its giving undefined.
I tried alert(response[0].get('B')); This is also giving undefined.
alert(success) is giving true.
Can someone please tell me what is going wrong here.
Thanks in advance..
Here is the code I am using
Ext.define('DBRec', {
extend: 'Ext.data.Model',
fields: [
{name:'A', type :'string'},
{name:'B', type:'string'},
{name:'C', type:'string'},
{name:'D', type:'string'},
{name:'E', type:'string'},
{name:'F', type:'string'},
{name:'G', type:'string'}
]
});
var DBRecStore=Ext.create('Ext.data.Store', {
model: 'DBRec',
proxy: {
type: 'ajax',
url : 'dbFunctions.cfc?method=getRec',
reader: {
type:'json',
root:'DATA',
fields: ['B', 'C', 'D', 'E', 'F', 'G']
}
}
});
function loadLimits()
{
DBRecStore.load({
params: {
reader: 'json',
returnFormat: 'JSON'
},
callback: function(response, options, success){
alert(DBRecStore.getCount());
if (DBRecStore.getCount() == '0') {
alert("no records found");
}
else
{
alert("records found");
console.log(response[0].DATA.B+" "+response[0].DATA.C);
}
}
});
}
If you not using your own reader, as i see you don't, then your data array must be a objects array, not array of arrays.
{ "DATA":[{a:1.253,b: 0.54,c: 2.54,d:8.245,e:0,0.253}] }
And you don't need to define field in store, it's already in model.