Can this code be shortened by looping through the array and replacing the number in input[name="shelf-1"] instead of having multiple if statements?
if(com_array[0] == "ON")
{
$('input[name="shelf-1"]').bootstrapSwitch('state', true);
}else{
$('input[name="shelf-1"]').bootstrapSwitch('state', false);
}
if(com_array[1] == "ON")
{
$('input[name="shelf-2"]').bootstrapSwitch('state', true);
}else{
$('input[name="shelf-2"]').bootstrapSwitch('state', false);
}
if(com_array[3] == "ON")
{
$('input[name="shelf-3"]').bootstrapSwitch('state', true);
}else{
$('input[name="shelf-3"]').bootstrapSwitch('state', false);
}
Assuming that you want to do this for all elements inside the array, you can use a forEach loop as so:
com_array.forEach( (element, index) => {
if(element == "ON") {
$(`input[name="shelf-${index + 1}"]`).bootstrapSwitch('state', true);
}else{
$(`input[name="shelf-${index + 1}"]`).bootstrapSwitch('state', false);
}
})
Updated for refactoring option:
If you want it to be cleaner and less repetitive, you can do away with the if-else statement, and use "element == 'ON' as the condition inside bootstrapSwitch:
com_array.forEach( (element, index) => {
$(`input[name="shelf-${index + 1}"]`).bootstrapSwitch('state', element == "ON");
})
And then you can refactor further to one line
com_array.forEach((element, index) => $(`input[name="shelf-${index + 1}"]`).bootstrapSwitch('state', element == "ON"))
com_array.forEach(function(com, index) {
$('input[name="shelf-' + (index + 1) + '"]').bootstrapSwitch(
'state',
com == 'ON'
)
}
);
I made it IE-11 compatible (i.e. no arrow functions and string template literals). Because I assume you have no transpilation step.
For the non-IE compatible answer (modern js) check the first comment to the question with code.
You could create a function and reuse it:
const bootstrapSwitch = (key, value) = {
$(`input[name="shelf-${key}"]`).bootstrapSwitch('state', value);
}
bootstrapSwitch(0, com_array[1] == "ON")
bootstrapSwitch(1, com_array[2] == "ON")
bootstrapSwitch(3, com_array[3] == "ON")
You can replace the numbers using the index of the array.
let com_array = ['ON','OFF','ON'];
for (index = 0; index < com_array.length; index++) {
if (com_array[index] === 'ON') {
$('input[name="shelf-'+(index+1)+'"]').bootstrapSwitch('state', true);
} else {
$('input[name="shelf-'+(index+1)+'"]').bootstrapSwitch('state', false);
}
}
Related
I was making a program that recoreded every keypress and pushed it to an array and it works fine. The problem is when I try to access the first element of the array and log it, it prints undefined. But the whole array logs fine.Why is it printing undefiened? I have added both console log of the array and the array item in my code and have commented besides them to indicate. Any help is appreciated. Thanks in advance.
EDIT: turn out what doesn't work is accessing the last item. I have updated the code above
var cacheW = []
var cacheA = []
var cacheD = []
var cacheS = []
// (B1) CAPTURE KEY STROKES
window.addEventListener("keydown", function(evt) {
if (evt.key == "w") {
cacheW.push('w');
//console.log("this: " + evt.key)
} else if (evt.key == "a") {
cacheA.push('a');
//console.log("this: " + evt.key)
} else if (evt.key == "d") {
cacheD.push('d');
//console.log("this: " + evt.key)
} else if (evt.key == "s") {
cacheS.push('s');
//console.log("this: " + evt.key)
}
});
window.addEventListener("keyup", function(evt) {
if (evt.key == "w") {
cacheW.push("!w");
//console.log("this: " + evt.key + " removed")
} else if (evt.key == "a") {
cacheA.push("!a");
//console.log("this: " + evt.key + " removed")
} else if (evt.key == "d") {
cacheD.push("!d");
//console.log("this: " + evt.key + " removed")
} else if (evt.key == "s") {
cacheS.push("!s");
//console.log("this: " + evt.key + " removed")
}
});
//works
setInterval(function() {
console.log(cacheW) //logs an array
}, 50)
//doesn't work
setInterval(function() {
console.log(cacheW[-1]) //logs undefined, should have logged the last element
}, 50)
Javascript access array items by their index. -1 is an invalid index. To access the last item, use arr[arr.length - 1].
Other languages such as python offer syntactic sugar to access items from the end of an array. JavaScript does not have such syntactic sugar. The closest which you can get is to write arr.slice(-1)[0], but this will create a temporary single-item array and then access the first item of this array.
In fact -1 is a property, not a valid index. Property names are first stringified, then added to the object (every array is an object):
a = [];
a[-1] = 42;
console.log(a); // [], array itself is still empty
console.log(a[-1]); // 42, property -1 on the object has value assigned
console.log(a['-1']); // 42, object property keys are always converted to string first
Instead of this:
//doesn't work
setInterval(function() {
console.log(cacheW[0])//logs undefined, should have logged the first element
}, 50)
This:
setInterval(function() {
if (cacheW.length > 0) {
console.log(cacheW[0]);
} else {
console.log("<empty>");
}
}, 50);
Update
If you want to print the last item:
setInterval(function() {
if (cacheW.length > 0) {
console.log(cacheW[cacheW.length-1]);
} else {
console.log("<empty>");
}
}, 50);
my javascript file for multiple email(multiple_emails.js plugin) is working fine with ng serve my code :
(function( $ ){
$.fn.multiple_emails = function(options) {
// Default options
var defaults = {
checkDupEmail: true,
theme: "Bootstrap",
position: "top",
invalid:"Invalid Email Id"
};
// Merge send options with defaults
var settings = $.extend( {}, defaults, options );
var deleteIconHTML = "";
if (settings.theme.toLowerCase() == "Bootstrap".toLowerCase())
{
deleteIconHTML = '<span class="glyphicon glyphicon-remove"></span>';
}
else if (settings.theme.toLowerCase() == "SemanticUI".toLowerCase() || settings.theme.toLowerCase() == "Semantic-UI".toLowerCase() || settings.theme.toLowerCase() == "Semantic UI".toLowerCase()) {
deleteIconHTML = '<i class="remove icon"></i>';
}
else if (settings.theme.toLowerCase() == "Basic".toLowerCase()) {
//Default which you should use if you don't use Bootstrap, SemanticUI, or other CSS frameworks
deleteIconHTML = '<i class="basicdeleteicon">Remove</i>';
}
return this.each(function() {
var to_id = this.id;
var orig_id=to_id;
console.log(to_id);
var arr = to_id.split('_');
to_id = arr[1];
console.log("to_id",to_id);
setTimeout(function(){
console.log($('.licls'+to_id).length);
if($('.licls'+to_id).length > 4){
$('#input_'+to_id).css('display','none');
}else {
$('#input_'+to_id).css('display','block');
}
},200);
//$orig refers to the input HTML node
var $orig = $(this);
var $list = $('<ul class="multiple_emails-ul" id=ul_'+to_id+' />'); // create html elements - list of email addresses as unordered list
console.log($(this).val());
if ($(this).val() != '' && IsJsonString($(this).val())) {
$.each(jQuery.parseJSON($(this).val()), function( index, val ) {
$list.append($('<li class="multiple_emails-email licls'+to_id+'"><span class="email_name" data-email="' + val.toLowerCase() + '">' + val + '</span></li>')
.prepend($(deleteIconHTML)
.click(function(e) { $(this).parent().remove(); refresh_emails(); e.preventDefault(); })
)
);
});
}
var $input = $('<input type="text" class="multiple_emails-input text-left" id= input_'+to_id+' />').on('keyup', function(e) { // input
console.log($(this).attr('id'));
$(this).removeClass('multiple_emails-error');
$('#'+orig_id).parent().find("label").remove();
var input_length = $(this).val().length;
var keynum;
if(window.event){ // IE
keynum = e.keyCode;
}
else if(e.which){ // Netscape/Firefox/Opera
keynum = e.which;
}
//if(event.which == 8 && input_length == 0) { $list.find('li').last().remove(); } //Removes last item on backspace with no input
// Supported key press is tab, enter, space or comma, there is no support for semi-colon since the keyCode differs in various browsers
if(keynum == 9 || keynum == 32 || keynum == 188) {
display_email($(this), settings.checkDupEmail);
}
else if (keynum == 13) {
if($('.licls'+to_id).length > 4){
$('#input_'+to_id).css('display','none');
}else {
$('#input_'+to_id).css('display','block');
}
display_email($(this), settings.checkDupEmail);
//Prevents enter key default
//This is to prevent the form from submitting with the submit button
//when you press enter in the email textbox
e.preventDefault();
}
}).on('blur', function(event){
if($('.licls'+to_id).length > 4){
$('#input_'+to_id).css('display','none');
}else {
$('#input_'+to_id).css('display','block');
}
$('#'+orig_id).parent().find("label").remove();
if ($(this).val() != '') { display_email($(this), settings.checkDupEmail); }
});
var $container = $('<div class="multiple_emails-container contnr_'+to_id+'" />').click(function() { $input.focus(); } ); // container div
// insert elements into DOM
if (settings.position.toLowerCase() === "top")
$container.append($list).append($input).insertAfter($(this));
else
$container.append($input).append($list).insertBefore($(this));
/*
t is the text input device.
Value of the input could be a long line of copy-pasted emails, not just a single email.
As such, the string is tokenized, with each token validated individually.
If the dupEmailCheck variable is set to true, scans for duplicate emails, and invalidates input if found.
Otherwise allows emails to have duplicated values if false.
*/
function display_email(t, dupEmailCheck) {
console.log(t.attr('id'));
//Remove space, comma and semi-colon from beginning and end of string
//Does not remove inside the string as the email will need to be tokenized using space, comma and semi-colon
var arr = t.val().trim().replace(/^,|,$/g , '').replace(/^;|;$/g , '');
//Remove the double quote
arr = arr.replace(/"/g,"");
//Split the string into an array, with the space, comma, and semi-colon as the separator
arr = arr.split(/[\s,;]+/);
var errorEmails = new Array(); //New array to contain the errors
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))#((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
for (var i = 0; i < arr.length; i++) {
var res_arr=JSON.parse($orig.val().toLowerCase().split(','))
//Check if the email is already added, only if dupEmailCheck is set to true
if ( dupEmailCheck === true && res_arr.indexOf(arr[i].toLowerCase()) != -1) {
if (arr[i] && arr[i].length > 0) {
new function () {
var existingElement = $list.find('.email_name[data-email=' + arr[i].toLowerCase().replace('.', '\\.').replace('#', '\\#') + ']');
existingElement.css('font-weight', 'bold');
setTimeout(function() { existingElement.css('font-weight', ''); }, 1500);
}(); // Use a IIFE function to create a new scope so existingElement won't be overriden
}
}
else if ( pattern.test(arr[i]) == true && res_arr.indexOf(arr[i].toLowerCase()) == -1) {
if($('#ulcls'+t.attr('id')).length < 4) {
$list.append($('<li class="multiple_emails-email licls'+to_id+'"><span class="email_name" data-email="' + arr[i].toLowerCase() + '">' + arr[i] + '</span></li>')
.prepend($(deleteIconHTML)
.click(function(e) { $(this).parent().remove(); refresh_emails(); e.preventDefault(); })
)
);
}
}
else
errorEmails.push(arr[i]);
}
// If erroneous emails found, or if duplicate email found
if(errorEmails.length > 0) {
t.val(errorEmails.join("; ")).addClass('multiple_emails-error');
t.after('<label for='+orig_id+' style="color:#cc5965;">'+settings.invalid+'</label>');
}else {
$('#'+orig_id).parent().find("label").remove();
t.val("");
}
refresh_emails ();
}
function refresh_emails () {
var emails = new Array();
var container = $orig.siblings('.multiple_emails-container');
container.find('.multiple_emails-email span.email_name').each(function() { emails.push($(this).html()); });
$orig.val(JSON.stringify(emails)).trigger('change');
if($('.licls'+to_id).length > 4){
$('#input_'+to_id).css('display','none');
}else {
$('#input_'+to_id).css('display','block');
}
}
function IsJsonString(str) {
try { JSON.parse(str); }
catch (e) { return false; }
return true;
}
$(document).ready(function(){
$('#input_'+to_id).on("cut copy paste",function(e) {
e.preventDefault();
});
});
return $(this).hide();
});
};
})(jQuery);
But when i compile it with ng build --prod it's gives TypeError: $(...).multiple_emails is not a function , if it's not working correctly any other tool to convert from JavaScript to typescript ?
i had convert js into typesript using online compiler but nothing happened.
solved!!!!
finally i figure out the problem. it is in angular-cli.json.when i place my multiple_email.js after jquery-3.1.1.min.js,jquery.validate.min.js then it works like charm...!!! #rajesh thanks
my variable todoHtmlLi is undefined, really can't get it why.. I had declared it early before assign it to some html. I use console.log() to check the priority value, it work just fine..
$(document).on('click', '#addTodoBtn', function () {
var todoDialog = {
state0: {
html: dialogContent,
buttons: {
Cancel: -1,
Add: 0
},
focus: 1,
submit: function (e, v, m, f) {
e.preventDefault();
var todoHtmlLi;
var todoNameVal;
var todoNoteVal;
//Task Name
todoNameVal = $("#todoName").val();
todoNameVal.trim();
//Note
todoNoteVal = $("#todoNote").val();
todoNoteVal.trim();
//Priority
priority = $("#priority").val();
if ($(priority) === 1) {
todoHtmlLi = "<li style='background:red'><a href='#'>" + todoNameVal + "<input type='checkbox'></a></li>"
} else if ($(priority) === 2) {
todoHtmlLi = "<li style='background:green'><a href='#'>" + todoNameVal + "<input type='checkbox'></a></li>"
} else if ($(priority) === 3) {
todoHtmlLi = "<li style='background:blue'><a href='#'>" + todoNameVal + "<input type='checkbox'></a></li>"
}
if (v == 0) {
if (todoNameVal !== "") {
$("div#tab").find('#todoUl').prepend(todoHtmlLi);
$.prompt.close();
} else {
$("#todoName").focus();
}
} else {
$.prompt.close();
}
}
}
}
$.prompt(todoDialog);
});
if(v == 0){ mean the 'yes' button is clicked
First: You only assign values to todoHtmlLi based on comparing the return value of a call to val() (which will be a String) to a Number using === (which checks type).
Since "1" === 1 is not true, you never assign a value.
Either use ==, compare to Strings or convert to a Number.
Second: You pass the value as an argument to $, so you get a jQuery object back instead of that String. This doesn't make any sense, so don't do that.
if (priority == 1){
if (priority === "1"){
if (parseInt(priority,10) === 1){
Because your conditions are wrong.
see ,
priority = $("#priority").val();
That returns a string.
Then
if($(priority) === 1){
That is wrong ,Since 1 never equals to "1",So no condition satisfied.and it;s undefined.
Your if condition should be
if(priority === "1"){
And also remaining if conditions needs to be change.
Is it possible to do something like this in JavaScript?
if (name == 'foo') {
exampleFunction('some_arg');
}
else if (name == 'bar') {
exampleFunction('another_arg');
}
for (i in exampleObject) {
else if (name == exampleObject[i].name) {
exampleFunction(exampleObject[i].arg);
}
}
else {
exampleFunction('default')
}
I tried it, but got an "unexpected keyword else on line 8" (the "else if" within the for loop). Is there another way to do this?
edit: updated this to use exampleObject[i] in the loop. My bad!
No. I think the best way to accomplish this is to move the for loop into an else block and do the following
if (name == 'foo') {
exampleFunction('some_arg');
}
else if (name == 'bar') {
exampleFunction('another_arg');
}
else {
var isFound = false;
for (i in exampleObject) {
if (name == exampleObject.name) {
exampleFunction(exampleObject.arg);
isFound = true;
}
}
if (!isFound) {
exampleFunction('default')
}
}
Note: It looks like there are other errors in this code. The for loop declares the i iteration variable but never actually uses it. Did you mean for the if check in the for loop to use i instead of name?
if (name == 'foo') {
exampleFunction('some_arg');
}
else if (name == 'bar') {
exampleFunction('another_arg');
}
else {
var isFound = false;
for (i in exampleObject) {
if (name == exampleObject.name) {
exampleFunction(exampleObject.arg);
isFound = true;
break;
}
}
if (!isFound) {
exampleFunction('default')
}
}
Here is the correct solution. It short circuts the if statements in the loop just like else if would short circuit. This is the same solution as #1 but it correctly short circuits.
The following code looks wrong to me , have the for loop inside if block
for (i in exampleObject) {
else if (name == exampleObject.name) {
exampleFunction(exampleObject.arg);
}
that is not possible. I would try an come up with a better example to show you how to do what you want, but honestly I am not sure what you want to do. The for loop is confusing me. Can you provide some more information?
In a word, no. You are terminating the if-statement block with the last brace before the for statement.
Well for one, shouldn't this:
for (i in exampleObject) {
else if (name == exampleObject.name) {
exampleFunction(exampleObject.arg);
}
}
be this:
for (i in exampleObject) {
else if (name == i.name) {
exampleFunction(i.arg);
}
}
Though i don't know much (if anything) about js, this is just a guess at something that isn't even the problem you're talking about.
Would you be adverse to doing it like this:
bit = 0;
if (name == 'foo') {
exampleFunction('some_arg');
}
else if (name == 'bar') {
exampleFunction('another_arg');
}
else {
bit = 1;
}
bit2 = 0;
while(bit == 1){
for (i in exampleObject) {
if (name == i.name) {
exampleFunction(i.arg);
bit = 0
bit2 = 1;
}
}
}
if(bit2 = 0){
exampleFunction('default');
}
?
Something like this may help?
found = false
if (name == 'foo') {
found = true
exampleFunction('some_arg');
}
else if (name == 'bar') {
found = true
exampleFunction('another_arg');
}
else {
for (i in exampleObject) {
if (name == i.name) {
exampleFunction(i.arg);
found = true
break;
}
}
}
if !found:
exampleFunction('default')
This just seems absurd to me. Should I use array instead or is there some other better solution?
$('.hoursRange').change(function() {
if ('0' == $(this).val())
{
$(this).val('00');
return false;
}
if ('1' == $(this).val())
{
$(this).val('01');
return false;
}
if ('2' == $(this).val())
{
$(this).val('02');
return false;
}
if ('3' == $(this).val())
{
$(this).val('03');
return false;
}
if ('4' == $(this).val())
{
$(this).val('04');
return false;
}
if ('5' == $(this).val())
{
$(this).val('05');
return false;
}
if ('6' == $(this).val())
{
$(this).val('06');
return false;
}
if ('7' == $(this).val())
{
$(this).val('07');
return false;
}
});
Just use a regex:
$(this).val($(this).val().replace(/^[0-7]$/, "0$&"));
if($(this).val().length == 1) {
$(this).val('0' + $(this).val());
}
Or just pad all of the single digits with zeros on page load, rather than onchange:
$('.hoursRange option').filter(function() {
return $(this).val().length == 1;
}).each(function() {
$(this).val('0' + $(this).val());
});
Demo: http://jsfiddle.net/WKdWq/
$(this).val('0' + $(this).val());?
var value = $(this).val();
if ($(this).val().length < 2) {
$(this).val('0' + value);
}
$('.hoursRange').change(function() {
if (parseInt($(this).val(),10)<10) $(this).val("0"+parseInt($(this).val(),10));
}
A function for zero-padding is available from this answer. Using that, you can simply do:
$('.hoursRange').change(function() {
$(this).val( zerofill($(this).val(), 2) );
}
$('.hoursRange').change(function() {
$(this).val( $(this).val().replace(/(\b\d\b)/,'0$1') );
}
I don't see you needing any conditional statements or additional expensive jQuery calls in here.
I am not an expert on jQuery but it is awkward.
I would check boundary condition (0<=$(this).val()<=7) and if not met return false. Otherwise
var v = $(this).val();
v='0'+v;
$(this).val(v);