In following example - http://dojo.telerik.com/IqIYI/5 - I am trying to understand how the data should be saved in my DB (and hence fed to the scheduler).
This is my custom edit template.
<script id="editor" type="text/x-kendo-template"> <h3>Edit meeting</h3> <p>
<label>Title: <input name="title" /></label> </p> <p>
<label>Start: <input data-role="datetimepicker" name="start" /></label> </p> <p>
<label>End: <input data-role="datetimepicker" name="end" /></label> </p> <div class="k-edit-label">
<label for="Contact">Contact</label>
</div>
<div data-container-for="Contact" class="k-edit-field">
<select id="Contact" multiple="multiple" name="Contact"
data-role="multiselect"
data-bind="value:Contact"
data-source='[
{ "text": "Person1", "value": 1 },
{ "text": "Person2", "value": 2 },
{ "text": "Person3", "value": 3 }
]'
data-text-field="text"
data-value-field="value"
data-value-primitive="true"
></select>
</div> </script>
And my datasource for the only event (seen on the right in the example) is following:
dataSource: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview",
contact: "[1, 2]"
}
]
..The start, end date and the title fill the popup properly (when double clicking the "Interview" event on the right to show its contents).
However the Contact field does not fill.
I tried the following to no avail, does anyone have a clue?
contact: [1,2]
contact: {1,2}
contact: [{1,2}]
contact: [{value:1, value:2}]
The name and data-bind in your template aren't correct (lowercase "c"); you need:
<div data-container-for="Contact" class="k-edit-field">
<select id="Contact" multiple="multiple" name="contact"
data-role="multiselect"
data-bind="value:contact"
data-source='[
{ "text": "Person1", "value": 1 },
{ "text": "Person2", "value": 2 },
{ "text": "Person3", "value": 3 }
]'
data-text-field="text"
data-value-field="value"
data-value-primitive="true"
></select>
</div>
Then this value will work:
contact: [1,2]
(demo)
Related
I have a checkbox that chooses everyone. And I have a checkbox that returns the systemi object. And I have a checkbox that returns the charteri object. But there is a problem with this one. And does not give us the checkbox information.
I want to click on the systeme ckeckbox. Only the information about it will be displayed to us.
I want to click on the charteri ckeckbox. Only the information about it will be displayed to us.
In fact, we want to return the object through systemi or charteri.
We have several filters. It should be as if several filters were activated. Filtering done.
function customFilter(list, field, value) {
let fill = list.filter(task => {
if (typeof(filter) === 'Object') {
value.forEach(val => {
return task[field] === value
});
}
return task[field] === value
});
console.log(fill);
}
let filterCheckbox = document.querySelector('.customCheck');
filter_ch.addEventListener('change', filt);
function filt(e) {
e.preventDefault();
var
//field = $(this).parents('.filter_type').attr('data-field');
let field =document.querySelector('.filter_type').getAttribute('data-field');
let val = e.target.value;
customFilter(FlyList, field, val);
};
<div class="filter_type" data-field="flkind">
<h6>Ticket type
<div class="switcher float-left ">
<label class="customToggle small">
<input type="checkbox" name="" id="" class="selectall">
all
<div class="indicator"></div>
</label>
</div>
</h6>
<ul>
<li>
<label class="customCheck " id="filter-check">
<input type="checkbox" value={systemi} name="inlineRadioOptions" data-field="systemi" class="individual"> systemi
<div class="indicator"></div>
<span class="float-left">
air2
</span>
</label>
</li>
<li>
<label class="customCheck" id="filter-check2" >
<input type="checkbox" value={charteri} name="inlineRadioOptions" data-field="charteri" class="individual"> charteri
<div class="indicator"></div>
<span class="float-left">
air2
</span>
</label>
</li>
</ul> </div>
let FlyList = [{
"id": "1",
"city": "Dallas",
"capacity": "1",
"time": "06:00",
"fltime": "07:00",
"price": "10000",
"flnum": "961",
"pricetest": "dd",
"flkind": "systemi"
}, {
"id": "2",
"city": "Bevery Hills",
"capacity": "2",
"time": "14:00",
"fltime": "15:00",
"price": "20000",
"flnum": "960",
"pricetest": '',
"flkind": "systemi"
}, {
"id": "3",
"city": "New York",
"capacity": "3",
"time": "04:00",
"fltime": "05:00",
"price": "30000",
"flnum": "950",
"flkind": "systemi"
},
];
I'm using PrimeNG's p-dropdown. The options are an array of labels and a value. Every time after a change it is colored red at bottom.
Before selection, it looks like this:
After selection, it looks like this:
HTML code:
<div>
<span class="md-inputfield">
<label class="floatPlaceHolder">{{schema.description | translate }}</label>
<p-dropdown [disabled]="schema.readOnly==true?true:false" appendTo="body" [formControl]="control" [options]="schema.oneOf"
[autoWidth]="false" appendTo="body" [filter]="schema.oneOf&&schema.oneOf.length>5"></p-dropdown >
</span>
</div>
Typescript Code:
"oneOf": [
{
"value": 0,
"label": ""
},
{
"value": 4,
"label": "A"
},
{
"value": 2,
"label": "B"
},
{
"value": 1,
"label": "C"
}
]
I have an online form from Formstack that I put on a website, and the code for the form is in HTML. However, I need to set it up so that whenever someone submits information through the form, automatically the form will send me the information (already set up) and then send the information in JSON to an API from Trulioo. The API is supposed to let me know the results.
I do not have a lot of experience in coding, but I do know that this would require some interesting code in order to make this system automated.
Can anyone help?
Here is a part of the form's code:
<div id="fsRow2312547-2" class="fsRow fsFieldRow fsLastRow">
<div class="fsRowBody fsCell fsFieldCell fsFirst fsLast fsLabelVertical
fsSpan100" id="fsCell40879974" lang="en">
<span id="label40879974" class="fsLabel fsRequiredLabel">Name<span
class="fsRequiredMarker">*</span></span>
<div class="fsSubFieldGroup">
<div class="fsSubField fsNameFirst">
<input type="text" id="field40879974-first" name="field40879974-first"
size="20" value="" required class="fsField fsFieldName fsRequired" aria-
required="true" />
<label class="fsSupporting fsRequiredLabel" for="field40879974-first">First
Name<span class="hidden">*</span></label>
</div>
<div class="fsSubField fsNameLast">
<input type="text" id="field40879974-last" name="field40879974-last"
size="20" value="" required class="fsField fsFieldName fsRequired" aria-
required="true" />
<label class="fsSupporting fsRequiredLabel" for="field40879974-last">Last
Name<span class="hidden">*</span></label>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="fsRow2312547-3" class="fsRow fsFieldRow fsLastRow">
<div class="fsRowBody fsCell fsFieldCell fsFirst fsLast fsLabelVertical
fsSpan100" id="fsCell40879975" lang="en">
<label id="label40879975" class="fsLabel fsRequiredLabel"
for="field40879975">Address<span class="fsRequiredMarker">*</span>
</label>
<label for="field40879975-address" class="hidden">Address Line 1<span
class="fsRequiredMarker">*</span></label>
<input type="text" id="field40879975-address" name="field40879975-address"
size="50" required value="" class="fsField fsFieldAddress fsRequired" aria-
required="true" />
<input type="text" id="field40879975-address2" name="field40879975-address2"
size="50" value="" style="margin-top:5px;" class="fsField fsFieldAddress2"
/>
<div class="fsSubFieldGroup">
<div class="fsSubField fsFieldCity">
<input type="text" id="field40879975-city" name="field40879975-city"
size="15" value="" required class="fsField fsFieldCity fsRequired" aria-
required="true" />
<label class="fsSupporting" for="field40879975-city">City</label>
</div>
From there Formstack (the online form company) uses some code to send the inputted information. I need it to be in JSON format like this:
{
"AcceptTruliooTermsAndConditions": true,
"Demo": true,
"ConfigurationName": "sample string 4",
"ConsentForDataSources": [
"sample string 1",
"sample string 2"
],
"CountryCode": "sample string 5",
"DataFields": {
"PersonInfo": {
"FirstGivenName": "sample string 1",
"MiddleName": "sample string 2",
"FirstSurName": "sample string 3",
"SecondSurname": "sample string 4",
"ISOLatin1Name": "sample string 5",
"DayOfBirth": 1,
"MonthOfBirth": 1,
"YearOfBirth": 1,
"MinimumAge": 1,
"Gender": "sample string 6",
"AdditionalFields": {
"FullName": "sample string 1"
}
},
"Location": {
"BuildingNumber": "sample string 1",
"BuildingName": "sample string 2",
"UnitNumber": "sample string 3",
"StreetName": "sample string 4",
"StreetType": "sample string 5",
"City": "sample string 6",
"Suburb": "sample string 7",
"County": "sample string 8",
"StateProvinceCode": "sample string 9",
"Country": "sample string 10",
"PostalCode": "sample string 11",
"AdditionalFields": {
"Address1": "sample string 1"
}
},
"Communication": {
"MobileNumber": "sample string 1",
"Telephone": "sample string 2",
"EmailAddress": "sample string 3"
etc
}
}
}
You'll need a Javascript file containing some code that will look like the following...
$(document).ready(function () {
var foo = $("#foo");
foo.submit(function (e) {
e.preventDefault();
var jsonData = {
"bar":$("#bar").value(),
"stuff":"another field needed by API"
};
$.ajax({
url : 'http://path.to/api/url',
dataType : 'json',
contentType : 'application/json;',
data : jsonData,
type : 'POST',
complete : handleData
});
function handleData(data) {
console.log(data);
// do whatever with response data
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="foo">
<input type="text" name="bar" id="bar" />
<input type="submit" name="baz" id="baz" />
</form>
You'll need to clarify the requirements and maybe do a lot more research with web programming...
I am new to angular JS.
I am getting the below JSONArray from a web service call. Requirement is to display the values from the sub array "options" and "text". My drop down should be displayed as that is generated from below HTML:
<select>
<option value="L1" > English </option>
<option value="L2" > French </option>
<option value="L3" > Chainese </option>
</select>
Here is the code that I have tried using angular ng-options:
<td data-ng-repeat="field in json">
<select tabindex="0" data-ng-options="option.code as option.code as option.text.label for option in field.options" data-ng-model="language_code">
<option value=""> Select...</option>
</select>
I am unable to access "options" or "text" arrays from the base object.
[{
"id": null,
"code": "Language",
"order": 1,
"options": [
{
"code": "L1",
"order": 1,
"text": [
{
"language": "eng",
"label": "English",
}
]
},
{
"code": "L2",
"order": 2,
"text": [
{
"language": "fre",
"label": "French",
}
]
},
{
"code": "L3",
"order": 3,
"text": [
{
"language": "chn",
"label": "Chainese",
}
]
}
]
}]
Please suggest solution.
You have strange JSON format:
here is working markup and plnker with full solution:http://plnkr.co/edit/OFyfJkTSgpoW2Gwkzzda
<table>
<tr>
<td ng-repeat="field in json">
<select tabindex="0" ng-model="selected" data-ng-options="option.code as option.text[0].label for option in field.options">
<option value=""> Select...</option>
</select>
{{selected}}
</td>
</tr>
</table>
I have a json wine list, and my wish is to build a code with AngularJS to filter the results
the json file
[
{ "name": "Wine a", "type": "red", "country": "france", "style": "strong" },
{ "name": "Wine a", "type": "white", "country": "italie", "style": "medium" },
{ "name": "Wine a", "type": "white", "country": "france", "style": "light" },
{ "name": "Wine a", "type": "rose", "country": "usa", "style": "strong" },
{ "name": "Wine a", "type": "champagne", "country": "chili", "style": "medium" },
{ "name": "Wine a", "type": "red", "country": "brazil", "style": "strong" },
{ "name": "Wine a", "type": "red", "country": "france", "style": "strong" }
]
the check-boxes
<div ng-controller="MainCtrl">
<input ng-model="red" type="checkbox" >red</input>
<input ng-model="white" type="checkbox" >white</input>
<input ng-model="rose" type="checkbox" >rose</input>
<input ng-model="champagne" type="checkbox" >champagne</input>
<input ng-model="france" type="checkbox" >france/input>
<input ng-model="italie" type="checkbox" >italie</input>
<input ng-model="brazil" type="checkbox" >brazil</input>
<input ng-model="chili" type="checkbox" >chili</input>
<input ng-model="strong" type="checkbox" >strong</input>
<input ng-model="medium" type="checkbox" >medium</input>
<input ng-model="light" type="checkbox" >light</input>
</div>
my wish
My wish is to build a dynamic multi parameter filter list,the result of the list would match with the values of the check-boxes.
if i check red and strong, would appears in the list, only the wines from the json list with these parameter (a list of red and strong wines).
if i check red, white and france, would appears in the list, only the wines from the json list with these parameter ( a list of red and white wines from france).
i tried many solution, with no results. It seems to be hard to code!!
you can build custom filters for this and bind it with your filter checkboxes...
here is PLUNKER demo what I did for ony wine types...
first build a custom filter... here is mine winetype filter sample...
app.filter('winetypefilter', function () {
return function(input, filter) {
var result = [];
angular.forEach(input, function (wine) {
angular.forEach(filter, function (isfiltered, type) {
if (isfiltered && type === wine.type) {
result.push(wine);
}
});
});
return result;
};
});
as you see it simply traverse wine array and filter out what you want...
after creating your filter just put it in your ng-repeat in your html...
<ul>
<li ng-repeat="wine in wines | winetypefilter:winetypes">
{{wine.name}} is a {{wine.type}} with {{wine.style}} style from {{wine.country}}
</li>
</ul>
as you see our custom filter expect a parameter which is winetypes in example and it is a array of checkbox value in our controller and binded checkboxes in html code...
$scope.winetypes = {red : true,white : true,rose : true, champagne : true};
and here its html...
<li ng-repeat="(type, value) in winetypes">
<input type="checkbox" ng-model="winetypes[type]" /> {{type}}
</li>
you can create other filters for other attribute or just put all of them into one filter it is your choice...
UPDATE
of course you can enable disable your filter dynamically... there can be many ways to do it simplest solution that comes to my mind is just sending third parameters as a boolean to check if filter is enable or not...
here is updated filter sample...
app.filter('winetypefilter', function () {
return function(input, filter, isEnable) {
// if isEnable then filter out wines
if (isEnable) {
var result = [];
angular.forEach(input, function (wine) {
angular.forEach(filter, function (isfiltered, type) {
if (isfiltered && type === wine.type) {
result.push(wine);
}
});
});
return result;
}
// otherwise just do not any filter just send input without changes
else{
return input
}
};
});
and here is updated PLUNKER...