Develop Reference

How to loop through and print out correctly

I Know why I'm getting undefined but i have no idea how to solve.
Tried to put null, but it is taking in as a text
var text ='{"employees":[' +
'{"name":"Tony","mobile":"99221111","email":"tony#json.com"},' +
'{"name":"Linda","mobile":"98981111","email":"linda#json.com"},' +
'{"name":"Patrick","mobile":"90902222","email":"patrick#json.com"},' +
'{"name":"Isabella","mobile":"99552222"}]}';
obj = JSON.parse(text);
for(var i in obj.employees)
{
document.getElementById("table").innerHTML += "<tr><td>" + obj.employees[i].name + "</td>" + "<td>" + obj.employees[i].mobile + "</td>"
+ "<td>" + obj.employees[i].email + "</td></tr>";
}
Hi, for Isabella there is no email, hence I'm getting undefined when I loop through to print out their details on html, however what I'm expecting is for the email portion to be empty in the table for Isabella. Is there a way to solve it?

You can use logical OR (|| in JavaScript), which will use the second value (empty string in this case) if the first value (email) is undefined:
var text = '{"employees":[' +
'{"name":"Tony","mobile":"99221111","email":"tony#json.com"},' +
'{"name":"Linda","mobile":"98981111","email":"linda#json.com"},' +
'{"name":"Patrick","mobile":"90902222","email":"patrick#json.com"},' +
'{"name":"Isabella","mobile":"99552222"}]}';
obj = JSON.parse(text);
for (var i in obj.employees) {
document.getElementById("table").innerHTML += "<tr><td>" + obj.employees[i].name + "</td>" + "<td>" + obj.employees[i].mobile + "</td>" +
"<td>" + (obj.employees[i].email || '') + "</td></tr>";
}
<table id="table"></table>

Jquery, create table tag with custom ID, then later refer to that ID and append new tags to it

So essentially I want to append a < table> tag to < body> with a custom ID and then later in my code refer to the table with the custom ID and append < tr>, < td>, or < th> to it.
Here's an example:
dataHold = data[1].split("#")[1]; //just imagine this as "yahoo.com"
if( !hold.includes( dataHold ) )
{
$("body").append
(
"<table id='"+dataHold+"'>"+
"<tr>"+
"<th>"+dataHold+"</th>"+
"</tr>"+
"</table>"
);
$( "#"+dataHold ).append
(
"<tr>"+
"<td>"+data[1]+"</td>"+
"<td>"+data[2]+"</td>"+
"<td>"+data[3]+"</td>"+
"</tr>"
);
}
It does append the < table> tag, but for some reason the < tr> tag appending doesn't work and I can't figure out why. Any ideas?

