Initializing isotope with dynamic data json - javascript

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.

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");

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

Bootstrap tooltips and popover for JS dynamic entries

Bootstrap 3 tooltips and popovers work perfectly within html code, but it seems it does not apply to dynamically built entries. For example :
urlline += '<a href="' + this + '" target="_blank" ';
urlline += 'data-content="' + ircline + '" ';
urlline += 'data-placement="bottom" ';
urlline += 'data-container="body" ';
urlline += 'data-toggle="popover">';
urlline += this + '</a>';
In that scenario, a hover on the created links won't show any popover. Same result with tooltips.
I have popover initialized with $('[data-toggle="popover"]').popover({trigger: 'hover'}); and it works for existing HTML, just not for dynamically created entries.
I'm no JS expert so I might be missing something, any hint?
Are you inserting urlline into DOM using jQuery, something like this $('#somelementID').html(urlline); ?
If yes, then initialize bootstrap popover/tooltip after inserting that element into DOM using jquery, using $('a#id').popover({trigger: 'hover'});
try use a function in js with the popover's properties even in your content you can use a ajax o put a html code or finally parameters as you prefer (this work for me in datatable):
function popovers(object, title, content, placement){
$(objet).popover({
html:true,
title: title,
content: content,
placement: placement
})
}

JavaScript variable as HTML link text

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/

More convert jquery object to string

Yes I have see the post here
And I tried that but the problem is, my jquery object looks more like this:
var $foo = $('<ul><li id="' + line.id + '" label="' + label + '" rel="file">' + line.title + '</li></ul>');
$foo.click(function() { openLink(line.url) });
$foo.appendTo($myDiv);
When $myDiv is fully populated I can do this:
var html = $('<div>').append($('#foo').clone()).remove().html();
And I will see all of the lovely HTML, but I don't know if the click stuff will be preserved. See, I want to save the entire DOM modification to localStorage so I can retrieve it quickly since it's pretty static. I need to be able to store it and all its attributes, then yank it back out and restore it, clicks and all.
Does that make sense?
The only way to do this would be to use inline event handlers, which is a bad (and slow) idea.
Instead, you can convert all of your event handlers to live handlers; they will then automatically apply to all matching elements without having to rebind them after changing the DOM.

Categories