We Keep Coding

How do I change the color of each of p in a div if a condition is met?

How can I change the background color of a particular
<p class="line3" style="color:green;margin-left:60px">' + SeatsLeft + ' seats left </p>
when its employee.managerId is greater than 19.
The data loads from my database. This is what I've tried and it doesn't work
$.each(employees, function(index, employee) {
var SeatsLeft = 20 - employee.managerId;
$('#employeeList').append('<li>' +
'<img src="js/citybus.png" class="list-icon"/>' +
'<p class="line1">' + employee.firstName + '</p>' +
'<p class="line2">' + difference + '</p>' +
'<p class="line3" style="color:green;margin-left:60px">' + SeatsLeft + ' seats left </p>' +
'<button id="bookSea" class="bubble" data-difference="' + hoursMin + '" data-route="' + employee.firstName + '" data-busnum="' + employee.lastName + '" onclick="bookSeat(this);">' + '<center><img src="js/seat.jpg" style="height:15px;width:15px;"/></center>' + '</button>' +
'<button data-diff="' + hoursMin + '" data-name="' + employee.firstName + '" class="bubble" style="margin-right:30px" onclick="setReminder(this);">' + '<center><img src="js/bell.png" style="height:15px;width:15px;"/></center>' + '</button></li>');
var x = document.getElementsByClassName("line3");
var i;
for (i = 0; i < x.length; i++) {
if (employee.managerId > 19) {
x[i].style.color = "red";
}
}
});

$.each(employees, function(index, employee) {
var SeatsLeft = 20 - employee.managerId;
var color = employee.managerId > 19 ? 'red' : 'green';
$('#employeeList').append('<li>' +
'<img src="js/citybus.png" class="list-icon"/>' +
'<p class="line1">' + employee.firstName + '</p>' +
'<p class="line2">' + difference + '</p>' +
'<p class="line3" style=' "color:' + color + ';margin-left:60px">' + SeatsLeft + ' seats left </p>' +
'<button id="bookSea" class="bubble" data-difference="' + hoursMin + '" data-route="' + employee.firstName + '" data-busnum="' + employee.lastName + '" onclick="bookSeat(this);">' + '<center><img src="js/seat.jpg" style="height:15px;width:15px;"/></center>' + '</button>' +
'<button data-diff="' + hoursMin + '" data-name="' + employee.firstName + '" class="bubble" style="margin-right:30px" onclick="setReminder(this);">' + '<center><img src="js/bell.png" style="height:15px;width:15px;"/></center>' + '</button></li>');
});

Perhaps you meant
if (SeatsLeft === 0) $(".line3").css("color","red");
or
'<p class="line3" style="color:'+(SeatsLeft===0?"red":"green")+';margin-left:60px">'
+ SeatsLeft + ' seat'+(SeatsLeft===1?"":"s")+' left </p>'

NodeJS SQL returning 'Cannot read property 'x' of undefined' in for loop

I'm trying to run through each post in a MySQL table, get the username, run a separate query in a separate table getting information from that user such as profile img, etc and then put it in JSON.
This work up until I try and add another query in for getting the user information, as then it returns
'Cannot read property 'postId' of undefined'
I've tried many workarounds to this, but none of them have worked.
Here's my code:
var postLocation = req.query.postLocation.replace(regex, escaper);
connection.query("SELECT * FROM `posts` WHERE (postLocation = '" + postLocation + "' OR postLocation = 'Global') AND postDeleted = 'no' ORDER BY postId DESC;", function (err1, rows1, fields1) {
if(err1){
res.send(err1);
} else if(!rows1.length){
res.send('{"rapids": [{"response": "This post does not exist."}]}');
} else {
var queryString = "";
var queryTimes = 0;
var profileURL = null;
for(i = 0; i < rows1.length; i++){
queryTimes++;
connection.query("SELECT * FROM `users` WHERE username = '" + rows1[0].postBy + "' ORDER BY postId DESC;", function (err2, rows2, fields2) {
queryString = queryString + '{"postId": "' + rows1[i].postId + '", "post": "' + rows1[i].post + '", "postBy": "' + rows1[i].postBy + '", "postLikes": ' + rows1[i].postLikes + ', "postByProfileImgURL": "' + rows1[i].postByProfileImgURL + '", "postDate": "' + rows1[i].postDate + '", "postViews": ' + rows1[i].postViews + ', "postDeleted": "' + rows1[i].postDeleted + '"';
if(queryTimes == rows1.length){
queryString = queryString + '}';
} else {
queryString = queryString + '}, ';
}
});
}
res.send('{"rapids": [' + queryString + ']}');
}
});
Thanks!

