We Keep Coding

Missing ) after argument but only for a long string

I am using JavaScript to fill a <div> tag with other <div>s. It has been working until I changed an identifier used inside a onclick event. The old identifier (index) was just a small number from 0-1000, but the new identifier (id) is a uuid.v4() generated string that looks like this:
f5ec8170-e75c-4a93-9997-1a683b7d2e00
I have the exact same code for index and the id. But whenever I click on the button which is suppose to activate the function call with the id as an argument it gives me:
Missing ) after argument
Which does not happen when I click on the button which does the same thing with index as an argument instead of id.
My code:
var id = messages[i].id;
var index = 0;
var newElement =
'<div class="fullMessage" id="fullRightMessage' + i + '">'+
'<h6 class="textMessage">' + messages[i].comment + '</h6>' +
'<button class="likeButtonMessage" onclick="likeClicked(right, ' + index + ', 1);">LIKE</button>' +
'<button class="dislikeButtonMessage" onclick="likeClicked(right, ' + id + ', -1);">DIS</button>' +
'<h4 id="scoreright' + i + '" class="messageScore">' + messages[i].score + '</h4>' +
'</div>'

You do not enclose the uuid with quotation marks. Before it worked because your id was a clean integer which doesn't need them.
Exchange the line with id to
'<button class="dislikeButtonMessage" onclick="likeClicked(right, \'' + id + '\', -1);">DIS</button>' +

Your previous ID was interpreted as an int, which is the reason why it worked.
Your new ID is a string, requiring you to enclose it in quotation marks:
onclick="likeClicked(right, \'' + id + '\', -1);"
This is because this is not valid code:
likeClicked(right, f5ec8170-e75c-4a93-9997-1a683b7d2e00, -1)

Why won't my button delete?

document.getElementById("roster").innerHTML += "<button onclick=\"doSomething()\">+</button>\n" +
"<span onClick=\'$(this).remove();" +
"$(this).prev().remove();" +
"oiDelete(\"" + str + "\");" +
"removeCost(\"" + str + "\");" +
"selectedItem(\"" + str + "\");" +
"frDelete(\"" + str + "\")\';>" +
str + "</span><br>";
So this goes inside a Javascript function I'm working on. What it's supposed to do is create clickable text regions (spans) that disappear when clicked as well as generate a button right before the clickable text that is supposed to be removed when the text is clicked. I can get the text to disappear just fine, but I can't get the darn button to go away.
The code being generated is:
<button onclick="doSomething()">+</button>
<span onclick="$(this).remove();
$(this).prev().remove();
oiDelete("Marneus Calgar");
removeCost("Marneus Calgar");
selectedItem("Marneus Calgar");
frDelete("Marneus Calgar")" ;="">Marneus Calgar</span>
Why is it generating ="" at the end of the opening span tag? why is the button not deleting properly? is $(this).prev().remove() not the correct option?

If we cast aside best practice, this is the working code.
document.getElementById("roster").innerHTML += "<button onclick=\"doSomething()\">+</button>\n" +
"<span onClick=\'$(this).prev().remove();" +
"$(this).remove();" +
"oiDelete(\"" + str + "\");" +
"removeCost(\"" + str + "\");" +
"selectedItem(\"" + str + "\");" +
"frDelete(\"" + str + "\")\'>" +
str + "</span><br>";
The reason why your code doesn't work is because you are removing the span which has onclick function on the fly. It means it can't reach the $(this).prev().remove() bit.
I hope it makes sense.
If you want to go an extra mile, you should put $(this).remove(); after the frDelete() function. Otherwise those 4 functions that you call will never be called.

You messed up quotation marks and of course - call self-remove code at the end (!)
And one tip - encapsulate these additional function in one procedure - it help to keep code cleaner.
document.getElementById('roster').innerHTML += '<button onclick=\'doSomething()\'>+</button>' +
'<span onClick="doCalls(); $(this).prev().remove(); $(this).remove(); ">' + str + '</span><br>';

Javascript creating a li element and assigning text to data-attribute is being truncated

