Develop Reference

JavaScript filtering cells for each table columns

I have a table with n rows by m columns. My goal is to put multiple filtering boxes so I can filter multiple columns in separated filtering boxes. I have JavaScript like this:
function (document) {
'use strict';
var MyTableFilter = (function (Arr) {
var _input;
function _onInputEvent(e) {
_input = e.target;
var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
Arr.forEach.call(tables, function (table) {
Arr.forEach.call(table.tBodies, function (tbody) {
Arr.forEach.call(tbody.rows, _filter);
});
});
}
function _filter(row) {
var input0Value = document.getElementById('input0').value;
var input1Value = document.getElementById('input1').value;
var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
var tdsArray = row.children;
var td0Content = tdsArray[0].textContent;
var td1Content = tdsArray[1].textContent;
function isDisplayRow() {
return td0Content.indexOf(input0Value) !== -1 &&
td1Content.indexOf(input1Value) !== -1
}
row.style.display = isDisplayRow() ? 'table-row' : 'none';
}
return {
init: function () {
var inputs = document.getElementsByClassName('my-table-filter');
Arr.forEach.call(inputs, function (input) {
input.oninput = _onInputEvent;
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function () {
if (document.readyState === 'complete') {
MyTableFilter.init();
}
});
})(document);
I have input id/class in form like this:
<input type="search" id="input0" class="my-table-filter" data-table="order-table" placeholder="Firstname"/>
<input type="search" id="input1" class="my-table-filter" data-table="order-table" placeholder="Lastname"/>
However, when I run the program, the result is not what I expected. So for example, I have John Smith, Henry Wills in the table. If I type 'H'; in first name search box and 'S' in last name search box, I should only get 'JOHN SMITH'. However, I am getting 'HENRY WILLS' as well because 'HENRY' has 'N' and 'WILLS' has 'S'. If I type out the whole words of 'JOHN SMITH', it works OK.
Also, how do I turn off case sensitive for the input text?
I am very new to JavaScript. Any suggestion would be appreciated!

The issue comes from your filter function, which does a substring search. You can modify it to a prefix search easily:
function isDisplayRow() {
return td0Content.indexOf(input0Value) === 0 &&
td1Content.indexOf(input1Value) === 0
}

If you want to search only from the begining of String
you cuold change indexOf to
String.prototype.startsWith
or
td0Content.substring(0, input0Value.length) === input0Value

angular ui-grid event: column selected

I am trying to get selected column value based on the selection of a column on ui grid. From that value i used to filter another uigrid table so how to call a function on select of column and the selected column value.
This is my sample code which i am using presently:
$scope.gridOptions[0].onRegisterApi = function(gridApi){
$scope.gridApi.push(gridApi);
gridApi.cellNav.on.navigate($scope,function(newRowCol, oldRowCol){
var name = newRowCol.col.name;
var filterWithData = newRowCol.row.entity[name];
//$scope.filtert(name,filterWithData);
});
};

I have created a plunker for your problem. Please check:
Plunker
$scope.refreshData = function (termObj) {
$scope.gridOptions2.data = $scope.data;
if (termObj.length > 2) {
while (termObj) {
var oSearchArray = termObj.split(' ');
$scope.gridOptions2.data = $filter('filter')($scope.gridOptions2.data, oSearchArray[0], undefined);
console.log($scope.gridOptions2.data)
oSearchArray.shift();
termObj = (oSearchArray.length !== 0) ? oSearchArray.join(' ') : '';
}
}
else {
$scope.gridOptions2.data = $scope.gridData;
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS);
}
$scope.$apply();
};

JavaScript checkbox Tree - children automatic checked

folks!
I've a litte problem, this is the situation:
Tree View
I let the tree on basis of the "lvl" create. That means, Bereich ABC is lvl1, Test1.docx is lvl4 and so on. So it's a "fake" Tree. But i have just this lvl information for every object.
I have to check the checkbox if the parent is clicked. that means, if lvl3 is clicked (for example "Originale") the lvl4 and lvl5 have to be checked also.
Do you understand what i mean? I hope so. But i can't make it working. Do you have any ideas?
$('[class^=lvl]').click(function(){
var keepChecking = true;
var currentElement = $(this);
var clickedLevel = getLevel(currentElement);
var checkValue = currentElement.is(':checked');
while (keepChecking) {
currentElement.attr('checked' , checkValue);
// get next element
currentElement = getNextCheckbox(currentElement);
var currentLevel = getLevel(currentElement);
keepChecking = (currentLevel > clickedLevel);
}
});
function getNextCheckbox(checkbox) {
return checkbox.parent().parent().next().children(":first").children(":first");
}
function getLevel(checkbox) {
var currentClass = checkbox.attr('class');
var currentLvl = currentClass.substring(3, currentClass.length);
return parseInt(currentLvl);
}
<TD class="center">
<INPUT TYPE="checkbox" NAME="" class="lvl[LL_REPTAG=PFADLEVEL /] docCheck" VALUE="[LL_REPTAG=DataId /]">
</TD>

I changed your javascript code to this:
function getNextCheckbox(checkbox) {
return checkbox.parent().parent().next().children(":first").children(":first");
}
function getLevel(checkbox) {
var currentClass = checkbox.attr('class');
if (currentClass){
var currentLvl = currentClass.substring(3, currentClass.length);
return parseInt(currentLvl);
}else{
return false;
}
}
$('[class^=lvl]').click(function(){
var currentElement = $(this);
var clickedLevel = getLevel(currentElement);
var checkValue = currentElement.is(':checked');
nextElement = getNextCheckbox(currentElement);
while ( getLevel(nextElement)>clickedLevel) {
currentElement=nextElement;
currentElement.prop('checked' , checkValue);
nextElement = getNextCheckbox(currentElement);
}
});
You can also play with it here: https://jsfiddle.net/1r73vy7z/1/
Enjoy :)

Angularjs checkbox value on edit profile page

I am new to angularjs and getting some problem on checkbox values on edit profile page.
I have an array for checkbox
$scope.checkBoxes = [
{id:'1', value:'Reading'},
{id:'2', value:'Cooking'},
{id:'3', value:'Dancing'},
{id:'4', value:'Singing'}
];
and I have used ng-repeat for showing checkbox
<div ng-repeat="checkBox in checkBoxes" style="display:inline;">
<input type="checkbox" ng-model="checkBox.selected" id={{checkBox.id}}' ng-checked="checkItem(checkBox.id)" ng-change="listActionsHandler(checkBoxes)">{{ checkBox.value }}
</div>
This is my ng-change function:
$scope.listActionsHandler = function(list) {
var has = [];
angular.forEach(list, function(item) {
if ( angular.isDefined(item.selected) && item.selected === true ) {
has.push(item.id);
}
});
formData['hobby'] = has;
}
and this is my ng-checked function that is used for showing checkbox checked according to database saved value.
var arr_checked_items = data.data.hobby;
var arraySize = arr_checked_items.length;
$scope.checkItem = function (id) {
var checked = false;
for(var i=0; i<= arraySize; i++) {
if(id == arr_checked_items[i]) {
checked = true;
}
}
return checked;
};
These function work properly on add and edit page, but problem is that when I doesn't apply any changes on checkbox and click on submit button it take blank value.
My question is that: if I does not apply any changes, it should take old value of checkbox and if I apply any changes, it should take new value of checkbox.

Please try with below code. I am not sure weather it is working or not.
$scope.checkItem = function (id) {
var checked = "";
for(var i=0; i<= arraySize; i++) {
if(id == arr_checked_items[i]) {
checked = "checked";
}
}
return checked;
};

remove value from the list

I have a list of checkboxes. Upon clicking on each of the checkboxes i am adding the value to the hidden variable. But the question is if I want to remove the value from the list upon unchecking the checkbox . How this piece cab be done
here is the hidden form variable
<input name="IDList[]" type="hidden" id="IDList" value="" />
and the jquery
$(".myCheckboxClass").change(function() {
var output = 0;
$(".myCheckboxClass").change(function() {
if ($(this).is(":checked")) {
output += ", " + $(this).val();
} else {
output = $.grep(output, function(value) {
return value != $(this).val();
});
}
$("#IDList").val(output);
});
});

Something like this: (demo) http://jsfiddle.net/wesbos/5N2kb/1/
we use an object called vals to store the info. ADding and removing as we check/uncheck.
var vals = {};
$('input[type=checkbox]').click(function() {
var that = $(this);
if (that.is(':checked')) {
console.log(this.name);
vals[this.name] = "In your Object";
}
else {
delete vals[this.name];
}
console.log(vals);
});

Following your logic, you could do this:
$('#IDList').data('value', []);
$(".myCheckboxClass").change(function() {
var list = $('#IDList').data('value');
if ($(this).is(":checked")) {
list.push($(this).val());
} else {
var indexToRemove = list.indexOf($(this).val());
list.splice(indexToRemove, 1);
}
$('#IDList').val(list);
});
But if you only care about the value of #IDList upon data submission or other actions, you probably want to consider an alternative approach: collating the checked values when you need them.
$('#form').submit(function() {
var list = $('input.myCheckboxClass:checked', this).map(function() {
return $(this).val();
}).get();
$('#IDList').val(list);
});
See both of the above in action: http://jsfiddle.net/william/F6gVg/1/.