rows1[i].postId is in a different context there. You'll have to pass it into the context that your inner query runs in.
var postLocation = req.query.postLocation.replace(regex, escaper);
connection.query("SELECT * FROM `posts` WHERE (postLocation = '" + postLocation + "' OR postLocation = 'Global') AND postDeleted = 'no' ORDER BY postId DESC;", function (err1, rows1, fields1) {
if(err1){
res.send(err1);
} else if(!rows1.length){
res.send('{"rapids": [{"response": "This post does not exist."}]}');
} else {
var queryString = "",
queryTimes = 0,
profileURL = null;
for(i = 0; i < rows1.length; i++){
queryTimes++;
connection.query("SELECT * FROM `users` WHERE username = '" + rows1[0].postBy + "' ORDER BY postId DESC;", function (rows1, err2, rows2, fields2) {
queryString = queryString + '{"postId": "' + rows1[i].postId + '", "post": "' + rows1[i].post + '", "postBy": "' + rows1[i].postBy + '", "postLikes": ' + rows1[i].postLikes + ', "postByProfileImgURL": "' + rows1[i].postByProfileImgURL + '", "postDate": "' + rows1[i].postDate + '", "postViews": ' + rows1[i].postViews + ', "postDeleted": "' + rows1[i].postDeleted + '"';
if(queryTimes == rows1.length){
queryString = queryString + '}';
} else {
queryString = queryString + '}, ';
}
}.bind(this, rows1));
}
res.send('{"rapids": [' + queryString + ']}');
}
});

How to restart a DataTable created with an append in JQuery?

I have an issue at restarting my datatable, when I fill my datatable according a web service results, and it fills correctly but at the moment to make a research by clicking the (Search Button) again the datatable contains the old header and it shows the results but the function does not include the results into the DataTable and it shows 1 to 1 of 1 entries, which is correspondence to old searching.
This is my JavaScript:
$.ajax({
type: 'POST',
url: '/enrollment.asmx/MethodSearch',
data: "{ 'esiidVal': " + $("#esiID").val() + "}",
contentType: "application/json; utf-8",
dataType: "json",
success: function (data) {
$("#loadingDiv").hide();
//$("#data").append("<table id='tbSearch' class='table table-hover display'><thead><tr><th>City</th><th>Zip</th><th>Address</th><th>State</th><th>Location ID</th></tr></thead><tbody><tr id='" + data.d.City + data.d.Zip + data.d.Adds + "'><td id='" + data.d.City + data.d.Zip + data.d.Adds + "/city'>" + data.d.City + "</td><td id='" + data.d.City + data.d.Zip + data.d.Adds + "/zip'>" + data.d.Zip + "</td><td id='" + data.d.City + data.d.Zip + data.d.Adds + "/adds'>" + data.d.Adds + "</td><td id='" + data.d.City + data.d.Zip + data.d.Adds + "/state'>" + data.d.State + "</td><td id='" + data.d.City + data.d.Zip + data.d.Adds + "/location'>" + data.d.SNumer + "</td></tr></tbody></table>");
$("#db").append("<thead><tr><th>Selection</th><th>City</th><th>Zip</th><th>Address</th><th>State</th><th>ESIID</th><th>Utility</th></tr></thead><tbody><tr id='" + data.d.City + data.d.Zip + data.d.Adds + "'><td><input type='checkbox' name='userinformation' value='#'></td><td id='" + data.d.City + data.d.Zip + data.d.Adds + "/city'>" + data.d.City + "</td><td id='" + data.d.City + data.d.Zip + data.d.Adds + "/zip'>" + data.d.Zip + "</td><td id='" + data.d.City + data.d.Zip + data.d.Adds + "/adds'>" + data.d.Adds + "</td><td id='" + data.d.City + data.d.Zip + data.d.Adds + "/state'>" + data.d.State + "</td><td id='" + data.d.City + data.d.Zip + data.d.Adds + "/location'>" + data.d.SNumer + "</td><td id='" + data.d.City + data.d.Zip + data.d.Adds + "/utility'>" + data.d.Utility + "</td></tr></tbody>");
//var html = "<thead><tr><th>City</th><th>Zip</th><th>Address</th><th>State</th><th>ESIID</th><th>Utility</th></tr></thead><tbody>";
$('#db').DataTable();
$('#db').after($("checkbox").addClass('checkbox-primary'));
},
error: function (e) {
alert(JSON.stringify(e));
$("#divResult").html("Something Wrong.");
}
});
I tried destroy(), didn't work, I also tried clean() didn't work. I have weeks facing this issue. Can somebody help me with my issue?
Thanks in advance.