In javascript I am creating a li element as per below which contains only the problem I am seeing.
The data-videoUrl is showing the full url, so all good there.
The issue is the entry.link and entry.title, while debugging, I verified the strings are within quotes. i.e. "This is a pod cast." The data-videoTitle and data-videoDesciption are being truncated though. i.e. "This" will show from the previous example.
I'm not sure what is occuring in the latter two data assignments as I've verified the text is not double quoted etc. What is occuring with the html5 data elements? I can provide a more complete example if needed.
var podItem = document.createElement("li");
podItem.innerHTML = entry.title
+ "<a data-videoUrl=" + entry.link + " "
+ "data-videoTitle=" + entry.title + " "
+ "data-videoDescription=" + entry.contentSnippet + " "
+ "</a>";
document.getElementById("podCastList").innerHTML += podItem.innerHTML;
Here is a the html being generated.
<a data-videourl="http://rss.cnn.com/~r/services/podcasting/studentnews/rss/~3/d3y4Nh_yiZQ/orig-sn-060614.cnn.m4v" data-videotitle="CNN" student="" news="" -="" june="" 6,="" 2014="" data-videodescription="For" our="" last="" show="" of="" the="" 2013-2014="" school="" year,="" cnn="" takes="" a="" look="" back,="" ahead,="" and="" at="" stories="" making="" ...="" <=""></a>
I'm sure there's something I'm not fully understanding. Why would the first data element get the text correctly, and the next two data elements break up the text as in: [data-videotitle="CNN" student="" news=""]. The text is a straight forward sentence quoted i.e. "CNN student news..."
Why would videoUrl work correctly and the other two not?

You need to add some quotes around the attributes...
podItem.innerHTML = entry.title
+ "<a data-videoUrl=\"" + entry.link + "\" "
+ "data-videoTitle=\"" + entry.title + "\" "
+ "data-videoDescription=\"" + entry.contentSnippet + "\" "
+ "</a>";
You'll also want to make sure you escape any quotes that are inside the attributes as well.

escaping single quoted javascript parameters in Razor's Html.Raw

so how can I quote a java script function parameters in Razor's Html.Raw helper?
In order to be able to invoke defined js function it looks like I need to have parameters single-quoted..
while output of NON escaped parameters:
#Html.Raw("<a onClick='copyRowValues(" + name + ", " + localTable + ", " + sqlName + ");' > " + name + " </a>");
translates like:
<a onclick="copyRowValues(ASN, ASN, ASN_RECORD_ID);">
which looks nice, but when those parameters for copyRowValues(...) js function are not single quoted, function is not being called.
so when I add single-quotes like this:
#Html.Raw("<a onClick='copyRowValues('" + name + "', '" + localTable + "', '" + sqlName + "');' > " + name + " </a>");
that produces:
<a 'asn_record_id');'="" 'asn',="" asn',="" onclick="copyRowValues(">
escaping with # or \ just didn't work for me.
Thank you for straightforward solution!

Does using double double-quotes work? e.g.
#Html.Raw("<a onClick=""copyRowValues('" + name + "', '" + localTable + "', '" + sqlName + "');"" > " + name + " </a>");

Why not solution without Html.Raw() ? It's somehow obsollete approach to use it for generating the output html.
Try something like this:
<a onclick="copyRowValues(#name, #localTable, #sqlName)">#name</a>
Hope it helps.

Passed URL string not interpret as a string

I read quite some articles and tried some approaches, but couldn't get it to work.
htmlCode += '<button id="' + addButtonId + '" title="' + addButtonTitle + '" class="button" onclick="getProductUrl(' + url + '); return false;"><span><span>' + addWithButonTitle + '</span></span></button>';
and the function itself:
getProductUrl: function(url) {
return setLocation('\'' + decodeURIComponent(url) + document.getElementById('qty_field').value + '\'');
},
Apparently, the string value of the url is not treated as a string. I get an error of missing bracket here: getProductUrl(http:^//...rest of the url. Of course the problem is not in the bracket, but in the fact that the // are treated as a start of a comment.
So the thing that I have to do is to pass this url string value CORRECTLY as a string.
I tried first decoding and then passing (because decodeURIComponent(url) should return string. Also I tried String(url) and url + "". Also somehow escaping the special characters: url.replace('/','\/') or even the /g thingy, which didn't work at all.
So, all these approaches were unsuccessful. I would really appreciate a hint or a solution here.

Try this one
onclick="getProductUrl('" + url + "');"
For your updated line of code:
htmlCode += '<button id="' + addButtonId + '" title="' + addButtonTitle + '" class="button" onclick="getProductUrl(\'' + url + '\'); return false;"><span><span>' + addWithButonTitle + '</span></span></button>';