loopj Jquery tokeninput works correctly in HTML. but when I want to use it in oracle ADF form (jspx), it doesn't work. my page loads without errors.
<af:resource type="javascript" source="/js/jquery.min.js"/>
<af:resource type="javascript" source="/js/jquery.tokeninput.js"/>
<af:resource type="javascript">
$(document).ready(function() {
$("#demo-input-facebook-theme").tokenInput([
{id: 7, name: "Ruby"},
{id: 11, name: "Python"},
{id: 13, name: "JavaScript"},
{id: 17, name: "ActionScript"},
{id: 19, name: "Scheme"},
{id: 23, name: "Lisp"},
{id: 29, name: "C#"},
{id: 31, name: "Fortran"},
{id: 37, name: "Visual Basic"},
{id: 41, name: "C"},
{id: 43, name: "C++"},
{id: 47, name: "Java"}
], {
theme: "facebook"
});
});
</af:resource>
<af:form id="f1">
<af:pageTemplate viewId="/oracle/templates/threeColumnTemplate.jspx"
id="pt1">
<f:facet name="center">
<af:inputText label="input" id="demo-input-facebook-theme" contentStyle="font-weight:bold;">
</af:inputText>
</f:facet>
</af:pageTemplate>
</af:form>
What's wrong with my code?
Problem solved. this is my final code:
<f:view>
<af:document id="d1">
<af:resource type="javascript" source="/javascript/libs/jquery-1.4.4.js"/>
<af:resource type="javascript" source="/resources/js/jquery.tokeninput.js"/>
<af:resource type="css" source="/resources/styles/token-input.css"/>
<af:resource type="css" source="/resources/styles/token-input-facebook.css"/>
<af:resource type="javascript">
$(document).ready(function() {
$("input[name=it1]").tokenInput([
{id: 7, name: "Ruby"},
{id: 11, name: "Python"},
{id: 13, name: "JavaScript"},
{id: 17, name: "ActionScript"},
{id: 29, name: "C#"},
{id: 31, name: "Fortran"},
{id: 37, name: "Visual Basic"},
{id: 41, name: "C"},
{id: 43, name: "C++"},
{id: 47, name: "Java"}
],{
theme: "facebook"
});
});
</af:resource>
<af:form id="f1">
<af:inputText label="Enter Text :" id="it1" contentStyle="font-weight:bold;">
</af:inputText>
</af:form>
</af:document>
</f:view>
Related
I want to make another array object from an array object, suppose I fetched a huge data from an api but I need only particular elements from that object. Exampl:-
const mainArray = [
{id: 1, name: 'John', age: 10},
{id: 2, name: 'Mark', age: 14},
{id: 3, name: 'Kevin', age: 15},
{id: 4, name: 'Julie', age: 16},
{id: 5, name: 'Liz', age: 10},
{id: 5, name: 'Emma', age: 11},
{id: 6, name: 'Robert', age: 13},
]
So suppose we have a huge list now I only want Kevin, Emma & Mark to display, for that I need an array of them like this:-
const specialKids = [
{id: 2, name: 'Mark', age: 14},
{id: 3, name: 'Kevin', age: 15},
{id: 5, name: 'Emma', age: 11},
]
How can I achieve that ?
To do this you can use the filter method of JS.
Documentation:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter?retiredLocale=de
in your case something like this should be enough:
let specialKids[];
specialKids = mainArray.filter(item => item.name === "Mark" || item.name === "Kevin" || item.name === "Emma")
ArrayList<String> yourintList = new ArrayList<>(Arrays.asList(yourArray));
for (int i = 0; i < yourintList.lenght; i++) {
if (yourintList.contains("Kevin")) {
do something
}
I am trying to filter the following dataset to create a dataset that only contains unique values based on Version and Name.
Data = [{Id: 1, Version: "set1", Name: "apple", Location: "US"},
{Id: 2, Version: "set1", Name: "apple", Location: "US"},
{Id: 3, Version: "set2", Name: "apple", Location: "US"},
{Id: 4, Version: "set1", Name: "banana", Location: "GER"},
{Id: 5, Version: "set1", Name: "banana", Location: "GER"},
{Id: 6, Version: "set3", Name: "cake", Location: "UK"},
{Id: 7, Version: "set3", Name: "cake", Location: "UK"},
{Id: 8, Version: "set3", Name: "cake", Location: "UK}]
The desired outcome:
Data = [{Id: 1, Version: "set1", Name: "apple", Location: "US"}
{Id: 2, Version: "set2", Name: "apple", Location: "US"},
{Id: 3, Version: "set1", Name: "banana", Location: "GER"},
{Id: 4, Version: "set3", Name: "cake", Location: "UK"}]
Please use this code.
let result = [];
data.forEach(val => {
const part1 = result.filter(value => value["Name"] == val["Name"]);
const part2 = result.filter(value => value["Name"] == val["Name"] && value["Version"] == val["Version"]);
if(part1.length == 0 || (part1.length > 0 && part2.length == 0)) result.push(val);
});
console.log(result);
const Data = [{Id: 1, Version: "set1", Name: "apple", Location: "US"},
{Id: 2, Version: "set1", Name: "apple", Location: "US"},
{Id: 3, Version: "set2", Name: "apple", Location: "US"},
{Id: 4, Version: "set1", Name: "banana", Location: "GER"},
{Id: 5, Version: "set1", Name: "banana", Location: "GER"},
{Id: 6, Version: "set3", Name: "cake", Location: "UK"},
{Id: 7, Version: "set3", Name: "cake", Location: "UK"},
{Id: 8, Version: "set3", Name: "cake", Location: "UK"}]
const lookup = []
const filtered = Data.map(d => {
if(lookup.includes(d.Version+d.Name)){
return null
}else{
lookup.push(d.Version+d.Name)
return d
}
}).filter(data => data !== null)
console.log(filtered)
Here is the best solution for filtering any array. Just get load Lodash install in your app using npm OR you can use CDN either way.
let Data = [{Id: 1, Version: "set1", Name: "apple", Location: "US"},
{Id: 2, Version: "set1", Name: "apple", Location: "US"},
{Id: 3, Version: "set2", Name: "apple", Location: "US"},
{Id: 4, Version: "set1", Name: "banana", Location: "GER"},
{Id: 5, Version: "set1", Name: "banana", Location: "GER"},
{Id: 6, Version: "set3", Name: "cake", Location: "UK"},
{Id: 7, Version: "set3", Name: "cake", Location: "UK"},
{Id: 8, Version: "set3", Name: "cake", Location: "UK"}]
const result=_.uniqBy(Data, (e)=>{
return [e.Name, e.Version].join();
})
console.log(result)
Happy Coding!
I am very much new to AngularJS.
Generally I have seen people using $route for refreshing data from database. But for learning purpose I have created an object in the custom service, stored some data in the Object and calling that service in the controller.
But when I am adding more values in the object and try to update it using the ngClick, no changes take place. Though, on refreshing the whole page, changes takes place. But I just want that particular section to update.
Here's my JavaScript code:
var app=angular
.module('app',['ngRoute'])
.service('data', function(){
this.students=[
{id: 1, name: 'Mark', gender: 'Male', city: 'London'},
{id: 2, name: 'Henry', gender: 'Male', city: 'Manchester'},
{id: 3, name: 'John', gender: 'Male', city: 'Chennai'},
{id: 4, name: 'Sara', gender: 'Female', city: 'Sydney'},
{id: 5, name: 'Tom', gender: 'Male', city: 'New York'},
{id: 6, name: 'Pam', gender: 'Male', city: 'Los Angeles'},
{id: 7, name: 'Catherine', gender: 'Female', city: 'Chicago'},
{id: 8, name: 'Mary', gender: 'Female', city: 'Houston'},
{id: 9, name: 'Mike', gender: 'Male', city: 'Phoenix'},
{id: 10, name: 'Rosie', gender: 'Female', city: 'Manchester'},
{id: 11, name: 'Sasha', gender: 'Female', city: 'Hyderabad'},
{id: 12, name: 'Naatasha', gender: 'Female', city: 'Bhungi'},
// {id: 13, name: 'akash', gender: 'Male', city: 'lugi'},
// {id: 14, name: 'aaakash', gender: 'Male', city: 'lugi'}
];
})
.controller('studentcontroller',function($scope,data,$route){
$scope.rdata=function(){
console.log("asd");
$route.reload();
};
$scope.students=data.students;
});
Here's the code calling it
<h1>List of Students</h1>
<ul>
<li ng-repeat="student in students">
{{student.name}}
</li>
</ul>
<button ng-click="rdata()">Reload Data</button>
Please help me in learning something new.
The problem is that I have a list of people and their city id. I want to get the city name based on their id from another list by a function.
<table class="table">
<tr>
<th>#</th>
<th>Name</th>
<th>Type</th>
<th>City</th>
</tr>
<tr ng-repeat="item in samples">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.type}}</td>
<td>{{getCity(item.city)}}</td>
</tr>
</table>
and the controller:
$scope.samples = [
{id: 1, name: "alex", type: "Average", city: 12},
{id: 2, name: "Alex", type: "Average", city: 12},
{id: 3, name: "Mia", type: "Medium", city: 13},
{id: 4, name: "Sasha", type: "Top", city: 14},
{id: 5, name: "Eric", type: "Top", city: 12},
{id: 6, name: "Taz", type: "Average", city: 14},
{id: 7, name: "Normai", type: "Low", city: 13},
{id: 8, name: "Jim", type: "Average", city: 11}];
$scope.city = [
{id: 11, name: "Dallas"},
{id: 12, name: "Los Angeles"},
{id: 13, name: "New York"},
{id: 14, name: "Washington"}
];
$scope.getCity = function(name) {
angular.forEach($scope.city, function(value, key){
if(value.id == name){
$scope.city_name = value.name;
}
return $scope.city_name;
});
}
Here is a Fiddle for more details.
you are return value at wrong place. I just update the jsfiddle you can check here.
Here is the changes of the code.
$scope.getCity = function(name) {
$scope.city_name = "";
angular.forEach($scope.city, function(value, key){
if(value.id == name){
$scope.city_name = value.name;
}
});
return $scope.city_name;
}
}]);
Try this function
$scope.getCity = function(id) {
var city = $scope.city.filter(function(c){ return angular.equals(c.id, id); })[0];
return city.name;
}
In my angular-kendo application I'm unable to get the Grid filter to show at all - not even a filter icon, just plain column headers.
Here is my html:
<div ng-controller="IntroductionWizardCtrl">
<h3 class="text-muted">Step 2: Select Application To Describe</h3>
<div kendo-grid id="grid"
k-data-source="dataSource"
k-sortable="true"
k-on-change="selectedItem = data"
k-selectable="'row'"
k-pageable='{ "refresh": true, "pageSizes": 5 }'
k-filterable="true">
</div>
<div>
<p>{{selectedItem}}</p>
</div>
<br/>
<input type="submit" class="btn btn-primary" wz-next value="Proceed to Next Step"
data-ng-click="" />
</div>
here is the corresponding Angular controller:
'use strict';
angular.module('wizardApp').controller('IntroductionWizardCtrl', ['$scope', '$location', '$rootScope',
function ($scope, $location, $rootScope) {
$scope.dataSource = {
data: [{id: 1, name: "Account Underwriting - Misc App", bu: 50},
{id: 2, name: "Achieve - Distributed", bu: 43},
{id: 3, name: "ACT!", bu: 27},
{id: 4, name: "Actuarial Database", bu: 29},
{id: 5, name: "Adjustment Invoicing System (AIS)", bu: 34},
{id: 6, name: "buncy Download", bu: 43},
{id: 7, name: "Ariba", bu: 27},
{id: 8, name: "Athena NY", bu: 29},
{id: 9, name: "Authoria", bu: 34},
{id: 10, name: "Avenue", bu: 43},
{id: 11, name: "BC&IT - Services", bu: 27},
{id: 12, name: "Billing Website", bu: 29},
{id: 13, name: "Blue Butler", bu: 34},
{id: 14, name: "BOE External", bu: 43},
{id: 15, name: "Builders Risk", bu: 27},
{id: 16, name: "Business Intelligence", bu: 29},
{id: 17, name: "Care Center", bu: 34}],
pageSize: 5, serverFiltering: true
};
$scope.rowSelected = function(e) {
var grid = e.sender;
var selectedRows = grid.select();
for (var i = 0; i < selectedRows.length; i++) {
$scope.selectedItem = grid.dataItem(selectedRows[i]);
break;
}
};
$scope.categoryDataSelectedRows=[];
$scope.categoryData=
{
data:
[{name: "General Application Information"},
{name: "User Interface configuration description"},
{name: "Application Architecture"},
{name: "Database"},
{ name: "Backup & DR"},
{name: "Design"},
{ name: "Operational data"},
{ name: "Testing"},
{name: "Application Configuration details"},
{ name: "Application connectivity requirements"},
{name: "Deployment Requirements"},
{name: "Application dependencies"},
{name: "Infrastructure dependencies"},
{ name: "Business value assessment"},
{ name: "Data requirements"},
{name: "Hosting OS requirements"},
{ name: "License requirements"}], pageSize: 5
}
$scope.rowSelectedCategory = function(e) {
var gridCategory = e.sender;
var selectedRowsCategory = gridCategory.select();
for (var i = 0; i < selectedRowsCategory.length; i++) {
$scope.selectedItemCategory = gridCategory.dataItem(selectedRowsCategory[i]);
break;
}
};
}
]);
I have looked over many examples, outside of Angular, where Kendo Grid has filtering working just fine. Yet, with angular-kendo I'm having this problem.
Well, as it turns out, my issue was with the order in which various css files were being loaded.
bootstrap was overwriting some other styles. Took me a while to sort this out, but now my angular-kendo grid is OK. Thanks for helping me!