conflict between for loop and array calling - javascript

I have been working on this for hours now and I can't find the error. I've tried many things without success and searched everywhere for the answer. Hope someone can help.
Here's the code:
function eventpopup(date) {
if(popupstatus == true){
$( "#eventinfopopup" ).animate({ "left": "-=300px" }, "slow" );
$( "#eventinfopopup" ).promise().done(function(){
document.getElementById("popupcontent").innerHTML = "";
$( "#eventinfopopup" ).animate({ "left": "+=300px" }, "slow" );
for(i = 0; i <= eventcontent[date].length; i++){
document.getElementById("popupcontent").innerHTML += "<img class='popupbanner' src='" + eventcontent[date][i]['bannerimg'] + "' />";
document.getElementById("popupcontent").innerHTML += "<h2 class='popupeventtitle'>" + eventcontent[date][i]['title'] + "</h2>";
document.getElementById("popupcontent").innerHTML += "<span class='popupdate'>" + eventcontent[date][i]['datetime'] + "</span>";
document.getElementById("popupcontent").innerHTML += "<p class='popupfulldesc'>" + eventcontent[date][i]['fulldesc'] + "</p>";
}
});
}
else{
document.getElementById("popupcontent").innerHTML = "";
$( "#eventinfopopup" ).animate({ "left": "+=300px" }, "slow" );
for(i = 0; i <= eventcontent[date].length; i++){
document.getElementById("popupcontent").innerHTML += "<img class='popupbanner' src='" + eventcontent[date][i]['bannerimg'] + "' />";
document.getElementById("popupcontent").innerHTML += "<h2 class='popupeventtitle'>" + eventcontent[date][i]['title'] + "</h2>";
document.getElementById("popupcontent").innerHTML += "<span class='popupdate'>" + eventcontent[date][i]['datetime'] + "</span>";
document.getElementById("popupcontent").innerHTML += "<p class='popupfulldesc'>" + eventcontent[date][i]['fulldesc'] + "</p>";
}
popupstatus = true;
}
}
I don't know where the problem is coming from. It seems to be coming from the "for" loop. If I adapt the code to not have a "for", it works fine.
There seems to be an issue between the for loop and my request in the array. when I have the for loop, I receive an error message in the debug console saying that the "bannerimg' is undefined. Remove the for loop and it's all gone, everything works fine...
probably something stupid but I can't figure it out.
thanks.

In your for loop try changing <= to <.

Related

Try make a poll with getJSON() and jsonp the issue is the view is blinking