table.draw() should do the trick. Make the call after appending rows.

Asp.net Same button to edit and Save using Jquery

I have something like that,
When I click on edit, It populate the record of that student back to Text Boxes. I want to use the same 'Save' button to save and edit. I am also saving the student through same button.
I want that when someone click the edit button Save ajax call would not call. I am stuck on that. Currently when i edit the record, same record also inserted. If anyone want to see the code I can edit the question for that .
Thanks
function UpdateStudent(id, name, fname, roll, age, phone, address) {
debugger
$(document).ready(function () {
$("#students").show();
$("#txtName").val(name);
$("#txtFatherName").val(fname);
$("#txtRollNo").val(roll);
$("#txtAge").val(age);
$("#txtPhone").val(phone);
$("#txtAddress").val(address);
if (id) {
$("#btnSave").click(function (e) {
e.preventDefault();
debugger
var Name = $("#txtName").val();
var FatherName = $("#txtFatherName").val();
var RollNo = $("#txtRollNo").val();
var Age = $("#txtAge").val();
var Phone = $("#txtPhone").val();
var Address = $("#txtAddress").val();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "StudentManagement.aspx/UpdateStudent",
data: "{'ID': '" + id + "','Name':'" + Name + "','FatherName':'" + FatherName + "','RollNo':'" + RollNo + "','Age':'" + Age + "','Phone':'" + Phone + "','Address':'" + Address + "'}",
dataType: "json",
success: function (data) {
debugger
$("#txtName").val("");
$("#txtFatherName").val("");
$("#txtRollNo").val("");
$("#txtAge").val("");
$("#txtPhone").val("");
$("#txtAddress").val("");
$("#students").hide();
var array = data.d;
$("#table").find("tr:gt(0)").remove();
for (var i = 0; i < array.length - 1; i++) {
var row = "<tr>"
+ "<td>" + array[i].ID + "</td>"
+ "<td>" + array[i].Name + "</td>"
+ "<td>" + array[i].FatherName + "</td>"
+ "<td>" + array[i].RollNo + "</td>"
+ "<td>" + array[i].Age + "</td>"
+ "<td>" + array[i].Phone + "</td>"
+ "<td>" + array[i].Address + "</td>"
+ "<td><a href='#' onclick='UpdateStudent(\"" + array[i].ID + "\",\"" + array[i].Name + "\",\"" + array[i].FatherName + "\",\"" + array[i].RollNo + "\",\"" + array[i].Age + "\",\"" + array[i].Phone + "\",\"" + array[i].Address + "\")'>Edit</a></td>"
+ "<td><a href='#' onclick='DeleteStudent( " + array[i].ID + " )'>Delete</a></td>"
+ "</tr>"
$("#table").append(row);
}
},
error: function (response) {
debugger
alert(response);
}
});
return false;
});
}
})
}
And Insert Student code it below, also
function InsetStudent() {
debugger
$(document).ready(function () {
var Name = $("#txtName").val();
var FatherName = $("#txtFatherName").val();
var RollNo = $("#txtRollNo").val();
var Age = $("#txtAge").val();
var Phone = $("#txtPhone").val();
var Address = $("#txtAddress").val();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "StudentManagement.aspx/CreateStudent",
data: "{'Name':'" + Name + "','FatherName':'" + FatherName + "','RollNo':'" + RollNo + "','Age':'" + Age + "','Phone':'" + Phone + "','Address':'" + Address + "'}",
dataType: "json",
success: function (data) {
debugger
$("#txtName").val("");
$("#txtFatherName").val("");
$("#txtRollNo").val("");
$("#txtAge").val("");
$("#txtPhone").val("");
$("#txtAddress").val("");
$("#students").hide();
var array = data.d;
$("#table").find("tr:gt(0)").remove();
for (var i = 0; i < array.length; i++) {
var row = "<tr>"
+ "<td>" + array[i].ID + "</td>"
+ "<td>" + array[i].Name + "</td>"
+ "<td>" + array[i].FatherName + "</td>"
+ "<td>" + array[i].RollNo + "</td>"
+ "<td>" + array[i].Age + "</td>"
+ "<td>" + array[i].Phone + "</td>"
+ "<td>" + array[i].Address + "</td>"
+ "<td><a href='#' onclick='UpdateStudent(\"" + array[i].ID + "\",\"" + array[i].Name + "\",\"" + array[i].FatherName + "\",\"" + array[i].RollNo + "\",\"" + array[i].Age + "\",\"" + array[i].Phone + "\",\"" + array[i].Address + "\")'>Edit</a></td>"
+ "<td><a href='#' onclick='DeleteStudent( " + array[i].ID + " )'>Delete</a></td>"
+ "</tr>"
$("#table").append(row);
}
},
error: function (response) {
debugger
alert(response);
}
});
return false;
})
}
And insertStudent call on jquery load, like
$("#btnSave").click(function (e) {
e.preventDefault();
InsetStudent();
})

