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.
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);
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);
}
}
I've been learning javascript and jquery and I've encountered a problem when I'm trying to validate my form fields using a jquery function. The problem is its working fine the first two times it is called (when I press the update button for a specific element )and whenever I'm trying to call it a third time (by pressing the update button for the same element as earlier ) it is calling itself but I clearly did not mention any recursive calls and am not calling it within the function again. I'm not sure why it is calling itself. Kindly help me out. I will be attaching the fiddle. After triggering reset in main.updateData(Object.assign({}, main.newObject), keys); in the third time its showing the name empty error which shouldn't be happening.
I've tried giving breakpoints and inspecting the reason behind this weird behaviour but I couldn't
The name field should show an error only when it is empty but third time it is showing error even when it is not empty
FIDDLE
validateFormData: function(value, keys, idCount) {
var keyIndex = 0;
main.newObject[keys[keyIndex++]] = idCount;
if (value == "update") {
main.newObject[keys[0]] = $(".active-contact").attr('id');
//alert("new updated id is " + main.newObject[keys[0]]);
}
var validElementsCount = 0;
var alphabet_pattern = /^[a-z]+\s*/i;
var email_pattern = /[a-z]{0,}[0-9]{0,4}[.]{0,1}[0-9]{0,4}[a-z]{0,8}[0-9]{0,4}[#][a-z]{0,20}[.](com)/i;
var number_pattern = /^[0-9]{10}$/;
var website_pattern = /^(www)[.][a-z]{1,20}[.](com)$/i;
/*Validating the form inputs against the regex pattern*/
if ($("#employee-name").val() == "") {
$("#employee-name-error").text("name cannot be empty");
} else if (!alphabet_pattern.test($("#employee-name").val())) {
$("#employee-name-error").text("Only alphabets are allowed");
} else {
validElementsCount++;
$("#employee-name-error").text("");
main.newObject[keys[keyIndex++]] = $("#employee-name").val();
//alert("object is " + JSON.stringify(main.newObject[keys[keyIndex-1]]) + " key is " + keys[keyIndex-1]);
}
//employee email validation
if (email_pattern.test($("#employee-email").val()) || $("#employee-email").val() == "") {
$("#employee-email-error").text("");
validElementsCount++;
main.newObject[keys[keyIndex++]] = $("#employee-email").val();
//alert("object is " + JSON.stringify(main.newObject[keys[keyIndex - 1]]) + " key is " + keys[keyIndex - 1]);
} else {
$("#employee-email-error").text("Follow email pattern");
}
//employee mobile validation
if (number_pattern.test($("#employee-mobile").val()) || $("#employee-mobile").val() == "") {
$("#employee-mobile-error").text("");
validElementsCount++;
main.newObject[keys[keyIndex++]] = $("#employee-mobile").val();
//alert("object is " + JSON.stringify(main.newObject[keys[keyIndex - 1]]) + " key is " + keys[keyIndex - 1]);
} else {
$("#employee-mobile-error").text("Only 10 digit number is allowed");
}
//employee landline no validataion
if (number_pattern.test($("#employee-land-line").val()) || $("#employee-land-line").val() == "") {
$("#employee-land-line-error").text("");
validElementsCount++;
main.newObject[keys[keyIndex++]] = $("#employee-land-line").val();
//alert("object is " + JSON.stringify(main.newObject[keys[keyIndex - 1]]) + " key is " + keys[keyIndex - 1]);
} else {
$("#employee-land-line-error").text("Only 10 digit number is allowed");
}
//employee website validation
if (website_pattern.test($("#employee-website").val()) || $("#employee-website").val() == "") {
$("#employee-website-error").text("");
validElementsCount++;
main.newObject[keys[keyIndex++]] = $("#employee-website").val();
} else {
$("#employee-website-error").text("Follow website pattern");
}
main.newObject[keys[keyIndex++]] = $("#employee-address").val();
if (validElementsCount == 5) {
if (value == "add") {
main.addEmployeeClick(Object.assign({}, main.newObject));
$(".employee-details-form").trigger("reset");
} else if (value == "update") {
//alert("new object is " + JSON.stringify(Object.assign({}, main.newObject), keys));
main.updateData(Object.assign({}, main.newObject), keys);
$(".employee-details-form").trigger("reset");
}
}
},
You can add .off() before #update-employee-btn click event binding in line 34.
$("#update-employee-btn").off().click(....)
Let me know if it works for you as well.
I have 2 list. One bigger and one smaller. I have added infinite scroll to keep adding items from bigger list to smaller one.
// Bigger list (data from DB)
var data;
// Smaller list
$scope.projects = [];
$scope.$watch('projectSearch', function (val) {
if (typeof val !== 'undefined' && val !== "") {
//console.log("SEARCH: " + val);
for (var a = 0; a < data.length; a++) {
if (data[a].name.toLowerCase().indexOf(val) > -1) {
console.log("FOUND: " + data[a].name);
if($scope.projects.indexOf(data[a].name) === -1) {
console.log("PUSHED " + data[a].name);
$scope.projects.push( data[a]);
} else {
console.log("ALREADY IN " + data[a].name);
}
}
}
}
});
Search form:
<input id="search" ng-model="projectSearch" placeholder="Search ..."/>
The problem is it keeps pushing items to new list. It does not check this if statement correctly
if($scope.projects.indexOf(data[a].name) === -1) {
console.log("PUSHED " + data[a].name);
$scope.projects.push( data[a]);
}
you should check for data[a], not its property name
if($scope.projects.indexOf(data[a]) === -1) {
console.log("PUSHED " + data[a].name);
$scope.projects.push( data[a]);
}
also, you could remove data[a] after copy to make next search faster
$scope.projects should be type of string assuming data[a].name is string then your indexOf function properly
This JavaScript function is in the webpage I am calling:
function getChecked(button, form) {
var name;
for (i = 0; i < document.forms['CheckForm'].list.length; i++) {
name = "Check" + (i+0);
if(document.forms['CheckForm'].list[i].checked == true) {
if(name == "Check0")
form.Check0.value = "2437315";
else if(name == "Check1")
form.Check1.value = "2437104";
else if(name == "Check2")
form.Check2.value = "2434936";
else if(name == "Check3")
form.Check3.value = "2434574";
else if(name == "Check4")
form.Check4.value = "2433541";
else if(name == "Check5")
form.Check5.value = "2426021";
}
Sometimes there are 6 checks, sometimes 7 sometimes 3, I need help in counting how many Check(Somenumber) there is and then build an post field with Check0=0&Check1=0&Check2=0 and so on.
I am not setting each check to different value, I need to count how many Checkboxes there are and then set them to 0, I am using PHP to cURL the page.
In javascript you can do something like this:
var form = top.document.forms.CheckForm;
var numFormElements = form.length;
var counter = 0;
for( i = 0; i < numFormElements && !foundItem; i++ )
{
var obj = form[i];
if( obj.type == 'checkbox' )
{
counter++;
}
}
alert( counter ); // or whatever else
I should add... I don't think that there's any way that a server-side language can know the type of input. That information has to be grabbed from the user's web browser through a client-side means.
You could just simply build the string as you go. There are other ways to do this (which I would suggest using jQuery with it and cycling through using "this"). Here is what I would do with your existing code.
//set a string
var values = '';
if(name == "Check0") {
form.Check0.value = "2437315";
values += 'Check0=' + form.Check0.value;
} else if(name == "Check1") {
form.Check0.value = "2437315";
values += 'Check1=' + form.Check1.value;
}