Placeholder and on select in combobox - javascript

I have the following code which outputs me a combobox:
<html>
<head>
// Included JS library
</head>
<body>
<script>
$(document).ready(function ()
{
var moduleAutoSuggest = getModuleAutoSuggestOption();
// Create a jqxComboBox
$("#jqxWidget").jqxComboBox(
{
source: moduleAutoSuggest,
placeHolder : "text ...",
width: '250',
height: '25px',
disabled : false,
searchMode: 'containsignorecase',
autoComplete: true
});
obj = '';
$('#jqxWidget').on('select', function (event)
{
var args = event.args;
if (args != undefined) {
var item = event.args.item;
if (item != null)
{
obj = item;
printSelectedValue(obj);
}
}
});
});
function getModuleAutoSuggestOption()
{
var moduleAutoSuggestOption =
[
{"id" : "ALL_ICONS", "label":"All Icons"},
{"id" : "ALL_LOGOS", "label":"All Logos"},
{"id" : "ARTICLE", "label":"Newest Article"},
{"id" : "ARTICLE_SUMMARY", "label":"Headlines For 10 Newest Articles"}
];
return moduleAutoSuggestOption;
}
</script>
<div id='content'></div>
<div id='jqxWidget'>
</div>
</body>
</html>
It gives me a working combobox, the issue is, the placeHolder attribute is not working and If I click on the input text, the selected value doesnt get clearer
Any help will be appreaciated

Using your code, I created a working example that seems to be functioning identically to the jqwidgets example fiddle. Was there something about this functionality you were looking to change?
$(function ()
{
var moduleAutoSuggest = getModuleAutoSuggestOption();
// Create a jqxComboBox
$("#jqxWidget").jqxComboBox({
source: moduleAutoSuggest,
placeHolder: "text ...",
width: '250',
height: '25px',
disabled: false,
searchMode: 'containsignorecase',
autoComplete: true
});
obj = '';
$('#jqxWidget').on('select', function (event){
var args = event.args;
if (args != undefined) {
var item = event.args.item;
if (item != null)
{
obj = item;
printSelectedValue(obj);
}
}
});
});
function getModuleAutoSuggestOption()
{
return [
{"id" : "ALL_ICONS", "label":"All Icons"},
{"id" : "ALL_LOGOS", "label":"All Logos"},
{"id" : "ARTICLE", "label":"Newest Article"},
{"id" : "ARTICLE_SUMMARY", "label":"Headlines For 10 Newest Articles"}
];
}
<link href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcombobox.js"></script>
<div id='content'></div>
<div id='jqxWidget'>
</div>

Related

setting the value of select by partially specifying the first parameter value

I have 2 select2 controls, both has same data loaded into them
I know that $("#basic").val("44||four||another||data4").trigger("change") will set as "invalid"
I need to set "invalid" just by setting the value as 44.
Likewise when I specify 22 it must specify the selected as "bug"
Note that it should entirely match the first parameter of id string separated by ||, ie when $("#basic").val("44").trigger("change") should not select 444.
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
<select id="advanced">
</select>
<select id="basic">
</select>
<script>
var data = [
{
id: "11||first||another||data1",
text: 'enhancement'
},
{
id: "22||second||another||data2",
text: 'bug'
},
{
id: "33||third||another||data3",
text: 'duplicate'
},
{
id: "444||fourfour||another||data44",
text: 'Junk'
},
{
id: "44||four||another||data4",
text: 'invalid'
},
{
id: "55||five||another||data5",
text: 'wontfix'
}
];
$("#advanced").select2({
data: data
})
$("#basic").select2({
data: data
})
$("#basic").val("44").trigger("change")
</script>
</body>
</html>
you could create a selectValue function that wraps your change. That way you'd be able to select an option based on any value of the key.
selectValue = function (value) {
let id = data.find(item => {
let ids = item.id.split("||")
if(ids && ids.indexOf(value) !== -1)
return true
})
// you need this check in case no id was found
if(id) {
id = id.id
$("#basic").val(id).trigger("change")
}
}
//usage
selectValue("44")
If data isn't a global variable make sure to add it as a function argument
selectValue = function (data, value) {
let id = data.find(item => {
let ids = item.id.split("||")
if(ids && ids.indexOf(value) !== -1)
return true
})
// you need this check in case no id was found
if(id) {
$("#basic").val(id.id).trigger("change")
}
}
//usage
selectValue(data, "44")
Also this assumes that another part of your key was just a placeholder. All parts of your id would need to be unique from each other for this to work.
Using attributeStartsWith selector
var data = [{"id":"11||first||another||data1","text":"enhancement"},{"id":"22||second||another||data2","text":"bug"},{"id":"33||third||another||data3","text":"duplicate"},{"id":"444||fourfour||another||data44","text":"Junk"},{"id":"44||four||another||data4","text":"invalid"},{"id":"55||five||another||data5","text":"wontfix"}];
$("#advanced").select2({
data: data
})
$("#basic").select2({
data: data
})
$("#basic option[value^=44]").prop('selected', true).trigger("change")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
<select id="advanced"></select>
<select id="basic"></select>