You can do this like:
STEP1:
If you have any required field in your form then use this
$("#btnSave").click(function (e) {
e.preventDefault();
if(Check value of required field not null or empty)
{
UpdateStudent(id, name, fname, roll, age, phone, address);
}
else
{
InsetStudent();
}
});
STEP2:
If you are not using any required field in your form then use hidden field. default value of this Hidden field will be false. When user will click on edit first assign true to hidden field.
$("#btnSave").click(function (e) {
e.preventDefault();
if(Check value of Hidden field true)
{
UpdateStudent(id, name, fname, roll, age, phone, address);
//Here update hidden field value to false after completing the operation
}
else
{
InsetStudent();
}
});
hope this logic will help you.

Remove only btnSave click event
$("#btnSave").click(function (e) {
});
from your function UpdateStudent and call the
function UpdateStudent directly on edit button click event

javascript function call for multiple controls

I have a javascript function which I am calling for multiple controls,but it seems to be calling for the first ClientScript.RegisterStartupScript only.
ClientScript.RegisterStartupScript(this.GetType(), "myScript", "textCounter('" + txtCourseDesc.ClientID + "','" + txtRemDesc.ClientID + "', '2000')", true);
ClientScript.RegisterStartupScript(this.GetType(), "myScript", "textCounter('" + txtReqCourseCode.ClientID + "','" + txtRemCode.ClientID + "', '90')", true);
ClientScript.RegisterStartupScript(this.GetType(), "myScript", "textCounter('" + txtPReq.ClientID + "','" + txtPreqRem.ClientID + "', '1000')", true);
Please point out the problem.

You can't use same key for one function with different parameters. Try this:
ClientScript.RegisterStartupScript(this.GetType(), "myScript2000", "textCounter('" + txtCourseDesc.ClientID + "','" + txtRemDesc.ClientID + "', '2000')", true);
ClientScript.RegisterStartupScript(this.GetType(), "myScript90", "textCounter('" + txtReqCourseCode.ClientID + "','" + txtRemCode.ClientID + "', '90')", true);
ClientScript.RegisterStartupScript(this.GetType(), "myScript1000", "textCounter('" + txtPReq.ClientID + "','" + txtPreqRem.ClientID + "', '1000')", true);