We Keep Coding

Creating an html template for an object

I'm creating a web page that should be able to add student courses to a list/grid or whatever kind of html element. I haven't decided what would work best.
I find the courses by using the bootstrap3-typeahead.js and when selecting one of those I want to "add" a "course item" to some sort of basket - like a shopping basket. I have heard that one can use html templates for this, but I can't seem to find any good examples by searching google or in here.
Right now I have loaded a list (1360 items) of objects with attributes:
course id (ranging from 1-1360)
course number
course name
course teacher
course keywords
I want this course item to be an overview of the course. I picture something like this:
Right now I just use the following to add them as <li>elements to a <ul> I've made.
$("#basket").append('<li>' + item.name + ', ' + item.number + '</li>');
Which results in this:
I imagined being able to apply the variables to some sort of template which would be done for every single item that was added, e.i. $("#basket").loadTemplate(<template name>, item.name, item.number etc..)
In short:
I want to know if there's some way of using html templates to create elements that I can control with javascript/JQuery and if possible how this is done?
Thanks!

Yes, you can create a "template" function
//example
var myBox = createBox("computer science", "0122", "programming, databases")
$(".myCourseList").append(myBox)
function createBox(courseName, courseId, courseClasses){
var html = "";
html += "<div class='courseBox'>" +
"<p class='courseName'>" + courseName + "</p>" +
"<p class='courseId'>" + courseId+ "</p>" +
"<p class='courseClasses'>" + courseClasses + "</p>" +
"<p class='xOut'>X</p>" +
"</div>"
return html;
}
Of course you need an entire library for the dragging stuff, but take that as a different task for later.
I've ignored CSS styling, but you would do CSS like normally. just write classes corresponding with those in your code.
Now, when you dynamically create elements, it's important you delegate your bindings.
$(".myCourseList").on("click", "p.xOut", function(){
$(this).closest(".courseBox").remove(); //edited this line
})

upgrading javascript that adds a link to a field

I am trying to change the Sales Stage field label to a hyperlink to pop up a new browser window.
Currently I have a form with a Sales Stage field that has a drop down::
The underlying HTML:
<td title="Select the sales process stage for the opportunity to indicate the probability of closing the opportunity." class="ms-crm-ReadField-Normal ms-crm-FieldLabel-LeftAlign" id="salesstagecode_c"><span class="ms-crm-InlineEditLabel"><span class="ms-crm-InlineEditLabelText" style="text-align: left; max-width: 115px;">Sales Stage</span><div class="ms-crm-Inline-GradientMask" style="display: none;">
</div></span></td>
or perhaps better formatted:
The function that I used previously worked on an older version of the form:
function csjs_AddHyperlinkToLabel(sFieldId, sURL, sWindowOptions) {
    var sCurrentLabel = $("label[for='" + sFieldId + "']").html();
    $("label[for='" + sFieldId + "']").html("" + sCurrentLabel + "");
}
the function above worked on a form with the following html::
What changes would be required to the javascript to change the Sales Stage field label to a hyperlink to pop up a new browser window?
Though I'd be very grateful for a solution, I'm looking for guidance on how to accomplish this. Thank you for your attention and time.
Unfortunately, the solutions below did not work. I ran this through the debugger and here's what I got http://screencast.com/t/fT6tHvXZzvc
The issue here is that we are passing “salesstagecode” to this function:
csjs_AddHyperlinkToLabel("salesstagecode", sPageURL, sWindowFeatures);
and this turns out to be NULL:
var sCurrentLabel = $("label[for='" + sFieldId + "']").html();
*
The issue is that Microsoft changed the way the forms are rendered and
the HTML of the rendered page will no longer work with the way the
function was written. The label is now in a span tag instead of a
label tag. I don't know if there is a way to identify that span and
change the contents to have new HTML to make the text link.
*
How do you update a span tag?

You need to add target="_blank" attribute in your hyperlink markup.

Simple:
change
.... onclick=\"window.open('" + sURL + "', null, '" ....
to
.... onclick=\"window.open('" + sURL + "', '_blank', '" ....

Why are some of my link titles are being placed outside of my <a> tags?

Here is a jsbin so you can see what I mean.
As you can see some of my link titles are being placed outside the tags. Initially I thought this was to do with the fact some of the titles were surrounded by double quotes. I build a function to replace these but it had no effect.
After logging the title[i] before it is appended into the DOM, I can't see any reason why some would be placed inside the tags and some outside. If any one has any suggestions I would be very interested to hear them.

in postURLs function, change the line:
$("#" + subreddit + " > ul").append("<li>" + title[i] + "</li>");
to:
$("#" + subreddit + " > ul").append("<li><a href='" + url[i] + "'>" + title[i] + "</a></li>");
(just added single quotes to href attribute)
that will solve your problem.
next time, please include the code in the question body as well.
cheers.

Apostrophes in jquery/javascript string

I have the following code which appends an icon with an alert after the <a> tag :
$j("li[name='"+node_name+"'] > a").after('<a onmouseover="alert(\' expnote_from_db[n][0] \');" ><ins class="' + selected_class + '"> </ins></a>');
The code above works fine except that it displays exp_from_db[n][0] as a string inside the alert box.
So I changed it to the code below but nothing is displayed now
$j("li[name='"+node_name+"'] > a").after('<a onmouseover="alert(\'"'+ expnote_from_db[n][0] + '"\');" ><ins class="' + selected_class + '"> </ins></a>');
I don't understand where did I go wrong with the apostrophes.
I would appreciate your help regarding this. Thanks

This should work
$j('li[name="'+node_name+'"] > a')
.after('<a onmouseover="alert(\''+ expnote_from_db[n][0] + '\')" ><ins class="' + selected_class + '"> </ins></a>');

The " characters are delimiting the HTML attribute. You are terminating that attribute prematurely.
<a onmouseover="alert(\'"
Nesting JavaScript in HTML attributes is a pain.
Nesting JavaScript in HTML attributes in JavaScript strings is a bigger pain.
Don't do it. Apply event handlers using addEventListener and friends (since you are using jQuery that means using the on method which abstracts them).

JS Alert not showing when using Sharepoint list value

I am using Sharepoint 2007 and writing a web part. In the "RenderContents" method I am writing the html code for displaying page. there is a requirement to display alert message to user when they click a link.
I have written following code-
string alertmessage = Utility.GetLocalizedText("NavigatingToNewPageTxt", "RCCResources", "Common");
writer.Write("<a href='" + clubMemberReportsLink + "' target='new' onClick='alert('" + alertmessage + "');' > ");
Note- My requirement is to get the alert message from Sharepoint list as we use SP list for translations.
when I refreshed the site link was displayed but alert message did not appear.when I checked what was rendered in browser I got following code in browser.
ClubLeaderDownloadreportsText
I tried using following code as well
writer.Write("<a href='" + clubMemberReportsLink + "' target='new' onClick=alert('" + alertmessage + "'); > ");
(I removed the single quote from onclick method.)Still the browser does not display alert message.
this behavior is observed in both browsers. I know I am missing something very simple here...
can you pleas point out any help?

Seems like you need to escape the quotation marks for so that the onclick string is not terminated. Like:
onclick='alert(\"" + alertmessage + "\");'
Hope that helps!