Your jQuery code is fine, so the problem is with your variables or lack of inclusion of jQuery. Ensure that you have jQuery loaded, and that your three variables (hold, data and dataHold) actually resolve. Don't forget that hold is not supposed to include dataHold for the if condition to be entered.
The following snippet shows this working as expected (with all variables set correctly):
const hold = data = [2, 3, 4, 5];
const dataHold = 1;
if (!hold.includes(dataHold)) {
$("body").append(
"<table id='" + dataHold + "'>" +
"<tr>" +
"<th>" + dataHold + "</th>" +
"</tr>" +
"</table>"
);
$("#" + dataHold).append(
"<tr>" +
"<td>" + data[1] + "</td>" +
"<td>" + data[2] + "</td>" +
"<td>" + data[3] + "</td>" +
"</tr>"
);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Your code works just fine when isolated to this snippet:
var dataHold = "testId";
var data = ["foo", "bar", "carrots", "broccoli"];
$("body").append(
"<table id='" + dataHold + "'>" +
"<tr>" +
"<th>" + dataHold + "</th>" +
"</tr>" +
"</table>"
);
$("#" + dataHold).append(
"<tr>" +
"<td>" + data[1] + "</td>" +
"<td>" + data[2] + "</td>" +
"<td>" + data[3] + "</td>" +
"</tr>"
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Ensure that you have correctly included the jQuery library before using the jQuery selector function ('$'). Also, use the built-in debugger in your favorite browser to ensure that the values of dataHold and data are exactly what you expect them to be. If they are null or undefined you may get errors in the string concatenation resulting in your row not being appended.

Toggling of data not working with dynammic content using ajax in .net

I am making a live data portal in which I have to display live data using Ajax in asp.net using c#.
I have one table and a div which contains data but in different way/different style.
Every time my page loads after 4 secs of time to show updated data i.e table and div both refreshes to have updated data.
Initially when page loads first time, I have displayed table to show data and hiden the data which is in div's form, if I clicked button(toggle button) it will display data in div's form and hide table data.
Now problem is that when I clicked toggle button it does not display's data in div form but it reloads whole java script
and display data in table every time when I clicked the button.
I want to toggle between table and a div.
Below I have my code what I have done so far.
Please help me what I have done wrong.
Thank You.
Note Data comes from db which is SQL.
<form id="form1" runat="server">
<div id="container">
<table id="liveData">
</table>
<div id="div_f" style="display:none;">
<%--<table id="liveData_div"></table>--%>
</div>
</div>
<button>Toggle Data</button>
</form>
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/jquery-2.1.4.js"></script>
<script>
(function worker() {
$.ajax({
type: "POST",
url: "Default2.aspx/BindData",
contentType: "application/json;charset=utf-8",
data: {},
dataType: "json",
success: function (data) {
//alert("Hello");
$("#liveData").empty();
if (data.d.length > 0) {
InDivs(data);
$("#liveData").append("<tr><th>Node Id</th><th>Parent</th><th>Voltage</th><th>Humid</th><th>HumTemp</th><th>PrTemp</th><th>Pressure</th><th>Light</th><th>Accel_X</th><th>Accel_Y</th><th>result_time</th></tr>");
for (var i = 0; i < data.d.length; i++) {
$("#liveData").append("<tr><td>" +
data.d[i].nodeID + "</td><td>" +
data.d[i].parent + "</td> <td>" +
data.d[i].voltage + "</td><td>" +
data.d[i].humid + "</td> <td>" +
data.d[i].humtemp + "</td><td>" +
data.d[i].prtemp + "</td> <td>" +
data.d[i].press + "</td><td>" +
data.d[i].light + "</td> <td>" +
data.d[i].accel_x + "</td><td>" +
data.d[i].accel_y + "</td><td>" +
data.d[i].result_time + "</td></tr>");
}
}
// Nontoggle();
},
error: function (result) {
//Handling error
alert("error");
},
complete: function () {
// Schedule the next request when the current one's complete
setTimeout(worker, 4000);
}
});
})();
function InDivs(data) {
$("#div_f").empty();
if (data.d.length > 0) {
//$("#liveData").append("<tr><th>Node Id</th><th>Parent</th><th>Voltage</th><th>Humid</th><th>HumTemp</th><th>PrTemp</th><th>Pressure</th><th>Light</th><th>Accel_X</th><th>Accel_Y</th><th>result_time</th></tr>");
for (var i = 0; i < data.d.length; i++) {
$("#div_f").append(
"<table class='LiveData_div'><tr>" +
"<td>Node Id</td>" +
"<td>" + data.d[i].nodeID + "</td>" +
"<td>Parent Id</td>" +
"<td>" + data.d[i].parent + "</td>" +
"</tr>" +
"<tr>" +
"<td>Voltage</td>" +
"<td>" + data.d[i].voltage + "</td>" +
"<td>Humid</td>" +
"<td>" + data.d[i].humid + "</td>" +
"</tr>" +
"<tr>" +
"<td>Hum Temp</td>" +
"<td>" + data.d[i].humtemp + "</td>" +
"<td>Press</td>" +
"<td>" + data.d[i].press + "</td>" +
"</tr>" +
"<tr>" +
"<td>Press Temp</td>" +
"<td>" + data.d[i].prtemp + "</td>" +
"<td>Light</td>" +
"<td>" + data.d[i].light + "</td>" +
"</tr>" +
"<tr>" +
"<td>Accel_x</td>" +
"<td>" + data.d[i].accel_x + "</td>" +
"<td>Accel_y</td>" +
"<td>" + data.d[i].accel_y + "</td>" +
"</tr>" +
"<tr>" +
"<td>Time</td>" +
"<td>" + data.d[i].result_time + "</td>" +
"</tr></table>");
}
}
}
$(function () {
$('button').live('click', function () {
$('#div_f').toggle();
$('#liveData').toggle();
});
});
</script>

Problem
Your page reload since the button tag has by default type='submit' and that will refresh the page.
Solution
You should define your type as type='button' to prevent that behavior, e.g :
<button type='button'>Toggle Data</button>
Hope this helps.

Try to add a "return false;" at the end of your click button:
$('button').live('click', function () {
$('#div_f').toggle();
$('#liveData').toggle();
return false;
});

Use image in for each but with different onclicks

I'm making a table with a for each loop.
In every row i want to add a image but with different onclicks.
This is what i got now. All the "onclicks" are edited to the last for each round.
function cart(){
count = readCookie("count");
tableRow = "";
for (i = 1; i <= count; i++){
item = "item" + i;
Cookie = readCookie(item);
if (!(Cookie == null)){
row = new Array();
row = Cookie.split("|");
tableRow += "<tr>"
+ "<td>" + row[0] + "</td>"
+ "<td>" + row[1] + "</td>"
+ "<td>" + row[2] + "</td>"
+ "<td>" + row[3] + "</td>"
+ "<td>" + row[4] + "</td>"
+ "<td>" + row[5] + "</td>"
+ "<td>" + row[4] * row[5] + "</td>" + "<td>"
+ "<a href=''><img src='img/delete.png' onclick='editCart(item);'></a>"
+ "</td>" + "</tr>";
}
}
document.write(tableRow);}
I know cookies are not the best way to do it but it's a school assignment.
Thats why even if you only like to give a hint i still would appreciate it.

"<a href=''><img src='img/delete.png' onclick='editCart(item);'></a>"
Every onclick call will be the same.
"<a href=''><img src='img/delete.png' onclick='editCart(\""+item+"\");'></a>"
This will generate the outputlink dynamically.

How to make a table row highlight if the checkbox is checked (on button click)?

I am creating a Jquery Mobile page which includes a table. The table will display users. Table rows include checkboxes in the first cell, followed by the users information. At the bottom of the table there is a button (Edit). When this button is clicked I want the rows which have their check boxes ticked to be highlighted and the cells in the row editable.
I want to highlight/make editable rows on the click of the edit button, when
a) the rows checkbox is ticked.
The table has been created using a JavaScript loop (function is loaded on page load).
var UsersHTML = "<table class='full_width_table info_table_style ui-body-d ui-shadow table-stripe ui-responsive'>" +
"<thead>" +
"<tr class='ui-bar-b schedule_row'>" +
"<th></th>" +
"<th>UserID</th>" +
"<th>First Name</th>" +
"<th>Surname</th>" +
"<th>Home Location</th>" +
"</tr>" +
"</thead>" +
"<tbody>";
for (s = 0; s < 15; s++) {
//contenteditable='true'
UsersHTML += "<tr class='schedule_row'>" +
"<td class='user_check_cell'>" +"<input type='checkbox'>" + "</td>" +
"<td> " + + "</td>" +
"<td>" + + "</td>" +
"<td>" + + "</td>" +
"<td>" + + "</td>" +
"<td>" + + "</td>" +
"<td align='right'";
UsersHTML += "</td></tr>";
}
UsersHTML += "</tbody></table>";
$("#usersContent").html(UsersHTML);
I have used a div to display the table on the page:
<div id="usersContent">
</div>
Any help would be great!

You can use event delegation.
$('#userContent').on('click', '.user_check_cell input[type=checkbox]', function () {
var $input = $(this);
$input.closest('tr').toggleClass('highlighted', $input.prop('checked'));
});
This adds the event listener to #userContent and listens for events on that and if the element that triggered that click event matches the selector in on it goes though with the event.
The toggleClass just adds the class "highlighted" when the input that was clicked is checked.

Try this:
html
<div id="usersContent">
</div>
js:
var UsersHTML = "<table class='full_width_table info_table_style ui-body-d ui-shadow table-stripe ui-responsive'>" +
"<thead>" +
"<tr class='ui-bar-b schedule_row'>" +
"<th></th>" +
"<th>UserID</th>" +
"<th>First Name</th>" +
"<th>Surname</th>" +
"<th>Home Location</th>" +
"</tr>" +
"</thead>" +
"<tbody>";
for (s = 0; s < 15; s++) {
//contenteditable='true'
UsersHTML += "<tr class='schedule_row' id='testTr_"+s+"'>" +
"<td class='user_check_cell'>" +"<input type='checkbox' id='chk_"+s+"' specId='"+s+"' class='hightlight' onclick='changeHight(this);'>" + "</td>" +
"<td> " + + "</td>" +
"<td>" + + "</td>" +
"<td>" + + "</td>" +
"<td>" + + "</td>" +
"<td>" + + "</td>" +
"<td align='right'";
UsersHTML += "</td></tr>";
}
UsersHTML += "</tbody></table>";
$("#usersContent").html(UsersHTML);
window.changeHight = function(obj){
var specTr = $(obj).attr("specId");
if($(obj).prop("checked"))
$("#testTr_"+specTr).addClass("highlight");
else
$("#testTr_"+specTr).removeClass("highlight");
}
css:
.highlight{
background: green;
}
fiddle

First, I would encourage you to look into some sort of framework to make this easier. jsRender, Knockout.js and Angular.js would all make this cleaner and easier.
Without going down any of those roads, I would do something like this...
Add a couple classes to help us out....
.display input {
border: none;
color: #000;
}
.hightlight {
background-color: #ffffbb;
}
If you want to make the cells editable, you need to wrap them in an input. Disable the input and remove the border when in "display mode"...
$('#userTable').on('click', 'input[type="checkbox"]', function() {
var row = $(this).closest('tr');
row.removeClass('display');
row.addClass('hightlight');
row.find('input').removeAttr('disabled');
})
I also changed your code a bit to add an array of users and add the user data to the table...
for (
s = 0; s < 15; s++) {
//contenteditable='true'
UsersHTML += "<tr class='schedule_row display'>" +
"<td class='user_check_cell'>" +"<input type='checkbox'>" + "</td>" +
"<td> " + s + "</td>" +
"<td><input disabled='disabled' value='" + users[s].firstName + "'></input></td>" +
"<td>" + users[s].lastName + "</td>" +
"<td>" + users[s].location + "</td>";
UsersHTML += "</tr>";
}
Working fiddle here... http://jsfiddle.net/gRFD8/1/