Autocomplete search form, search in the middle of texts

I am using the autocomplete to search the query.
In this source code, if you input ac you can get accepts, action_name.
However, I would like to get action_name with input name as a normal search form.
How can I make it?
$(function() {
var data = [
'accepts',
'action_name',
'add',
'add_column',
'add_index',
'add_timestamps',
'after_create',
];
$('#txtKeywd').autocomplete({
source: function(request, response) {
response(
$.grep(data, function(value){
return value.indexOf(request.term) === 0;
})
);
},
autoFocus: true,
delay: 500,
minLength: 2
});
});
$(function() {
var availableTags = [
'accepts',
'action_name',
'add',
'add_column',
'add_index',
'add_timestamps',
'after_create',
];
$("#tags").autocomplete({
source: availableTags
});
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
If you want to use the autocomplete plugin this will do it:
$(document).ready(function () {
var data = [
'accepts',
'action_name',
'add',
'add_column',
'add_index',
'add_timestamps',
'after_create',
];
$('#txtKeywd').autocomplete({
source: function(request, response) {
var re = $.ui.autocomplete.escapeRegex(request.term);
var matcher = new RegExp( re, "i" );
var a = $.grep( data, function(item,index){
return matcher.test(item);
});
response( a );
},
autoFocus: true,
delay: 500,
minLength: 2
});
});
You need to override the default regex used for autocomplete.
1 . Instead of just checking if the value is in the data element you can split the data element by - and _.
value.split(/-|_/)
2 . Then loop through it with a forEach() which takes as a parameter a function. e is the data element's value.
value.split(/-|_/).forEach(function(e) {});
3 . Then we just check if the input is in the e string
if(e.indexOf(request.term) === 0) {}
4 . If true and only if true we need to tell the grep() we're in that we have a successful match. To do so we need to set a boolean.
if(e.indexOf(request.term) === 0) { isIn = true; return; }
Above return; will end the search in the current split data element.
Here is the full code:
$(function() {
var data = [
'accepts',
'action_name',
'add',
'add_column',
'add_index',
'add_timestamps',
'after_create',
];
$('#tags').autocomplete({
source: function(request, response) {
response(
$.grep(data, function(value) {
let isIn;
value.split(/-|_/).forEach(function(e) {
if(e.indexOf(request.term) === 0) { isIn = true; return; }
});
return isIn
})
);
},
autoFocus: true,
delay: 500,
minLength: 2
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
Of course, this can be improved by splitting all the data values once on page load and store them in a special array to check.
Check this out
var data = [
'accepts',
'action_name',
'add',
'add_column',
'add_index',
'add_timestamps',
'after_create',
];
function split(val) {
return val.split(/ \s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#opt")
.autocomplete({
minLength: 0,
source: function(request, response) {
var term = request.term,
results = [];
term = extractLast(request.term);
if (term.length > 0) {
results = $.ui.autocomplete.filter(data, term);
}
response(results);
},
focus: function() {
return false; // prevent value inserted on focus
},
select: function(event, ui) {
}
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
<label for="opt">Type Here:</label><br/>
<input id="opt" size="50">
</div>

CellFilter is getting called before $http Response in UI-Grid

I am using ui-grid to bind data from Role Table which contains Department Id as PrimaryKey. I am calling Web Api to get all the roles in the table and show in ui-grid.
Department Table
Role Table
My real problem is that I want to convert Department Id to Department Name when it binds to grid using cellFilter and that is why I declare objMapping to map Department Id with Department Name. But every time when I run I see that cellFilter custom function i.e. 'mapDepartmentName' is getting called before objMapping is being set and also I am not able to refer objMapping in 'mapDepartmentName'.
My grid looks like this:-
However when I edit I get the result as below which is absolutely correct:-
My code snippet as below:-
var myApp = angular.module('appHome', ['ui.grid', 'ui.grid.edit']);
myApp.controller("ctrlRole", ['$scope', 'MetadataOrgFactory', function ($scope, MetadataOrgFactory) {
var arrDepts = [];
var objMapping = {};
MetadataOrgFactory.getApiCall('getpublisheddepts', function (dataSuccess) {
$scope.department = dataSuccess;
for (var cntElem = 0; cntElem < dataSuccess.length; cntElem++) {
var objDept = { id: dataSuccess[cntElem].DeptId, DeptId: dataSuccess[cntElem].DeptName }
arrDepts.push(objDept);
objMapping[dataSuccess[cntElem].DeptId] = dataSuccess[cntElem].DeptName;
}
$scope.gridRole.columnDefs[1].editDropdownOptionsArray = arrDepts;
}, function (dataError) {
});
$scope.gridRole = {
data: 'roleData',
columnDefs: [
{
field: 'RoleName', displayName: 'Role Name',
},
{
field: 'DeptId', displayName: 'Department Name',
editableCellTemplate: 'ui-grid/dropdownEditor',
cellFilter: 'mapDepartmentName:this',
editDropdownValueLabel: 'DeptId',
},
{
field: 'RoleDesc', displayName: 'About Role',
},
{
field: 'WorkingHrs', displayName: 'Working Hours',
},
{
field: 'RequestNumber', displayName: 'RequestNumber',
cellEditableCondition: true
}
]
}
MetadataOrgFactory.getApiCall('getallroles', function (dataSuccess) {
$scope.roleData = dataSuccess;
}, function (dataError) {
});
}])
.filter('mapDepartmentName', function () {
return function (input, scope) {
if (!input) {
return '';
} else {
return objMapping[input];
}
};
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.gridStyle {
border: 5px solid #d4d4d4;
height: 200px;
}
</style>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" />
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
<script src="../Scripts/AngularControllers/RoleController.js"></script>
<script src="../Scripts/AngularServices/ApiCallService.js"></script>
</head>
<body ng-app="appHome">
<div ng-controller="ctrlRole">
<div class="gridStyle" ui-grid="gridRole" ui-grid-edit>
</div>
</div>
</body>
</html>
Call $scope.$apply() in getpublisheddepts at the end of factory callback.
as you didnt show ur factory I believe its doing something asynchronously which is not informing the view to reflect changes.
I stuck in the issue for long time.
I did the following change in the code and I am getting the results as well. Please let me know if this is the correct solution for this:-
MetadataOrgFactory.getApiCall('getpublisheddepts', function (dataSuccess) {
$scope.department = dataSuccess;
for (var cntElem = 0; cntElem < dataSuccess.length; cntElem++) {
var objDept = { id: dataSuccess[cntElem].DeptId, DeptId: dataSuccess[cntElem].DeptName }
arrDepts.push(objDept);
objMapping[dataSuccess[cntElem].DeptId] = dataSuccess[cntElem].DeptName;
}
$scope.deptmapping = objDeptMapping; //new code added here
$scope.gridRole.columnDefs[1].editDropdownOptionsArray = arrDepts;
}, function (dataError) {
});
Filter Class
.filter('mapDepartmentName', function () {
return function (input, scope) {
if (!input) {
return '';
} else {
return scope.grid.appScope.deptmapping[input]; //Change in code
}
};
});

How to refresh AngularJS directive after certain action

I want to "refresh" (generate new values) directive after a function is triggered. My current code looks like this:
class FicheController {
constructor() {
this.words = `[
{ "en" : "cup", "pl" : "kubek" },
{ "en" : "desk", "pl" : "biurko" },
{ "en" : "chair", "pl" : "krzesło" },
{ "en" : "board", "pl" : "tablica" },
{ "en" : "sky", "pl" : "niebo" }
]`;
this.parsedWords = JSON.parse(this.words);
}
init(lang) {
// set lang
this.setCurrentLang(lang);
let totalWords = this.getNoWords(),
randomNumber = this.getRandomNumber(totalWords),
translation = this.getCurrentTrans(),
randomWord = this.getWords()[randomNumber][lang],
currentTask = this.getWords()[randomNumber][translation];
// set current word
this.setCurrentWord(randomWord);
// set current task
this.setCurrentTask(currentTask);
}
reinit() {
let lang = this.getCurrentLang();
this.init(lang);
}
...
app.directive('watchForWord', () => {
return {
controller: FicheController,
link(scope, element, attrs, ctrl) {
element.on('keyup', () => {
let currentVal = element[0].value,
currentTrans = ctrl.getCurrentTask(),
check = ctrl.diffWords(currentTrans, currentVal);
if(check === true) {
element.addClass('text-success');
ctrl.reinit();
} else {
element.removeClass('text-success');
}
});
}
};
});
HTML
<div class="container-small">
<h2 data-random-fiche="en" class="text-huge text-primary align-center"></h2>
<p class="align-center text-grey ">to po polsku</p>
<div class="input full-width">
<input type="text" class="text-center" data-watch-for-word>
</div>
</div>
As you can see, I try to run reinit() but it doesn't do what I need. What can I do?
You can see it on CodePen: http://codepen.io/tomekbuszewski/pen/MKyGBg
The problem comes when you try to force Angular play according to the Jquery(pure javascript) rules. Angular does not know and does not care about the on('whatever') event, and it only cares about ng-change, ng-click etc. For Angular to update its values, it needs to understand when it should happen, which is (roughly speaking) at the end of the digest cycle. Add $scope.digest() after your ctrl.init() is done executing.

AngularJS factory issue

In order to make use of Angular JS I tried to use Factory for my data stack...
Now, It does not work. I have just put a simple json data to be returned by factory, and then
the script has stopped working. It is the most basic example of angularjs as it uses json to
repeat and iterate through.
Here is all angularjs that I have written:
var Item = angular.module("Item", ['ngRoute']);
Item.config(function($routeProvider){
$routeProvider
.when("/add", {
controller : "ItemController",
templateUrl : "index.html"
})
.when("/edit", {
controller : "ItemController",
templateUrl : "index.html"
});
});
Item.factory("ItemsFactory", function(){
var items = [
{ name : "Washing Powder",
price : "2000",
balance : 14
},
{ name : "Shampoo",
price : "8500",
balance : 03
},
{ name : "Soap",
price : "1850",
balance : 27
}
];
var factory = {};
factory.getItems() = function(){
return items;
};
factory.postItems() = function(){
// POST items
};
return factory;
});
Item.controller("ItemController", function($scope, ItemsFactory){
$scope.items = ItemsFactory.getItems();
init();
function init()
{
$scope.items = ItemsFactory.getItems();
}
$scope.AddNewItem = function(){
$scope.items.push({
name : $scope.NewItem.name,
price : $scope.NewItem.price
});
};
});
And here is the HTML markup:
<!DOCTYPE html>
<html >
<head>
<title>Practicing AngularJS Framework...!</title>
<script src="angular.js" type="text/javascript"></script>
<script src="ngroute.js" type="text/javascript"></script>
<script src="scripts.js" type="text/javascript"></script>
</head>
<body data-ng-app="Item">
<div data-ng-controller="ItemController">
<div data-ng-repeat="each in items">
<p>Item {{ each.name }} costs {{ each.price }}.</p>
</div>
<div>
<input type="text" data-ng-model="NewItem.name" />
<input type="text" data-ng-model="NewItem.price" />
<br />
<input type="submit" value="Add Item" data-ng-click="AddNewItem()" />
</div>
</div>
</body>
</html>
It does not load of the json content to repeat them instantly...Nothing happens..
I think it is better to use some thing like this to return value in service :
Item.factory("ItemsFactory", function(){
var items = [
{ name : "Washing Powder",
price : "2000",
balance : 14
},
{ name : "Shampoo",
price : "8500",
balance : 03
},
{ name : "Soap",
price : "1850",
balance : 27
}
];
return {
getItems: function(){
return items;
},
postItems:function(){
}
});
also it think :
factory.getItems() = function(){}
is wrong and the correct is :
factory.getItems = function(){}

Categories