I've got an in page text search using JS, which is here:
$.fn.eoTextSearch = function(pat) {
var out = []
var textNodes = function(n) {
if (!window['Node']) {
window.Node = new Object();
Node.ELEMENT_NODE = 1;
Node.ATTRIBUTE_NODE = 2;
Node.TEXT_NODE = 3;
Node.CDATA_SECTION_NODE = 4;
Node.ENTITY_REFERENCE_NODE = 5;
Node.ENTITY_NODE = 6;
Node.PROCESSING_INSTRUCTION_NODE = 7;
Node.COMMENT_NODE = 8;
Node.DOCUMENT_NODE = 9;
Node.DOCUMENT_TYPE_NODE = 10;
Node.DOCUMENT_FRAGMENT_NODE = 11;
Node.NOTATION_NODE = 12;
}
if (n.nodeType == Node.TEXT_NODE) {
var t = typeof pat == 'string' ?
n.nodeValue.indexOf(pat) != -1 :
pat.test(n.nodeValue);
if (t) {
out.push(n.parentNode)
}
}
else {
$.each(n.childNodes, function(a, b) {
textNodes(b)
})
}
}
this.each(function() {
textNodes(this)
})
return out
};
And I've got the ability to hide columns and rows in a table. When I submit a search and get the highlighted results, there would be in this case, the array length of the text nodes found would be 6, but there would only be 3 highlighted on the page. When you output the array to the console you get this:
So you get the 3 tags which I was expecting, but you see that the array is actually consisting of a [span,undefined,span,undefined,undefined,span]. Thus giving me the length of 6.
<span>
<span>
<span>
[span, undefined, span, undefined, undefined, span]
I don't know why it's not stripping out all of the undefined text nodes when I do the check for them. Here's what I've got for the function.
performTextSearch = function(currentObj){
if($.trim(currentObj.val()).length > 0){
var n = $("body").eoTextSearch($.trim(currentObj.val())),
recordTitle = "matches",
arrayRecheck = new Array(),
genericElemArray = new Array()
if(n.length == 1){
recordTitle = "match"
}
//check to see if we need to do a recount on the array length.
//if it's more than 0, then they're doing a compare and we need to strip out all of the text nodes that don't have a visible parent.
if($(".rows:checked").length > 0){
$.each(n,function(i,currElem){
if($(currElem).length != 0 && typeof currElem != 'undefined'){
if($(currElem).closest("tr").is(":visible") || $(currElem).is(":visible")){
//remove the element from the array
console.log(currElem)
arrayRecheck[i] = currElem
}
}
})
}
if(arrayRecheck.length > 0){
genericElemArray.push(arrayRecheck)
console.log(arrayRecheck)
}
else{
genericElemArray.push(n)
}
genericElemArray = genericElemArray[0]
$("#recordCount").text(genericElemArray.length + " " +recordTitle)
$(".searchResults").show()
for(var i = 0; i < genericElemArray.length; ++i){
void($(genericElemArray[i]).addClass("yellowBkgd").addClass("highLighted"))
}
}
else{
$(".highLighted").css("background","none")
}
}
If you look at the code below "//check to see if we need to do a recount on the array length. ", you'll see where I'm stripping out the text nodes based off of the display and whether or not the object is defined. I'm checking the length instead of undefined because the typeof == undefined wasn't working at all for some reason. Apparently, things are still slipping by though.
Any idea why I'm still getting undefined objects in the array?
My apologies for such a big post!
Thanks in advance
I've modified your eoTextSearch() function to remove dependencies on global variables in exchange for closures:
$.fn.extend({
// helper function
// recurses into a DOM object and calls a custom function for every descendant
eachDescendant: function (callback) {
for (var i=0, j=this.length; i<j; i++) {
callback.call(this[i]);
$.fn.eachDescendant.call(this[i].childNodes, callback);
}
return this;
},
// your text search function, revised
eoTextSearch: function () {
var text = document.createTextNode("test").textContent
? "textContent" : "innerText";
// the "matches" function uses an out param instead of a return value
var matches = function (pat, outArray) {
var isRe = typeof pat.test == "function";
return function() {
if (this.nodeType != 3) return; // ...text nodes only
if (isRe && pat.test(this[text]) || this[text].indexOf(pat) > -1) {
outArray.push(this.parentNode);
}
}
};
// this is the function that will *actually* become eoTextSearch()
return function (stringOrPattern) {
var result = $(); // start with an empty jQuery object
this.eachDescendant( matches(stringOrPattern, result) );
return result;
}
}() // <- instant calling is important here
});
And then you can do something like this:
$("body").eoTextSearch("foo").filter(function () {
return $(this).closest("tr").is(":visible");
});
To remove unwanted elements from the search result. No "recounting the array length" necessary. Or you use each() directly and decide within what to do.
I cannot entirely get my head around your code, but the most likely issue is that you are removing items from the array, but not shrinking the array afterwards. Simply removing items will return you "undefined", and will not collapse the array.
I would suggest that you do one of the following:
Copy the array to a new array, but only copying those items that are not undefined
Only use those array items that are not undefined.
I hope this is something of a help.
Found the answer in another post.
Remove empty elements from an array in Javascript
Ended up using the answer's second option and it worked alright.
Related
I honestly don't even know how to search for this question (what search param to write) but either way its bit weird issue and I am desperate for help.
So I am trying to do something simple, event sends "form-change" and when it does, we set new value in "this.data" object. Fairly simple. I don't expect this.data to be reactive I just want to update it.
// Find our data object which we want to update/change
if (form.field.includes('.')) {
let find = form.field.split('.'), level = this.data;
for (let index = 0; index < find.length; index++) {
if (level[find[index]] !== undefined) {
level = level[find[index]];
} else {
level = undefined;
}
}
if (level !== undefined)
level = setFieldData();
}
This is fairly simple, we have name of field "inspect.book" and when update comes (Event) we just use dots to split into multi tree and update "this.data.inspect.book" to new value. But it does not work. Value does not change.
But the value from actual this.data.inspect.book comes out just fine using:
console.log(level);
However, if I do this:
this.data[ form.field.split( '.' )[ 0 ] ][ form.field.split( '.' )[ 1 ] ] = setFieldData();
It works fine. So "reference" to variable does not work... how is this possible? Looks like a bug in javascript or is it something with vue/reactivity?
Does anyone have better idea how to get this to work?
So you are trying to update form data using to notation ?
i would do something like that :
_update(fieldName, value) {
// We split segments using dot notation (.)
let segments = fieldName.split(".");
// We get the last one
let lastSegment = segments.pop();
// We start with this.data as root
let current = this.data
if(current) {
// We update current by going down each segment
segments.forEach((segment) => {
current = current[segment];
});
// We update the last segment once we are down the correct depth
current[lastSegment] = val;
}
},
if i take your example :
if (form.field.includes('.')) {
let find = form.field.split('.'), level = this.data;
for (let index = 0; index < find.length - 1; index++) {
if (level[find[index]] !== undefined) {
level = level[find[index]];
} else {
level = undefined;
}
}
if (level !== undefined)
level[find.pop()] = setFieldData();
}
i replaced find.length by find.length - 1
and replaced level = setFieldData() by level[find.pop()] = setFieldData()
you should update the property of the object, without actually overriding the value,
because if you override the value, the original value will not get updated.
i've working code(below) to read xml in google docs. It works greate if xml looks like this(part i'm interested in):
<row orderID="4452813795" charID="96255569" stationID="60011752" volEntered="1" volRemaining="1" minVolume="1" orderState="0" typeID="11134" range="32767" accountKey="1002" duration="90" escrow="0.00" price="20000.00" bid="0" issued="2016-02-28 02:05:29"/>
What i want is volRemaining value and my code returns 1. But if xml looks like this:
<row orderID="4452813795" charID="96255569" stationID="60011752" volEntered="1" volRemaining="1" minVolume="1" orderState="0" typeID="11134" range="32767" accountKey="1002" duration="90" escrow="0.00" price="20000.00" bid="0" issued="2016-02-28 02:05:29"/>
<row orderID="4452814032" charID="96255569" stationID="60011752" volEntered="1" volRemaining="1" minVolume="1" orderState="0" typeID="11134" range="32767" accountKey="1002" duration="90" escrow="0.00" price="20000.00" bid="0" issued="2016-02-28 02:05:47"/>
Code still returns 1. What i need is to add these values from both rows so that code returns 2 in this case(there may be more rows like these and code need to check if orderState="0").
This is my code:
function getLevelByTypeFromRowset(rowset, id)
{
var rows = rowset.getChildren("row");
var level=null;
var level2=0;
for (var i=0;level==null && i<rows.length;i++)
{
var row=rows[i];
var typeIdAttr=row.getAttribute("typeID");
if (typeIdAttr && typeIdAttr.getValue()==id && row.getAttribute("orderState").getValue()==0)
{
level2=level2 + row.getAttribute("volRemaining").getValue();
if (i = rows.length){
level=level2;
}
}
}
return level;
}
function TradeVolume(id) {
//id=3389;
var idd="orders";
var url = "http://some.url.com";
var document = readXml(url);
var level = null;
var rowsets = document.getRootElement().getChild("result").getChildren("rowset");
for (var i=0;level==null && i<rowsets.length;i++)
{
var rowset=rowsets[i];
var typeIdAttr=rowset.getAttribute("name");
if (typeIdAttr && typeIdAttr.getValue()==idd)
{
level=getLevelByTypeFromRowset(rowset, id);
}
}
if (level==null){
level = 0
}
return parseFloat(level);
}
I've been trying to do it 3 hours and can't came up with any idea...
Edit:
Working code:
function getLevelByTypeFromRowset(rowset, id)
{
var rows = rowset.getChildren("row");
var level=0;
for (var i=0;i<rows.length;i++)
{
var row=rows[i];
var typeIdAttr=row.getAttribute("typeID");
if (typeIdAttr && typeIdAttr.getValue()==id && row.getAttribute("orderState").getValue()==0)
{
level=parseInt(level) + parseInt(row.getAttribute("volRemaining").getValue());
}
}
return level;
}
One problem is if (i = rows.length). You are making an assignment there, where you apparently meant to test for equality. The assignment causes the loop condition to be false, so the loop terminates early.
So you could change the if condition to if (i == rows.length). However, that test will never be true, since the loop condition includes && i<rows.length. Maybe you meant to say if (i == rows.length - 1), so that the body of the if would be executed on the last pass through the loop? But it would only happen if the last row satisfies
(typeIdAttr && typeIdAttr.getValue()==id && row.getAttribute("orderState").getValue()==0)
which I don't think is what you want.
Really what I expect you meant was to move the
if (i == rows.length - 1) {
level = level2;
}
outside of the block of the preceding if. But a simpler way of doing the same thing would be to remove this if block completely, and change
return level;
to
return level2;
I want to have an array with values, one 'true' for each object in my model.
As you can see in my JSFiddle - Hardcoded working, I have currently hard coded the values, and then it works, i.e. the "level 2" tables being collapsed from start.
$scope.dayDataCollapse = [true, true, true, true, true, true];
$scope.dayDataCollapseFn = function () {
for (var i = 0; $scope.storeDataModel.storedata.length - 1; i += 1) {
$scope.dayDataCollapse.append('true');
}
};
But when I replace the hardcoded with an empty array and a function (shown above) to populate it for me, meaning appending 'true' for each store in the storeDataModel, it fails. All level 2 tables are expanded from start, but can collapse them by clicking two times (one for adding value to array and one for collapsing).
Have also tried with a "real" function...:
function dayDataCollapseFn() {
for (var i = 0; $scope.storeDataModel.storedata.length - 1; i += 1) {
$scope.dayDataCollapse.append('true');
}
};
...but I can't get the $scope.dayDataCollapse to populate initally.
How can I solve this?
Your for loop is incorrect. The middle expression is evaluated for true/false, but you've just coded it to be a constant value (well, constant for any invocation of the function anyway). Try this:
function dayDataCollapseFn() {
for (var i = 0; i < $scope.storeDataModel.storedata.length; i += 1) {
$scope.dayDataCollapse.push(true);
}
};
Your function would have done nothing at all if the model had one element, and locked up the browser with a "slow script" warning if the model had zero or more than one elements.
Also note that you should use true, the boolean constant, and not the string 'true'.
edit — also note that it's .push(), not .append()
#Pointy got me in right direction...thanks! =)
...and then I solved the last thing.
I forgot that I had used a negation, i.e. data-ng-show="!dayDataCollapse[$index]" since I was using collapse="dayDataCollapse[$index]" first. Then I removed the collapse since it didn't work well together.
Anyhow...since I removed the bang (!) I could also use false instead of true and then of course switch the booleans in the $scope.selectTableRow() function as well.
The last thing was that I had if-else, where the if statement checked if dayDataCollapse was undefined and then an else for the logic. Of course the logic did not trigger first time as it was undefined.
Functions that made it work...:
$scope.dayDataCollapseFn = function () {
$scope.dayDataCollapse = [];
for (var i = 0; i < $scope.storeDataModel.storedata.length; i += 1) {
$scope.dayDataCollapse.push(false);
}
};
$scope.selectTableRow = function (index, storeId) {
if ($scope.dayDataCollapse === undefined) {
$scope.dayDataCollapseFn();
}
if ($scope.tableRowExpanded === false && $scope.tableRowIndexCurrExpanded === "" && $scope.storeIdExpanded === "") {
$scope.tableRowIndexPrevExpanded = "";
$scope.tableRowExpanded = true;
$scope.tableRowIndexCurrExpanded = index;
$scope.storeIdExpanded = storeId;
$scope.dayDataCollapse[index] = true;
} else if ($scope.tableRowExpanded === true) {
if ($scope.tableRowIndexCurrExpanded === index && $scope.storeIdExpanded === storeId) {
$scope.tableRowExpanded = false;
$scope.tableRowIndexCurrExpanded = "";
$scope.storeIdExpanded = "";
$scope.dayDataCollapse[index] = false;
} else {
$scope.tableRowIndexPrevExpanded = $scope.tableRowIndexCurrExpanded;
$scope.tableRowIndexCurrExpanded = index;
$scope.storeIdExpanded = storeId;
$scope.dayDataCollapse[$scope.tableRowIndexPrevExpanded] = false;
$scope.dayDataCollapse[$scope.tableRowIndexCurrExpanded] = true;
}
}
Updated JSFiddle
I'm having an issue with a function I've written to "clean" up, see the code below and I'll explain how it works underneath.
clean: function (e) {
var
els = null,
i = 0;
if (e === undefined) {
e = this.cont;
}
els = e.getElementsByTagName('*');
for (i=0;i<els.length;i++) {
if (els[i].className.search('keep') === -1) {
e.removeChild(els[i]);
}
}
return this;
},
The argument e is a dom element, if it isn't supplied this.cont is also a dom element stored earlier in the whole function and e is defaulted to it.
The function loops through all of the child elements and checks it doesn't have the class keep (fairly obvious what this does) and removes any that don't match.
It all seemed to be working but I have an element which has 2 images and 2 inputs none with the class 'keep' but the variable i only gets to 2 and the loop stops (it should reach 4 and remove all four elements)
any help would be greatly appreciated.
/* UPDATE */
Thanks to #pimvb and and #Brett Walker the final code which works great is below.
clean: function (e) {
var
els = null,
i = 0;
if (e === undefined) {
e = this.cont;
}
els = e.getElementsByTagName('*');
i = els.length;
while (i--) {
if (els[i].className.search('keep') === -1) {
els[i].parentNode.removeChild(els[i]);
}
}
return this;
},
The .getElementsByTagName function returns a NodeList which is basically an array but is 'live', which means it's updated automatically if you e.g. remove a child. So when iterating, els.length is changing, resulting in being 2 when you remove 2 children (there are 4 - 2 = 2 left). When having removed 2 children, i == 2 so the loop will end prematurely to what you expect.
To circumvent this and make it a 'static' array, you can convert it into an array like this, which does not update itself:
els = [].slice.call(e.getElementsByTagName('*')); // [].slice.call is a trick to
// convert something like a NodeList
// into a static, real array
As Brett Walker pointed out, you can also iterate backwards, like this:
http://jsfiddle.net/pimvdb/cYKxU/1/
var elements = document.getElementsByTagName("a"),
i = elements.length;
while(i--) { // this will stop as soon as i == 0 because 0 is treated as false
var elem = elements[i]; // current element
if(elem.className == "test") // remove if it should be removed
elem.parentNode.removeChild(elem);
}
This will start at the last element. The .length still gets updated (i.e. becomes less), but this does not matter as you only used it at the beginning, and not during iterating. As a result, you don't suffer from this 'quirk'.
I'm trying to set up an IF statement if a value is contained within an array.
I've found some code which claimed to work but it doesn't seem to be.
var myAsi = ['01','02','24OR01','30De01','9thC01','A.Hu01','A01','AACAMSTE','ABBo01','ABBo02','ABC-01','ACCE01','Acce02','AceR01','h+dm01','Merr02','Ofak01','Wage01','Youn01'];
Array.prototype.find = function(searchStr) {
var returnArray = false;
for (i=0; i<this.length; i++) {
if (typeof(searchStr) == 'function') {
if (searchStr.test(this[i])) {
if (!returnArray) { returnArray = [] }
returnArray.push(i);
}
} else {
if (this[i]===searchStr) {
if (!returnArray) { returnArray = [] }
returnArray.push(i);
}
}
}
return returnArray;
}
var resultHtml = '';
resultHtml+='<table style ="width: 400px">';
resultHtml+='<tr colspan="2">';
resultHtml+='<td colspan="2">';
resultHtml+='<b><font color = "Red">(Client Code)</font><br><font color = "green">(Company Name)</font></b>';
resultHtml+='</td>';
resultHtml+='</tr>';
$.each(data, function(i,item){
resultHtml+='<div class="result">';
resultHtml+='<tr>';
if (notFound=myAsi.find("'"+item.code+"'") == false) {
resultHtml+='<td>';
}
else {
resultHtml+='<td bgcolor=#D8D8D8>';
}
resultHtml+='<font color = "red">'+item.code+'</font><br>';
resultHtml+='<font color = "green">'+item.content+'</font></td>';
resultHtml+='<td style ="width: 80px">Remove - ';
resultHtml+='Add';
resultHtml+='</td>';
resultHtml+='</tr>';
resultHtml+='</div>';
});
resultHtml+='</table>';
The item.code cycles through and I need an IF statement to tell me if it appears within the array.
Any help would be great.
If you only want to find if an item is in an array you could use a simpler function than that. For eg. the jQuery implementation:
// returns index of the element or -1 if element not present
function( elem, array ) {
if ( array.indexOf ) {
return array.indexOf( elem );
}
for ( var i = 0, length = array.length; i < length; i++ ) {
if ( array[ i ] === elem ) {
return i;
}
}
return -1;
},
This uses the native browser implementation of indexOf if available (all browsers except IE I think), otherwise a manual loop.
Try removing the apostrophes from your find() call. eg
notFound=myAsi.find(item.code)
Though actually, for your purposes see this example which uses this function....
Array.prototype.find = function(searchStr) {
for (var i=0; i<this.length; i++) {
if (this[i]==searchStr) return true;
};
return false;
};
And as an aside - Be very careful about using var before using a variable - otherwise you create a global variable (which you probably don't want). ie the line in your original function....
for (i=0; i<this.length; i++)
i is now global...
Array.prototype.contains = function(value, matcher) {
if (!matcher || typeof matcher !== 'function') {
matcher = function(item) {
return item == value;
}
}
for (var i = 0, len = this.length; i < len; i++) {
if (matcher(this[i])) {
return true;
}
}
return false;
};
This returns true for elements in the array that statisfy the conditions defined in matcher. Implement like this:
var arr = ['abc', 'def', 'ghi']; // the array
var valueToFind= 'xyz'; // a value to find in the array
// a function that compares an array item to match
var matcher = function(item) {
return item === matchThis;
};
// is the value found?
if (arr.contains(valueToFind, matcher)) {
// item found
} else {
// item not found
}
UPDATES:
Changed the contains method to take a value and an optional matcher function. If no matcher is included, it will do a simple equality check.
Test this on jsFiddle.net: http://jsfiddle.net/silkster/wgkru/3/
You could just use the builtin function
['a','b','c'].indexOf('d') == -1
This behavior was mandated in the javascript specification from over 6 years ago. Though I gave up on Internet Explorer for these reasons at around IE8, because of this incredibly poor support for standards. If you care about supporting very old browsers, you can use http://soledadpenades.com/2007/05/17/arrayindexof-in-internet-explorer/ to tack on your own custom Array.indexOf
I don't recall IE9 supporting [].indexOf, but Microsoft claims it does: http://msdn.microsoft.com/en-us/library/ff679977(v=VS.94).aspx
The standard way to determine the index of the first occurence of a given value in an array is the indexOf method of Array objects.
This code checks if it this method is supported, and implements it if not, so that it is available on any Array object:
if(Array.prototype.indexOf==null)
Array.prototype.indexOf = function(x){
for(var i=0, n=this.length; i<n; i++)if(this[i]===x)return i;
return -1;
};
Now myArray.indexOf(myValue) returns the first index of myValue in myArray, or -1 if not found.