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
})
Related
I can currently add a <li> element to my webpage using Javascript with information from a JSON file.
However, when I try and add another <li> element underneath the first one using the same methods it replaces the first one instead of adding it below the first one.
How do I get it to add another instead of replacing it?
Here is my Javascript code:
$('#links').html('<li>' + jsonObj.pageText[5].ref1 + '</li>')
$('#links').html('<li>' + jsonObj.pageText[5].ref2 + '</li>')
ref2 replaces the first one.
Use append or preppend instead of html
The .html(...) command replaces the html, so you would need to:
$('#links').html('<li>' + jsonObj.pageText[5].ref1+'</li>')
$('#links').html($('#links').html() + '<li>' + jsonObj.pageText[5].ref2+'</li>')
...or:
$('#links').append($('<li>').html(jsonObj.pageText[5].ref1))
$('#links').append($('<li>').html(jsonObj.pageText[5].ref2))
I want to build a list with a Javascript that uses Append function.
I have a index.php file, script.js file and a search.php file that makes the mysql query.
I got it all to work but the layout is not the best. So i wounder how to make the layout better.
I want it to be displayed as a list this should be done with CSS or table?
Right now it just shows up like this 414622570992222
this.number=70992222
this.code=4146225
So what i want it to like like is a list without boarders like this (but no borders).
----------------------
| Number | Code |
----------------------
| 70992222 | 4146225 |
----------------------
Here is some code from my script.js file.
$.each(data.results, function(){
//Give the list element a rel with the data results ID incase we want to act on this later, like selecting from the list
$('#results-list').append("<li rel='" + this.number + "'>" + this.code + this.number + "</li>");
And this is the display line in my index.php file
<div id='results-holder'>
<ul id='results-list'>
replace your ul tag with a table
<table id='results-list'></table>
then append table headings and rows to your table with jquery.
$('#results-list').append("<tr><th>number</th><th>code</th></tr>");
$('#results-list').append("<tr><td>"+ this.number + "</td><td>" + this.code + "</td></tr>");
more info about html tables can be found here:
http://www.w3schools.com/html/html_tables.asp
It's better as table.
here is working example with tables.
just design it as you want.
Html
<div id='results-holder'>
<table id='results-list'>
<tr>
<th>
number
</th>
<th>
code
</th>
</tr>
</table>
</div>
Javascript
$(document).ready(function(){
$.each(data.results, function() {
$('#results-list').append("<tr><td rel='" + this.number + "'>" + this.code + "</td><td>" + this.number + "</td></tr>");
});
});
jsFiddle
this should be done with CSS or table?
These are not mutually exclusive. <table> is an HTML element, which like other elements you should choose if it has semantic purpose, i.e. if the element contains data that pertains to what the element stands for. Then you use CSS to make it look the way you want to.
If you have a paragraph of text that needs to be very huge, it's still a paragraph, so you put it in a <p> and then you style it with CSS to look big. Putting it in a <h1> element would also make it big, but that element is for titles.
If you have tabular data, like showing the contents of a database table you should use a <table>. Then you use CSS to hide the borders.
I'd do something like this:
$.each(data.results, function(){
$('#results-list').append("<tr><td>" + this.code + "'</td><td>" + this.number + "</td></tr>");
});
And make the #results-list a <table>
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.
I have this page where I append my h1-tag with jquery like:
$('.name').append('<h1 style="margin-bottom=20px;">' + name +'</h1>');
The h1 tag, and the content of the tag, displays nicely, but when I test my page in various seo tools ( for example this one: http://www.seositecheckup.com/) I get the message that the page has no h1 tag.
Which of course is not so good from a seo point of view. Does anyonme recognize this problem? On a similar note: On the homepage I print out a list with with a javascript for loop and append the listing html and content:
$('#list').append("<div class='point'><a href='" + str + "&id=" + id + "' onmouseover='infoShow(" + i + ")' onmouseout='infoClose(" + i + ")'><H3>" + titel +
"</H3></a><div class='address'>" + name + "</div>" + trivsel + "<div class='star"+i+"'></div></div></a>");
I looks fine on the page, but when I look at googles cahced version of the site, the listing is not there and the page looks blank.
Web crawlers don't execute your JavaScript, so the <h1> tag isn't created. If you want this tag to be visible to web crawlers, you need to generate it with your serverside language.
What are you expecting? The "different seo tools" like the one you linked does not execute any javascript (usually). They work with the original state of your HTML.
I hope to get some advise about how to write the javascript and jQuery code more beautiful and gain more readability.
In this case, I hope to insert table inside a list element. Both list and table are added dynamic by using script.
I have some code like this:
$('#Items').append("<ul></ul>");
var car_index;
var photo_index;
var lot_index;
for (car_index = 0; car_index < cars.length; car_index++)
{
lot_index = car_index + 1;
//From here, I thought the code is really ugly...though it works.
//I can't image that I will need to adde 3 rows with 6 cols into the table by using this way
//Also each col may has their own style need to be assigned....
//Any advise??
$('#Items ul').append("<li id='r_" + car_index +"'></li>");
$('#r_' + car_index).append("<table cellspacing='2' cellpadding='0'><tr><td width='50' align='left' style='font-size:10pt; font-weight:bold'>Lot " + lot_index +"</td></tr></table>");
}
As I write in the comments of above code. I could use append method and put a lot of HTML code in there. However it really looks ugly... and in the above example, I just added one row in the list. In the final goal, I have to add three rows, with about 6 cells. Each cell will have their own style set for the content. It will really be a mess.
Any advice will be appreciate! Thank you!
Perhaps use templating via either Mustache or jQuery.
See more: What Javascript Template Engines you recommend?
try this, coz
$('#Items ul').append("<li id='r_" + car_index +"'></li>); is not enclosed between " "
$('#Items ul').append("<li id='r_"+car_index+"'></li>");
$('#r_' + car_index).append("<table cellspacing='2' cellpadding='0'><tr><td width='50' align='left' style='font-size:10pt; font-weight:bold'>Lot " + lot_index +"</td></tr></table>");
}
Alright...After some thought, I find a way which will be more clear to write this kind of code. I'm not sure if this is the goog choice since it will require more work...but I feel it is better to write this way.
The idea is really simple, create object to store the HTML tags which will fixed for every block. As my example, it is a table will repeated every time a list will be added. So why not store all fixed table tags and their style attribute into one array like object?
var unit =
{
table_header : "<table border = '1'>",
row_1_col_1 : "<tr><td>Lot ",
row_1_col_2 : "</td><td><a class='addto' href='#'>Add to like</a>",
row_2_col_1 : "</td></tr><tr><td>",
row_2_col_2 : "</td><td><img src='",
row_3 : "'></td></tr><tr><td>",
table_end : "</td></tr></table><hr />"
};
Make this variable global, than when you need to add table, the original code:
$('#r_' + car_index).append("<table cellspacing='2' cellpadding='0'><tr><td width='50' align='left' style='font-size:10pt; font-weight:bold'>Lot " + lot_index +"</td></tr></table>");
Will become like this:
$('#r_' + car_index).append(unit['table_header'] +
unit['row_1_col_1'] + "Content in cell 1" +
unit['row_1_col_2'] + "Content in cell 2" +
unit['row_2_col_1'] + "Content in cell 3" +
unit['row_2_col_2'] + "Content in cell 4" +
unit['row_3'] + unit['table_end']);
Just be careful about double quote sign and single quote sign, and also, the array's index need to be quoted(see javascript array's use for detail if you got problem).
I think the advantage of this method is much more easy to modify the table. Add row, change content, or change style make much more easy since it use the single object.
I also not sure if this is a good way or not, hope to hear more about your thought! Thank you!