AppenChild dynamic h3 to dynamic div issue - javascript

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.

Related

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>'

Putting the variable into the a href tag

i am having issue with assigning the variable into the URL
This is the code
var value = i+1;
var customPopup = 'Latitude: ' + data.Table[i].Latitude + '</br>Longitude: ' + data.Table[i].Longitude
+ '</br>Station: ' + data.Table[i].StationID + ' </br>Box: ' + data.Table[i].BoxID + '</br>Timestamp: ' + data.Table[i].LocationSend + "<br><a target='_blank' href='/Home/History?DeviceID= ' style='color: #000000'>Click Here For Location History</a></br>";
String literals might help (using backticks ``):
var value = i+1;
var customPopup = 'Latitude: ' + data.Table[i].Latitude +
'<br/>Longitude: ' + data.Table[i].Longitude +
'<br/>Station: ' + data.Table[i].StationID +
'<br/>Box: ' + data.Table[i].BoxID +
'<br/>Timestamp: ' + data.Table[i].LocationSend +
`<br/><a target='_blank' href='/Home/History?DeviceID=${value}' style='color: #000000'>Click Here For Location History</a><br/>`;

how to start each function from index 1 to post json objects in different div in html

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))
}

How to display a div with items from array in javascript

I have a param called "exraData" which can be a string or array (depends on some conditions).
I have to display some content using java script.
in case "exraData" is a String the content is displayed well by the following code:
this.resulto = '<div class="avatarHeight">' +
'<div class="avatar">' + spanPic + '</div>' +
'<div class="info ' + company + '">' + item.show +
'<div class="tt-hint">' + exraData + '</div>' +
'</div>' +
'</div>';
In case it is array I use the following code but nothing is displayed:
this.resulto = '<div class="avatarHeight">' +
'<div class="avatar">' + spanPic + '</div>' +
'<div class="info ' + company + '">' + item.show
for(var i=0;i<exraData.length;i++){
+'<div class="tt-hint">' + exraData[i] + '</div>'
}
+'</div>' +
'</div>';
You can't have a for loop inline. Here is the for loop outside with the desired result.
var spanPic='tempPic';
var company='xyz';
var item={};
item.show='temp';
var exraData=['one','two','three'];
this.resulto = '<div class="avatarHeight">' +
'<div class="avatar">' + spanPic + '</div>' +
'<div class="info ' + company + '">' + item.show;
for(i=0;i<exraData.length;i++){
this.resulto +='<div class="tt-hint">' + exraData[i] + '</div>';
}
this.resulto+='</div>' + '</div>';
document.write(this.resulto);

How to Get video details from you tube [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Below code is static I want to make it dynamic by search box
<script type="text/javascript">
function youtubeFeedCallback(data) {
var s = '';
s += '<img src="' + data.entry.media$group.media$thumbnail[0].url + '" width="' + data.entry.media$group.media$thumbnail[0].width + '" height="' + data.entry.media$group.media$thumbnail[0].height + '" alt="' + data.entry.media$group.media$thumbnail[0].yt$name + '" align="right"/>';
s += '<b>Title:</b> ' + data.entry.title.$t + '<br/>';
s += '<b>Author:</b> ' + data.entry.author[0].name.$t + '<br/>';
s += '<b>Published:</b> ' + new Date(data.entry.published.$t).toLocaleDateString() + '<br/>';
s += '<b>Duration:</b> ' + Math.floor(data.entry.media$group.yt$duration.seconds / 60) + ':' + (data.entry.media$group.yt$duration.seconds % 60) + ' (' + data.entry.media$group.yt$duration.seconds + ' seconds)<br/>';
if (data.entry.gd$rating) {
s += '<b>Rating:</b> ' + data.entry.gd$rating.average.toFixed(1) + ' out of ' + data.entry.gd$rating.max + ' (' + data.entry.gd$rating.numRaters + ' ratings)<br/>';
}
s += '<b>Statistics:</b> ' + data.entry.yt$statistics.favoriteCount + ' favorite(s); ' + data.entry.yt$statistics.viewCount + ' view(s)<br/>';
s += '<br/>' + data.entry.media$group.media$description.$t.replace(/\n/g, '<br/>') + '<br/>';
s += '<br/>Watch on YouTube';
document.write(s);
}
</script>
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos/gzDS-Kfd5XQ?v=2&alt=json-in-script&callback=youtubeFeedCallback"></script>
Thanks
Hi Please use this code for dynamic.
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function youtubeFeedCallback(data) {
var s = '';
s += '<img src="' + data.entry.media$group.media$thumbnail[0].url + '" width="' + data.entry.media$group.media$thumbnail[0].width + '" height="' + data.entry.media$group.media$thumbnail[0].height + '" alt="' + data.entry.media$group.media$thumbnail[0].yt$name + '" align="right"/>';
s += '<b>Title:</b> ' + data.entry.title.$t + '<br/>';
s += '<b>Author:</b> ' + data.entry.author[0].name.$t + '<br/>';
s += '<b>Published:</b> ' + new Date(data.entry.published.$t).toLocaleDateString() + '<br/>';
s += '<b>Duration:</b> ' + Math.floor(data.entry.media$group.yt$duration.seconds / 60) + ':' + (data.entry.media$group.yt$duration.seconds % 60) + ' (' + data.entry.media$group.yt$duration.seconds + ' seconds)<br/>';
if (data.entry.gd$rating) {
s += '<b>Rating:</b> ' + data.entry.gd$rating.average.toFixed(1) + ' out of ' + data.entry.gd$rating.max + ' (' + data.entry.gd$rating.numRaters + ' ratings)<br/>';
}
s += '<b>Statistics:</b> ' + data.entry.yt$statistics.favoriteCount + ' favorite(s); ' + data.entry.yt$statistics.viewCount + ' view(s)<br/>';
s += '<br/>' + data.entry.media$group.media$description.$t.replace(/\n/g, '<br/>') + '<br/>';
s += '<br/>Watch on YouTube';
document.write(s);
}
function getVal(){
//slit url by id
var url = $('#name').val();
console.log(url);
var index = url.split('=');
$.ajax({
url : 'http://gdata.youtube.com/feeds/api/videos/' + index[1] +'?v=2&alt=json-in-script&callback=youtubeFeedCallback',
dataType : "json",
type : "post",
method:'get',
success : function(data){
youtubeFeedCallback(data);
}
})}
</script>
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos/gHGDN9-oFJE?v=2&alt=json-in-script&callback=youtubeFeedCallback">
</script>
<input type='text' id='name' name='name'/>
<input type='button' name='btn' id='btn' onclick='getVal()' value='Search'/>
....

Categories