I want to wrap entire content into single div, it needed for loop inside append function. after wrapping around div in javascript, it's not displaying anything.
here is my code;
$('#postjson').append(
'<div>' + '<div id="' + data[0].id + '">' + '<p>' + '<div id="namediv">' + data[0].FirstName + ' ' + data[0].MiddleName + ' ' + data[0].LastName + '<br/>' + '<span id="locationspan">' + 'xyz' + data[0].Location + '</span>' + '</div>' + '<br/>'
//+'Email:'+data[0].Email+'<br/>'
//+'Mobile:'+data[0].Mobile+'<br/>'
+ '</p>' + '</div>'
// displaying book details
+
for (var i = 1; i < data.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + data[i].BookNo + "</td>");
tr.append("<td>" + data[i].BookTitle + "</td>");
tr.append("<td>" + data[i].BookGenre + "</td>");
tr.append("<td>" + data[i].BookWriter + "</td>");
tr.append("<td>" + data[i].BookDescription + "</td>");
$('#displaytable').append(tr);
} + '</div>'
);
Perhaps you meant
var $table = $('<table>', {"id:":"displaytable"});
for (var i = 1; i < data.length; i++) {
tr = $('<tr/>');
tr.append("<td/>",{"text":data[i].BookNo});
tr.append("<td/>",{"text":data[i].BookTitle});
tr.append("<td/>",{"text":data[i].BookGenre});
tr.append("<td/>",{"text":data[i].BookWriter});
tr.append("<td/>",{"text":data[i].BookDescription});
$table.append(tr);
}
$('#postjson')
.append($('<div />',{"id":"tableDiv"}))
.append($('<div />',{"id":data[0].id}).append($('<div />',{"id":"namediv"}).html(data[0].FirstName + ' ' + data[0].MiddleName + ' ' + data[0].LastName +
.append($table);
Put the loop outside of the append function and finally append the table to the 'container' element, which is specified in the html string
$('#postjson').append(
'<div id="container">' + '<div id="' + data[0].id + '">' + '<p>' + '<div id="namediv">' + data[0].FirstName + ' ' + data[0].MiddleName + ' ' + data[0].LastName + '<br/>' + '<span id="locationspan">' + 'xyz' + data[0].Location + '</span>' + '</div>' + '<br/>' + '</p>' + '</div>')
for (var i = 1; i < data.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + data[i].BookNo + "</td>");
tr.append("<td>" + data[i].BookTitle + "</td>");
tr.append("<td>" + data[i].BookGenre + "</td>");
tr.append("<td>" + data[i].BookWriter + "</td>");
tr.append("<td>" + data[i].BookDescription + "</td>");
$('#displaytable').append(tr);
}
$("#container").append($('#displaytable'));
Related
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>'
I try to insert a dynamic h3 to a dynamic div, hovewer something is odd as it gets inserted outside the lblUser div. I would also like to be inserted after the "Role" h3.
Here is my code : function showUsers() {
lblUserList.innerHTML = "";
for ( var i = 0; i < ajUserDataFromServer.length; i++ ) {
var lblUser = document.createElement('div');
lblUser.innerHTML = '<div class="lblUser">' + '<img src="' + ajUserDataFromServer[i].image + '" alt="user" class="lblUserImage" data-userImage="' + ajUserDataFromServer[i].image + '">' + '<h3 class="lblUserId">' + 'Id:' + ' ' + ajUserDataFromServer[i].id + '</h3>' + '<h3 class="lblUserRole" data-userRole="' + ajUserDataFromServer[i].role + '">' + 'Role:' + ' ' + ajUserDataFromServer[i].role + '</h3>' + '<h3 class="lblUserName" data-userName="' + ajUserDataFromServer[i].name + '">' + 'Name:' + ' ' + ajUserDataFromServer[i].name + '<h3 class ="lblUserLastName" data-userLastName="' + ajUserDataFromServer[i].lastname + '">' + 'Lastname:' + ' ' + ajUserDataFromServer[i].lastname + '</h3>' + '<h3 class="lblUserPassword" data-userPassword="' + ajUserDataFromServer[i].password + '">' + 'Password:' + ' ' + ajUserDataFromServer[i].password + '</h3>' + '<button id="btnEditUserBody" class="btnShowPage btnEditUser" data-userId="' + ajUserDataFromServer[i].id + '" data-showThisPage="pageUpdateUser">' + 'EDIT USER' + '</button>' + '<button class="btnDeleteUser" data-userId="' + ajUserDataFromServer[i].id + '" >' + 'DELETE USER' + '</button>' + '<h3 class="lblErrorMessage" id="lblDeleteUserErrorMessage">' + '</h3>' + '</div>';
if ( ajUserDataFromServer[i].email ) {
var lblUserEmail = document.createElement('h3');
lblUserEmail.innerHTML = '<h3 class="lblUserEmail" data-userEmail="' + ajUserDataFromServer[i].email + '">' + 'Email:' + ' ' + ajUserDataFromServer[i].email + '</h3>';
lblUser.appendChild( lblUserEmail );
}
if ( ajUserDataFromServer[i].phonenumber ) {
var lblUserPhoneNumber = document.createElement('h3');
lblUserPhoneNumber.innerHTML = '<h3 class="lblUserPhoneNumber" data-userPhoneNumber="' + ajUserDataFromServer[i].phonenumber + '">' + 'Phone-number:' + ' ' + ajUserDataFromServer[i].phonenumber + '</h3>';
lblUser.appendChild( lblUserPhoneNumber );
}
lblUserList.appendChild( lblUser );
}
}
I can see a few things wrong with the code, for example:
var lblUserEmail = document.createElement('h3');
lblUserEmail.innerHTML = '<h3 class="lblUserEmail" data-userEmail="' + ajUserDataFromServer[i].email + '">' + 'Email:' + ' ' + ajUserDataFromServer[i].email + '</h3>';
Should be something like:
var lblUserEmail = document.createElement('h3');
lblUserEmail.classList.add("lblUserEmail");
lblUserEmail.setAttribute("data-userEmail", ajUserDataFromServer[i].email);
lblUserEmail.innerText = 'Email:' + ' ' + ajUserDataFromServer[i].email;
Now you can append it:
lblUser.appendChild(lblUserEmail);
If you do it your way you wil get nested h3 and div elements.
Furthermore, you need to close your img tag. I can advice creating those tags either in code or with the new es5 string interpolation this will clean up your code and will show you these types of errors.
JavaScript ADODBE connection how to put or between them in query. Need help:
rs.Open("update customer set Name='" + txtname + "',F_Name='" + txtfname + "',Cnic='" + txtcnic + "',Dues='" + txtdues + "',Fees= '" + txtfees + "' where Id = '" + id + "'", connection);
Try this
rs.Open("update customer set Name='" + txtname + "',F_Name='" + txtfname + "',Cnic='" + txtcnic + "',Dues='" + txtdues + "',Fees= '" + txtfees + "' where Id = '" + id + "'", connection);
document.write("<table>");
document.write("<tr>");
for (var i = 0; i < rs.Fields.Count ; i++)
{
document.write("<th style='color: #009900;'>" + rs.Fields(i).Name + "</th>");
}
document.write("</tr>");
while (!rs.EOF) {
document.write("<tr>");
for (var i = 0; i < rs.Fields.Count; i++)
{
document.write("<td >" + rs.Fields(i) + "</td>");
}
document.write("</tr>");
rs.movenext();
}
document.write("");
I have this json data
somehow i displayed this part of data in html
and want to display this part of data
into div in html but i am unable to display it using for loop and don't to how to start each function from index 1 as index 0 in personal details data.
here is my code
var url = "http://localhost/ReadExchange/api.php";
$.getJSON(url, function(data) {
if (data) {
alert("hey got the data" + JSON.stringify(data));
var arr = data.length;
//$.each(data, function(i,element) {
var element = data[0];
$("#postjson").append(
'<div id="' + element.id + '">' + '<p>' + 'FirstName:' + element.FirstName + '<br/>'
+ 'MiddleName:' + element.MiddleName + '<br/>' + 'LastName:' + element.LastName + '<br/>' + 'Gender:' + element.Gender + '<br/>' + 'Location:' + element.Location + '<br/>' + 'Email:' + element.Email + '<br/>' + 'Mobile:' + element.Mobile + '<br/>' + '</p>' + '</div>'
);
for (var i = 1; i < arr; i++) {
$("#postjson").append(
'<div id="">' + '<p>' + 'BookTitle:' + data[i].data.BookTitle + '<br/>' + 'BookGenre:' + data[i].data.BookGenre + '<br/>' + 'BookWriter:' + data[i].data.BookWriter + '<br/>' + 'Gender:' + data[i].data.BookDescription + '<br/>'
+ '</p>' + '</div>'
);
}
} else {
return;
}
You can use Array.prototype.splice()
data.splice(0, 1);
then iterate data array at for loop, with i set to 0
var data = [{abc:123}, {def:456}];
data.splice(0, 1);
for (var i = 0; i < data.length; i++) {
alert(JSON.stringify(data))
}
i need to append a table but i do it the wrong way.. I have this:
$("#times").append('<table id="departure_' + i + '" width="50%"> <tbody><tr><td>' + data.times[i].destination.name + '</td><td id="appendLate' + i + '">' + time + '</td><td>' + data.times[i].track + '</td><td>' + data.times[i].train_type + '</td><td>' + data.times[i].company + '</td></tr></tbody></table>');
this masive line make no table but alot of tabels.. hard to style.
how can i fix this?
see in action here: http://codepen.io/shiva112/pen/JGXoVJ?editors=001
The problem is that you are appending the whole table in a for statement. You should do something like this
// Select or create a table here
var table = $("#my-target-table");
var tableContent = "";
for (var i = 0; i < data.times.length; ++i) {
tableContent += '<tr><td>' + data.times[i].destination.name + '</td><td id="appendLate' + i + '">' + time + '</td><td>' + data.times[i].track + '</td><td>' + data.times[i].train_type + '</td><td>' + data.times[i].company + '</td></tr>'
}
table.find('tbody').html(tableContent);