I try make a poll, basically I refresh my petition every 3s to the API using jsonp and getJSON the problem is my view also refresh at the same time and blink in the interface of the client (HTML), I have some like this
var chatbox = $("#chatbox");
singleChatView();
setInterval(function () {
chatbox.empty();
singleChatView();
}, 1000);
function singleChatView() {
var chatid = localStorage.getItem('chatid');
$.getJSON("http://myapi/?chatid=" + chatid + "&jsonp=?", function (chats) {
console.log(chats);
$.each(chats.DATA, function (key, c) {
$('.msgRecipientName').text(c.SENTBY.name);
if (c.SENTBY.id == userInfo.PROFILE.USERID) {
chatbox.append(
"<li class='msgThread group currentUser'>" +
"<div class='msgBalloon group'>" +
"<div class='msgHeader'>" +
"<div class='msgFull'>" + c.MESSAGE + "</div>" +
"</div>" +
"</div>" +
"<div class='msgDate'>" +
formatDate(c.CREATEDON) +
"</div>" +
"</li>"
);
} else {
chatbox.append(
"<li class='msgThread group'>" +
"<div class='msgAuthor' style='background: #fff url(myapi/100_couple.png) 50% background-size: cover;'>" +
"<a ng-href=''>" +
"<span></span>" +
"</a>" +
"</div>" +
"<div class='msgBalloon group'>" +
"<div class='msgHeader'>" +
"<div class='msgFrom'>" + c.SENTBY.name + "</div>" +
"<div class='msgFull'>" + c.MESSAGE + "</div>" +
"</div>" +
"</div>" +
"<div class='msgFrom'>" + c.SENTBY.name + "</div>" +
"<div class='msgDate'>" + formatDate(c.CREATEDON) + "</div>" +
"</li>"
);
}
});
});
}
I don't have any idea how I can do this and void this issue with the view, can some one help me, all this is new for me thanks
I would suggest trying the following. The blink is most likely due to you clearing the chatbox and not putting anything in there until the ajax returns. This version, aside from reducing the number of times the DOM is changed, also doesn't replace the chatbox until it has built all the html that should be in it.
var chatbox = $("#chatbox");
//start the chat loop
singleChatView();
function singleChatView() {
var chatid = localStorage.getItem('chatid');
$.getJSON("http://myapi/?chatid=" + chatid + "&jsonp=?", function(chats) {
console.log(chats);
//collect the messages
//if we update the page once, the browser has to do less work rendering
//all the changes
var messages = [];
//keep track of the "c.SENTBY.name"
//since you are doing a global selector and setter, the value will
//end up being the last value you update all them to be anyway
//no need to update multiple times
var sendby = '';
$.each(chats.DATA, function(key, c) {
sentby = c.SENTBY.name;
if (c.SENTBY.id == userInfo.PROFILE.USERID) {
messages.push(
"<li class='msgThread group currentUser'>" +
"<div class='msgBalloon group'>" +
"<div class='msgHeader'>" +
"<div class='msgFull'>" + c.MESSAGE + "</div>" +
"</div>" +
"</div>" +
"<div class='msgDate'>" + formatDate(c.CREATEDON) + "</div>" +
"</li>"
);
} else {
messages.push(
"<li class='msgThread group'>" +
"<div class='msgAuthor' style='background: #fff url(myapi/100_couple.png) 50% background-size: cover;'>" +
"<a ng-href=''>" +
"<span></span>" +
"</a>" +
"</div>" +
"<div class='msgBalloon group'>" +
"<div class='msgHeader'>" +
"<div class='msgFrom'>" + c.SENTBY.name + "</div>" +
"<div class='msgFull'>" + c.MESSAGE + "</div>" +
"</div>" +
"</div>" +
"<div class='msgFrom'>" + c.SENTBY.name + "</div>" +
"<div class='msgDate'>" + formatDate(c.CREATEDON) + "</div>" +
"</li>"
);
}
});
//update the recipent with the last sent by, once
$('.msgRecipientName').text(sentby);
//replace all the chatbox text with the collected html that would have
//otherwise been append one at a time
chatbox.html(messages);
//now that we've finished this iteration, start the next iteration after
//a second
setTimeout(singleChatView, 1000);
});
}

How to append each object to its respective 'block' of elements?

