i am analyzing my code using sonarqube and coming across an error in the following function:
$(function () {
$("#SSNCollection input[type=text]").keydown(function (evt) {
var IsNullEmptyText = "true";
var ssntxtArrayText = [];
var txtLength = 0;
$("#SSNCollection input[type=text]").each(function () {
var _tempValues = $(this).val().toString().replace(/[-]/g, '').trim();
if (!isNaN(this.value.toString().replace(/[-]/g, '').trim())) {
var _temptxtlength = this.value.toString().replace(/[-]/g, '').trim().length;
ssntxtArrayText.push(_tempValues);
}
});
$.each(ssntxtArrayText, function (index, value) {
if (value.length >= 0) {
$('#resultValidation').css({
'display': 'none',
});
return false;
} else {
$("#resultValidation").removeAttr("style");
}
});
});
});
the issue starts with the if (value.length >= 0) {. because an array length will always be >=0 the if and the following else are unnecessary.
thus i changed the statement to
$.each(ssntxtArrayText, function (index, value) {
$('#resultValidation').css({
'display': 'none',
});
return false;
});
my issue now is that i'm being told that i should use addClass('hidden') and removeClass('hidden')as i may need the else statement after all. but i'm not sure how i'd utilize those in this case. any ideas? thanks!
The hidden class is typically included in CSS frameworks such as Bootstrap. If you are not using Bootstrap (or you aren't sure), simply add the following CSS to your project css file.
.hidden { display:none!important; }
or inline html version
<style>.hidden { display:none!important; }</style>
On the note of using conditional logic - after reviewing your code, I can confirm that the value variable does not return an array. It does in fact return a string value which means that checking if the length is greater than or equal to 0 is appropriate. If you want to check the array length before running the $.each, simply wrap the $.each in an if(ssntxtArrayText.length > 0) statement. The following example shows proper implementation of using .addClass() & .removeClass() and checking if the array has any values before running.
if(ssntxtArrayText.length > 0) {
$.each(ssntxtArrayText, function (index, value) {
if (value.length >= 0) {
$('#resultValidation').addClass('hidden'); //hide
return false;
} else {
$("#resultValidation").removeClass('hidden'); //unhide
}
});
}
Note: If you are checking for valid social security numbers, I recommend ensuring that the value has a length of 9 characters. This would be done like so: if (value.length == 9) {
Related
I have been using the following code in jquery.
$('p').contents().filter(function() {
if ($(this).closest('#header , .header, #bottom').length > 0) {
return false;
}
return (this.nodeType === 3 && /\S/.test(this.nodeValue)); //Node.TEXT_NODE
}).each(function(i, tn) {
// push tn into array
});
I want this code to be written in vanilla javascript as I want to completely remove the dependency from jQuery.
I've tried something like this but it doesn't work. I can't find a substitute for JQuery's contents() and then the filter method which can help me achieve the above objective.
var nodelist = document.querySelectorAll('p');
//console.log(nodelist);
Array.from(nodelist).filter(function(node, i) {
var closest = nodelist[i].closest('#header , .header, #bottom');
if (closest) {
return false;
} else {
console.log(nodelist[i].nodeType)
return (nodelist[i].nodeType === 3 && /\S/.test(nodelist[i].nodeValue)); //Node.TEXT_NODE
}
}).forEach(function(tn, i) {
console.log(tn)
});
I need to compare all the selected attribute with variants on the AliExpress site.But my code is checking for only first key and adding class but when its come to 2nd and 3rd class its look like its not checking for them.I tried using length property but it says length is undefined.
function selectAttributes() {
chrome.storage.local.get(null, function(result) {
for (i = 0; i < result.ae_items.length; i++) {
console.log(result.ae_items[i].attributes);
for (var key in result.ae_items[i].attributes) {
$(".sku-property-list").each(function() {
$(".sku-property-item").each(function() {
if ($(this).has("img")) {
var title = $(this).children(".sku-property-image").children("img").attr("title");
if (title == result.ae_items[i].attributes[key]) {
$(this).addClass("selected");
}
} else {
var title = $(this).children(".sku-property-text").children("span").text();
alert(title);
}
});
});
}
}
});
}
This is comparing all the keys of object but the issue was with else block. Else block was not executing so I tried different ways and finally came out with decision that no need to use else block. Its working after removing else block
I have a javascript function to get a property from a style attribute.
I am then checking if the attribute is equal to a specific point.
However, when I console.log() the value of the attribute, it is as expected but when I test the attribute value, it returns as false?
here is my code and screenshots:
var $paywhirlWidget = $(".payment-signup-section .container .row .col-xs-12:first-child iframe#paywhirl_frame"),
$widgetRow = $(".payment-signup-section .container .row .col-xs-12:first-child");
$.fn.inlineStyle = function (prop) {
var styles = this.attr("style"),
value;
styles && styles.split(";").forEach(function (e) {
var style = e.split(":");
if ($.trim(style[0]) === prop) {
value = style[1];
}
});
return value;
};
function checkForChanges() {
if ($(window).width() < 998) {
console.log(Boolean($paywhirlWidget.inlineStyle("height").toLowerCase() == "620px"));
console.log($paywhirlWidget.inlineStyle("height").toLowerCase());
if ($paywhirlWidget.inlineStyle("height").toLowerCase() == "620px") {
console.log("im here!!");
$widgetRow.css("display", "none");
}
} else {
if ($paywhirlWidget.inlineStyle("height") == "300px") {
console.warn("im here too!!");
$widgetRow.css("display", "none");
}
}
}
setInterval(checkForChanges, 500);
As an example, here is the "620px" test, as you can see, the first console.log() returns false, even though the second one shows the value as being exactly what I am testing for!
This is really confusing as I cannot understand why a value that is clearly true is returned as false when Boolean tested.
It looks like your style attribute has a space at the start of the value. Try using trim:
$.trim( $paywhirlWidget.inlineStyle("height").toLowerCase() ) === "620px"
Or update your inlineStyle plugin so that it does the trimming:
value = $.trim( style[1] );
Simpler to just use jQuery height() which returns number representing pixels
if ($paywhirlWidget.height() == 620)
please help solve the problem.
live example is here: https://jsfiddle.net/oqc5Lw73/
i generate several tank objects:
var Tank = function(id) {
this.id = id;
Tank.tanks.push(this);
}
Tank.tanks = [];
for (var i = 0; i < 3; i++) {
new Tank(i);
}
Tank.tanks.forEach(function(tank, i, arr) {
console.log(tank);
});
console.log('summary tanks: ' + Tank.tanks.length);
after i delete tank with random index:
var tankDel = Math.floor(Math.random() * (3));
Tank.tanks.splice(tankDel, 1);
Tank.count -= 1;
Tank.tanks.forEach(function(tank, i, arr) {
console.log(tank);
});
console.log('summary tanks: ' + Tank.tanks.length);
i try check tanks massive. if tanks massive contain tank with property 'id' = 0 then i need display alert('tank with id 0 is dead').
but console output follow error message:
Uncaught SyntaxError: Illegal break statement
break is to break out of a loop like for, while, switch etc which you don't have here, you need to use return to break the execution flow of the current function and return to the caller. See similar post here: illegal use of break statement; javascript
Tank.tanks.forEach(function(tank, i, arr) {
if(tank.id == 0) {
tank0Dead = false;
return;
};
});
if(tank0Dead == true) {
alert('tank with id 0 is dead');
};
jsfiddle : https://jsfiddle.net/oqc5Lw73/6/
You can't quit from forEach using break. Just remove break, and it will work.
P.S: honestly, it is better to refactor that code:)
Your only problem is that you can't use the break; statement in a forEach function.
But you can in a for() loop, so here is the equivalent code with a for :
for (var i = 0; i < Tank.tanks.length; i++){
if (Tank.tanks[i].id == 0){
tank0Dead = false;
break;
}
}
https://jsfiddle.net/oqc5Lw73/5/
But I agree with #dimko1 about the idea of refactoring the code
You can not break a forEach callback, simply because it's a function.
Here's updated working jSfiddle
If you really want to break it, you can use exception like code below.
try {
[1,2,3].forEach(function () {
if(conditionMet) {
throw Error("breaking forEach");
}
});
} catch(e) {
}
Otherwise you can use jQuery's each() method. when it's callback returns false it stops.
jQuery.each([1,2,3], function () {
if(conditionMet) {
return false;
}
});
I have a small Angular app that I'm writing that makes use of Underscore to look over each object in an array, and remove the object if it does not match the keyword (user input).
$scope.search = function() {
$scope.posts = _.reject($scope.posts, function(p) {
var i = 0;
if ($scope.keywords.indexOf(p.author) < 0 ) {
i++;
}
if ($scope.keywords.indexOf(p.id) < 0 ) {
i++;
}
if(i > 0) {
return true;
}
});
};
As you can see I'm setting a counter, and then adding to the counter if the keyword is found in the index, then at the end checking the counter to return true or false to remove the object from the array. $scope.posts is array of objects with my data and $scope.keywords is the user input. I'm wanting to lookup the input from $scope.posts.author object and $scope.posts.id object.
If I remove one of the if statements the function performs as expected: everything not matching the keyword is removed from the array. However, as soon as I add another if statement to the function (as seen in my example above), ALL objects are removed from the array.
It looks to me as though filter might be a better fit here:
$scope.posts = _.filter($scope.posts, function(p) {
return $scope.keywords.indexOf(p.author) > -1 || $scope.keywords.indexOf(p.id) > -1;
});
Working example: http://jsfiddle.net/4xp3sm10/
Instead of filter or reject it would be even easier to do it the opposite way using _.where
var newArray = _.where($scope.posts, {keyword : $scope.keyword});
There you go, one line.
Edit:
If you are stuck on doing it this way, here's a way you could clean it up a little.
$scope.posts = _.reject($scope.posts, function(p) {
var check = false;
if ($scope.keywords.indexOf(p.author) < 0 ) {
check = true;
}
if ($scope.keywords.indexOf(p.id) < 0 ) {
check = true;
}
if(i > 0) {
return check;
}
});
};
No need to use an integer like that
Since you are rejecting rows you will want to make sure ALL conditions are true. Your code is just checking for either one to be true.
$scope.search = function() {
$scope.posts = _.reject($scope.posts, function(p) {
return (
($scope.keywords.indexOf(p.author) < 0 ) &&
($scope.keywords.indexOf(p.id) < 0 )
);
});
};