JavaScript variable as HTML link text - javascript

I am trying to something like this:
JS variable
I have seen multiple threads where someone is trying to do something similar but none of these solutions seem to be working for me. I am trying to pull data from an API and I would like to use a variable from the API as the text for the link. Right now I am using jquery to do this:
$('#tracktitle').append($("<a href='" + track.permalink_url + "' target='_blank'>Title</a><br>").html(track.title));
but would like to have the 'html(track.title)' in place of 'Title'
any help would be greatly appreciated

What about?
$('#tracktitle').append("<a href='" + track.permalink_url + "' target='_blank'>" + track.title +"</a><br>")

When you create a new element with jQuery you can pass just the tag as the first argument to $() and then pass an object with the various properties you want to set as the second argument:
$("<a></a>", {
href : track.permalink_url,
html : track.title
}).appendTo("#tracktitle")
.after("<br>");
Demo: http://jsfiddle.net/7CVnZ/

Related

How do I use jQuery's insertBefore() function with a javascript string of HTML?

I am performing some DOM manipulation once my page loads and I was hoping to add some html right before an a specific div on the page. Not sure what I'm doing wrong here, I'm sure there's a simple way to accomplish this...
var finalStringHtml = '<div id="chartLinks">' + tableString + '</div>';
$(finalStringHtml.html().insertBefore("#chart_div")); //fails
$(toString(finalStringHtml).html().insertBefore("#chart_div")); //fails
You don't need the .html() call. (full docs: http://api.jquery.com/insertbefore/)
Try:
$(finalStringHtml).insertBefore("#chart_div");
If you want to, you can do the full code on one line and not create the variable:
$('<div id="chartLinks">' + tableString + '</div>').insertBefore("#chart_div");

Simple Javascript Image

`jQuery('#resultWorkingDays').html(numberWithCommas(resultWorkingDays) + ' days')`
Using above prints 'days' on the end of a string. I want to change 'days' to an image source. I've searched & tried a lot of different things but none seem to work.
Complete JS novice, help much appreciated
Just include the HTML.
jQuery('#resultWorkingDays').html(numberWithCommas(resultWorkingDays) + ' <img src="yourImage.jpg">');
jQuery("#resultWorkingDays").html(numberWithCommas(resultWorkingDays) + "<img src='\images\...\name.png />");

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
})

Initializing isotope with dynamic data json

I have searched around but no help. My issue is I am using the isotope jQuery library to show data (of course) and I am trying to do this by using a dynamic json dataset. I placed the data in a .json file and I'm reading it in and parsing information, then placing that info in divs under my container div like so:
$('#infoContainer').append('<div class="hospital ' + $number + '"><p>' + i + '<br />' + hospital.address + '<br />' + hospital.citystatezip + '</p></div>');
Of course that portion is in an .each() function for each hospital. My problem is that the initialization code won't show the dynamic divs like it shows when you manually type them. I'm using what is given on the isotope website:
$('#infoContainer').isotope({
itemSelector: '.hospital'
});
Any ideas?
The answer is found on this question: JavaScript Isotope- How to manage dynamic data set (re-initialize Isotope)
I needed to use the insert method.

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

Categories