var clubbingLocations = $('#clubbing-locations');
$.getJSON("/js/location.json", function(data) { //load json
for (var i = 1; i <= data.locations.length; i++){ //loop through json, append html and objects
clubbingLocations.append("<div class='night-type location'>" +
"<a href='location.html'>" +
"<div class='overlay'>" +
"<div class='overlay'>" +
"<span class='fav checked glyphicon glyphicon-heart' aria-hidden='true'></span>" +
"<h4>" + data.locations[i].name + "</h4>" +
"<div class='rating-hold'>" +
"</div>" +
"</div>" +
"</a>" +
"</div>"
);
for (var j = 1; j <= data.locations[i].rating; j++){
$('.rating-hold').append("<span class='filled glyphicon glyphicon-star' aria-hidden='true'></span>");
}
}
I am trying to append the object's review to each of its respective rating-hold, however, the reviews are accumulating and adding themselves on to each other instead of appending to the respective class, them moving on.
The first rating inserts its self perfectly, but after that they start adding themselves onto each other.
Create a jQuery object with your html string first.
Then you can search within that object to find the current rating-hold and append icons to it.
Finally, append the whole object including the icons to clubbingLocations
for (var i = 0; i <= data.locations.length - 1; i++){ //loop through json, append html and objects
// create jQuery object
var $nightType= $("<div class='night-type location'>" +
"<a href='location.html'>" +
"<div class='overlay'>" +
"<div class='overlay'>" +
"<span class='fav checked glyphicon glyphicon-heart' aria-hidden='true'></span>" +
"<h4>" + data.locations[i].name + "</h4>" +
"<div class='rating-hold'>" +
"</div>" +
"</div>" +
"</a>" +
"</div>"
);
for (var j = 0; j <= data.locations[i].rating; j++){
// append icons to object created above
$nightType.find('.rating-hold').append("<span class='filled glyphicon glyphicon-star' aria-hidden='true'></span>");
}
// append object to dom
clubbingLocations.append($nightType);
}
You can use JQuery .each documentation
$('.rating-hold').each(function(index){
$(this).append('html code here');
})
Your are appending using the .rating-hold alone, which will append all to the first location, try giving locations ids, and assign stars to each separately using this instead:
var clubbingLocations = $('#clubbing-locations');
$.getJSON("/js/location.json", function(data) { //load json
for (var i = 0; i <= data.locations.length - 1; i++){ //loop through json, append html and objects
clubbingLocations.append(
"<div id='location" + i + "' class='night-type location'>" +
"<a href='location.html'>" +
"<div class='overlay'>" +
"<div class='overlay'>" +
"<span class='fav checked glyphicon glyphicon-heart' aria-hidden='true'></span>" +
"<h4>" + data.locations[i].name + "</h4>" +
"<div class='rating-hold'>" +
"</div>" +
"</div>" +
"</a>" +
"</div>"
);
for (var j = 0; j <= data.locations[i].rating; j++){
$('#location' + i + ' .rating-hold').append("<span class='filled glyphicon glyphicon-star' aria-hidden='true'></span>");
}
}

How to add new class to the existing class in this case

I am new to Javascript and Jquery so please excuse if this is a dumb question
HTML is being constructed dynamically as shown
var favoriteresultag = '<ul>';
favoriteresultag += "<section id='"+name+"' class='ulseWrap lielement'>" + "<div class='intit someclassss'>"+ name + "</div>" + "</section>";
How can i add/concat one more variable to the class ulseWrap lielement ??
I tried this way
var classactive = '';
if (some condition) {
classactive = 'activeRest';
} else {
classactive = '';
}
favoriteresultag += "<section id='" + name + "' class='ulseWrap lielement '+classactive+' '>" + "<div class='intit someclassss'>" + name + "</div>" + "</section>";
String concatenation, just like you're doing:
favoriteresultag += "<section id='"+name+"' class='ulseWrap lielement " + classactive + "'>" + "<div class='intit someclassss'>"+ name + "</div>" + "</section>";
Try this with jquery if you are using it
$('.actual_class').addClass('new_class')
In your case can be
$('#'+name).addClass('activeRest')
or
$('.ulseWrap.lielement').addClass('activeRest')

jquery won't update dynamically generated html

I have an ajax function that loads my inbox messages and each of the messages has a user_type and read field.
I'm looping over the messages and generating the html for them.
function initializeMailbox() {
// get all mailbox data
user.GetInboxMessages(function (response) {
if (response) {
inboxMessages['inbox'] = response;
$("#inbox-table").fadeIn();
loadInboxTable();
inboxDataTable = $("#inboxTable").dataTable();
$("#inbox-count").html(inbox_msg_count);
displayMessage(first_msg_id);
}
});
}
function loadInboxTable() {
for (var i = 0; i < inboxMessages['inbox'].length - 1; i++) {
first_msg_id = inboxMessages['inbox'][0].message_id;
var user_type = "";
if (inboxMessages['inbox'][i].user_type = 1)
user_type = "DONOR";
else if (inboxMessages['inbox'][i].user_type = 0)
user_type = "CANDIDATE";
else if (inboxMessages['inbox'][i].user_type = 2)
user_type = "GROUP";
$("#inbox-table-body").append(
"<tr class='data-row' style='height: 75px;'> " +
"<td>" +
"<input type='hidden' id='user_type' value='" + inboxMessages['inbox'][i].user_type + "'/>" +
"<input type='hidden' id='read' value='" + inboxMessages['inbox'][i].read + "'/>" +
"<input type='checkbox' id='" + inboxMessages['inbox'][i].message_id + "'></input></td>" +
"<td>" +
"<p class='left'>" +
"<img class='td-avatar' style='margin-top: 0px !important;' src='/uploads/profile-pictures/" + inboxMessages['inbox'][i].image + "' alt='avatar'/>" +
"<br/>" +
"<span class='user-type'>" + user_type + "</span>" +
"</p></td><td>" +
"<h2 onclick='displayMessage(" + inboxMessages['inbox'][i].message_id + ");'>" + inboxMessages['inbox'][i].firstname + " " + inboxMessages['inbox'][i].lastname + "</h2><br/>" +
"<h3 class='message-subject' onclick='displayMessage(" + inboxMessages['inbox'][i].message_id + ");'>" + inboxMessages['inbox'][i].subject + "</h3><br/><br/>" +
"<h3 style='font-size: 0.7em; margin-top: -25px; float:left;'><span>" + inboxMessages['inbox'][i].datesent.toString().split(" ")[0] + "</span></h3>" +
"</td>" +
"<td><button class='delete-item' onclick='deleteMessage(" + inboxMessages['inbox'][i].message_id + ");' src='/images/delete-item.gif' alt='Delete Message' title='Delete Message' style='cursor: pointer; float:left; margin-left: 5px; margin-top:-3px;'></button></td>" +
"</tr>"
);
// check if the message has been read
if (inboxMessages['inbox'][i].read == 0) {
// not read
$("#message-subject").addClass('read-message');
} else {
// read
$("#message-subject").removeClass('read-message');
}
inbox_msg_count++;
}
}
Now if I alert out the values of user_type and read, I get the correct values, based on the message it's iterating over. But when it outputs, it's only using the value of the first message.
I need to be able to dynamically style the messages with jquery, based on these values. Can someone please tell me why this isn't working...
Well, for one thing, you are using an ID selector:
$("#message-subject").addClass('read-message');
When you actually have a class:
<h3 class='message-subject'...
Use:
$(".message-subject").addClass('read-message');
Secondly, you are making an assignment (=) instead of doing a comparison (==) on user_type.
Might I suggest a different approach instead of a big if..then..else?
Use an array to index your user_types:
var user_type_labels = [ 'CANDIDATE', 'DONOR', 'GROUP' ];
function loadInboxTable() {
for (var i = 0; i < inboxMessages['inbox'].length - 1; i++) {
first_msg_id = inboxMessages['inbox'][0].message_id;
// One line instead of an if/then/else
var user_type = user_type_labels[ inboxMessages['inbox'][i].user_type ];
...
Third, you are adding multiple items with the same ID to your DOM. This is not legal and has undefined consequences.
<input type='hidden' id='user_type' value='...
<input type='hidden' id='read' value='...
You need to use classes for this.
<input type='hidden' class='user_type' value='...
<input type='hidden' class='read' value='...
In your code I think you meant to do the following
if (inboxMessages['inbox'][i].user_type === 1)
Notice the equal signs. What you currently have will always be true and user_type will always be assigned to DONOR

missing ; before statement

I've checked the other answers to similar questions - but so far no luck.
I have the following code:
$("#alphaindex").click(function(e) {
var item = $(this).attr("title");
e.preventDefault();
$.getJSON("getContacts.cfc?method=getContacts&returnformat=json",{"alpha":item}, function(res,code){
if(res.ROWCOUNT > 0){
for(var i=0; i<res.ROWCOUNT; i++) {
s += "<h3 class='postTitle'>" + res.DATA.CONTACTFIRSTNAME[i] res.DATA.CONTACTLASTNAME[i] + "</h3>"
+ "<p class='postDesc'>" + res.DATA.CONTACTEMAIL[i] + "</p>"
+ "<p class='postDesc'>" + res.DATA.CONTACTMOBILE[i] + "</p> <br class='clr' />"
};
s += "";
}
else {
var s = "Sorry, nothing matched your search.";
}
$("#results").html(s);
},"json");
})
});
and I'm getting the ; missing before statement message in relation to the line:
s += "<h3 class='postTitle'>...res.DATA.CONTACTLASTNAME[i] + "</h3>"
according to firebug.
I'm sure it's something obvious - hopefully your eyes will spot it where mine have failed!
Aren't you missing a + sign between these two in that line?
res.DATA.CONTACTFIRSTNAME[i] res.DATA.CONTACTLASTNAME[i]

Categories

Resources