We Keep Coding

jQuery append implementation is breaking

So I have this code that I am trying to alter –
Original:
jQuery(document).ready(function() {
var name = '';
var firstLastName = '[[T6:[[E48:[[S334:fr-id]]-[[S334:px]]:cons.first_name]]]] [[T6:[[E48:[[S334:fr-id]]-[[S334:px]]:cons.last_name]]]]';
var screenname = '[[T6:[[S48:0:screenname]]]]';
if (screenname) {
name = screenname;
} else {
name = firstLastName;
}
var splitName = name.split('');
var nameCheck = splitName[splitName.length-1];
jQuery('#personal_page_header h2').html("Support " + name + "'s Fundraiser" );
});
someone wrote this up and are no longer here, and what I'm trying to do now is figure out how to instead of replace the existing text, add to it.
So right now what this code does is it replaces the h2 content with the constituents registered name, or screenname.
What I'm trying to do now is append to that so that it will say something like
<h2>
Welcome to my fundraiser
<br/>
"Support" + name + "'s Fundraiser"
</h2>
but unfortunately what I tried breaks the code and stops it from working.
what I tried to do is this:
jQuery('#personal_page_header h2').append('<span><br />"Support " + name + "'s Fundraiser"</span>' );
I've tried to do a variety of other things that gave the same unsuccessful result.
Any help would be really appreciated!
Thanks

This should work for you:
jQuery('#personal_page_header h2').append("<span><br/>Support " + name + "'s Fundraiser</span>");
You've just got your quotations a little out of place.

You need to concatenate your code correctly, so if you'd like to keep the " use ' to concatenate. Further you need to escape the ' inside the string with \:
jQuery('#personal_page_header h2')
.append('<span><br />"Support ' + name + '\'s Fundraiser"</span>');

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.

Javascript Parameter Passing Not Working

The code dynamically creates a listview which works but i want to make it so when a listview item is clicked it sends the a url paramater to another method. When i set a paramater it doesnt alert the paramater, but when i give no parameter it works.
var output =
"<li onclick='openURL()'><h3> Module Code: " +
results.rows.item(i).module
+ "</h3>Room: "
+ results.rows.item(i).room +
"</li>";
The above works - No parameter in openURL();
var output =
"<li onclick='openURL('" + results.rows.item(i).url + "')'><h3> Module Code: " +
results.rows.item(i).module
+ "</h3>Room: "
+ results.rows.item(i).room +
"</li>";
The above doesnt work - I have done alert(results.rows.item(i).url) and it has a value.
function openURL(url) {
alert("opening url " + url);
}
Could someone explain what i'm doing wrong, i've been trying to solve the problem for hours.
Cheers!

You are using single quotes to open the HTML attribute, you can't use it as JavaScript String because you'll be closing the HTML attribute, use double quotes:
var output =
"<li onclick='openURL(\"" + results.rows.item(i).url + "\")'><h3> Module Code: " +
results.rows.item(i).module
+ "</h3>Room: "
+ results.rows.item(i).room +
"</li>";

IE 7 jQuery .append functionality not working

I have the following snippet of code:
$("#QnAList").append("<div id=qdiv" + i + " class=divBase>
<span id='" + i + "'>" + msg.d[i].QuestionText + "</span>
<span id='display'" + i + "'>" + answerDisplay +
"<span class='triage'> </span></div>");
msg.d[i].QuestionText is the problem that I'm having. In FF it is displaying the text perfectly. In IE7 the only thing that is displaying is the answerDisplay value which is input elements that I'm writing out on the fly.
When I tak out all the divs and spans and put in some <p></p> then the msg.d[i].QuestionText displays with the answerDisplay value. Can anyone see anything I'm doing incorrectly with this snippet of code?
Thanks!

There's a problem here:
<span id='display'" + i + "'>" + answerDisplay +
That results in:
<span id='display'nn'>text</span>
So that extra quote is bound to cause issues, it should be:
<span id='display" + i + "'>" + answerDisplay +
Also consider adding quotes to the properties on the outer <div>, or constructing the elements as DOM nodes.

You forgot to close a span, you have cases where the quotes don't work out right, and so on.
This is because it's hard to keep track of what's going on in a long string.
This may be more lines, but it's clearer, so you'll make less errors:
// create empty spans and divs
var span1 = $("<span>");
var span2 = $("<span>");
var span3 = ${"<span>");
var div = $("<div>");
// Add html and attributes you need
span1.attr("id", i);
span1.html(msg.d[i].QuestionText);
span2.attr("id", "display" + i);
span2.html(answerDisplay)
span3.attr("class", "triage");
div.attr("id", "qdiv" + i);
div.attr("class", "divbase");
// Add everything to the DOM
div.append(span1);
div.append(span2);
div.append(span3);
$("#QnAList").append(div);
I think using $("</div>") is actually faster, but I used the form above for readability.

Dumb answer for a dumb question :)
I didn't have the ending span tag here:
...<span id='display'" + i + "'>" + answerDisplay +
"<span class='triage'> </span></div>");
Thanks for everyone that looked at it.
Thanks to Nick Craver who helped me debug it.