missing ; before statement - javascript

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]

Related

Issue running javascript in webbrowser control c#

Sceneario:
I am making custom html in a WebBrowser control basically it is to enter student marks . On a column Total score when user enters number in it the grade in next column should be automatically populated, assuming for now score above 50 then grade = A , else grade = F.
My Code:
This is how i am making html :
for (int i = 0; i < studentData.Tables[0].Rows.Count; i++)
{
string fullname = studentData.Tables[0].Rows[i]["first name"].ToString().ToUpper() + " " + studentData.Tables[0].Rows[i]["surname"].ToString().ToUpper() + " " + studentData.Tables[0].Rows[i]["Other name"].ToString().ToUpper();
string studentNumber = studentData.Tables[0].Rows[i]["studentformnum"].ToString().ToUpper();
string tmptxt = string.Empty;
tmptxt = "<tr class=\"records\"><td><input onchange=\"doit('score" + i + "','grade_" + i + "')\" ";
tmptxt += "id=\"totalScore\" id=\"score" + i + "\" style=\"text-align:center\" type=\"text\" /></td>";
tmptxt += "<td><input id=\"grade_" + i + "\" style=\"text-align:center\" type=\"text\" /></td><td></td></tr>";
sb.Append(tmptxt);
}
And Javascript Funtion:
content = content.Replace("{JAVASCRIPT}", "<script type='text/javascript'>function doit(tag,tag2)
{ alert(tag); var score= document.getElementById(tag).value; alert(score);}</script>");
alert(tag) works then i get error.
This Does not work i get error popup , value null or undefined etc..
If i just do alert('abc'); i see alert .
Any suggestion what i am missing here?
The single/double quotes for tmptext are all wrong.

Strange bug when trying to add an argument to a javascript function call from within html

Ok, so I'm not sure what it is that I'm missing here, but I'm having a strange issue with this bug.
Card.prototype.toLink = function()
{
var txt = "";
if (this.promo == 'false')
{
var image = this.set.replace(/ /g, "_") + '/' + this.number;
txt = txt + "<a id='" + this.node + "' onmouseover=changeImage('" + image + "')>" + this.toString() + "</a>";
}
else
{
var image = this.set.replace(/ /g, "_") + '/' + this.rarity + this.number;
txt = txt + "<a id='" + this.node + "' onmouseover=changeImage('" + image + "')>" + this.toString() + "</a>";
}
return txt;
}
The above code produces a link to a card with the proper structure
<a id='node' onmouseover='changeImage('set/number')> this.toString() </a>
But if I add in some extra text, as part of an existing string in the additions, I get a seriously borked tag
If I change the function to
Card.prototype.toLink = function()
{
var txt = "";
if (this.promo == 'false')
{
var image = this.set.replace(/ /g, "_") + '/' + this.number;
txt = txt + "<a id='" + this.node + "' onmouseover=changeImage('" + image + "' , this)>" + this.toString() + "</a>";
}
else
{
var image = this.set.replace(/ /g, "_") + '/' + this.rarity + this.number;
txt = txt + "<a id='" + this.node + "' onmouseover=changeImage('" + image + "' , this)>" + this.toString() + "</a>";
}
return txt;
}
I end up with a tag that looks like this.
<a id='node' this)="" ,="" onmouseover="changeImage("set/number"> this.toString() </a>
Maybe I just need an extra pair of eyes on this to see what might be breaking it, but something is not jiving with me. If anyone has any idea why adding part of an expression like this may be breaking it, please let me know.
What I want the output to look like is, where the only variables in the final code are represented by anything in []
<a id='[node]' onmouseover="changeImage([image], this)"> [this.toString()] </a>
Edit: I am currently trying to view the html file that's created with Firefox, if that could help to answer anything.
Adding part of an expression? You don't seem to be adding part of an expression.
onmouseover=changeImage('" + image + "' , this)>"
This code is adding, as can be seen by the highlighting on your question, a string to your code.
"' , this)>"
I presume this is your issue. Have you tried:
txt = txt + "<a id='" + this.node +
"' onmouseover=changeImage('" + image + "' ,'"+ this + "')>" +
this.toString() + "</a>";

conflict between for loop and array calling

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

Removing objects from an array onclick

I have a an array of items which holds item objects. I want to create a function that when I click on a certain item it is removed from the array. I know I need to use something like splice and I have implemented the following solution but it does the seem to work.
Can anyone tell me what am I doing wrong.
function updateView() {
for (var i = 0; i < storeItems.length; i++) {
output += "<a href='#' id='itemTitle' onclick='removeRecord(" + i + ");'>"
+ storeItems[i].title + " " + "\n" + "</a>";
}
function removeRecord(i) {
storeItems.splice(i, 1);
var newItem = "";
// re-display the records from storeItems.
for (var i = 0; i < storeItems.length; i++) {
newItem += "<a href='#' onclick='removeRecord(" + i + ");'>X</a> "
+ storeItems[i] + " <br>";
};
document.getElementById('foods').innerHTML = newItem;
}
I think this the error is in the line below:
output += "<a href='#' id='itemTitle' onclick='removeRecord(" + i + ");'>" + storeItems[i].title + " " + "\n" + "</a>";
Because it does not recognise the "onclick" event even when I try to do a test with a simple alert.
Can anyone tell me what am I doing wrong. Also if you think you need more information to answer this question please let me know.
Thank you in advance.
Try ...
storeItems = storeItems.splice(i, 1);
WRONG: Basically, you have to assign the spliced array to something.
UODATE:
Here's the way I would do it ... tested in jsFiddle:
var storeItems = [{
title: "Dog"
}, {
title: "Cat"
}, {
title: "Bird"
}];
var foods = document.getElementById('foods');
foods.addEventListener('click', function(e) {
var index = e.target.getAttribute('value');
storeItems.splice(index, 1);
// re-display the records from storeItems.
updateView();
});
function updateView() {
var output = "";
for (var i = 0; i < storeItems.length; i++) {
output += "<a href='#' class='item' value='" + i + "'>" + storeItems[i].title + " " + "\n" + "</a>";
}
document.getElementById('foods').innerHTML = output;
}
updateView();
HTML:
<div id='foods'></div>
This effectively takes the onclick event off of the anchor tag (you could have them on any type of tag at this point) and I also reused your updateView code in the Listener so that it only needs maintained in one location.

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

Categories

Resources