Div not being created - javascript

I am converting existing code into template code since it is much cleaner, I am using Mustache as my choice of template engine. I am having trouble getting the below code to work I have included both the old working code and the new Mustache code. The problem is that the div is not being created at all and it just places a < inside of the DealerInfo div.
This is the converted code:
for(i=0; i< markers.length; i++) {
var testContent = Mustache.render("<div class='{{info_content}}'><h3>{{dealerName}}</h3>" +
"<p>{{address}}<br/>{{city}}, {{state}} {{zip}}<br/>" +
"<a href='{{href}}'>{{hrefTitle}}</a></p></div>", {
info_content: "info_content",
dealerName: markers[i][3],
address: markers[i][2],
city: markers[i][4],
state: markers[i][5],
zip: markers[i][8],
href: markers[i][6]
});
infoWindowContent.push(testContent);
}
This is the old code:
for(i=0; i< markers.length; i++) {
var testContent = ['<div class="info_content">' + '<h3>' + markers[i][3] + '</h3>' + '<p>' + markers[i][2] + '<BR />' + markers[i][4] + ', ' + markers[i][5] + ' ' + markers[i][8] + '</p>' + '<BR /> ' + markers[i][6] +'' +'</div>'];
infoWindowContent.push(testContent);
}
This is how I am getting the info to output into the div:
document.getElementById("DealerInfo").innerHTML=infoWindowContent[i][0];

Your problem is:
document.getElementById("DealerInfo").innerHTML=infoWindowContent[i][0];
In your new code, you are making an array of strings, so infoWindowContent[i][0] gives you the 1st character in the string created via Mustache.render
document.getElementById("DealerInfo").innerHTML=infoWindowContent[i];
should do the trick.
By the way, you can pass an array to Mustache and have it iterate over the items.

I don't know if this will fix your problem, but I would start by putting your string template into a variable and your data into a variable and then calling the Mustache.render function on those. I suspect the mess you are sending to Mustache is getting jacked somehow.

Related

How can I load data from a service that returns JSON and create content using jQuery?

I am a beginner in JS .. so I am reaching out to you, hoping someone could enlighten me! :)
I have been given a JSON link listing a lot of infos and I must create an html using at least 2 pieces of info from this JSON link.
I have already imported my stylesheets (+script) in the html and I coded this in my script.js :
$.getJSON('myjsonlink', function(json) {
console.log(json);
});
If one of you guys have a moment to give me hand, it would be awesome! Thank you so much in advance.
Athena.
There are few issues with the way you are reading data and rendering it:
There is no naruto property on response, it is results instead.
img is not a valid property, it should be image_url instead.
Let's fix it:
$('#get-data').click(function() {
var showData = $('#show-data');
$.getJSON('https://api.jikan.moe/v3/search/anime?q=naruto', function(data) {
var naruto = data.results;
for (var i = 0; i < naruto.length; i++) {
var anime = naruto[i];
var html = '<div class="card">' + '<img src="' + anime.image_url + '">' + '<div class="cardcontainer">' + '<p>' + anime.title + '</p>' + '<p>' + anime.synopsis + '</p>' + '</div>' + '</div>';
showData.append(html);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="get-data">Load Data</button>
<div id="show-data"></div>

Put all code in function

Here I have an example of how to create a 'side_bar' with javascript when I click on marker
var side_bar_html = "<a href='javascript:google.maps.event.trigger(gmarkers["+parseInt(gmarkers.length-1)+"],\"click\");'>"+place.name+"</a><br>"+ $('<div>').raty({ score: place.rating, path: 'http://wbotelhos.com/raty/lib/img' }) +"</br>";
document.getElementById('side_bar').innerHTML += side_bar_html;
}
''raty is jquery plugin for visualise rating with stars''
but this code give me this results:
Name of place
[object Object]
... ...
How I can put this code in function to work it correctly?
Is any way to do this?
You are concatenating a jQuery wrapper to a string, that is the reason
without changing much from your code
var side_bar_html = "<a href='javascript:google.maps.event.trigger(gmarkers[" + parseInt(gmarkers.length - 1) + "],\"click\");'>" + place.name + "</a><br>" + '<div class="raty" />' + "</br>";
$(side_bar_html).appendTo('#side_bar').filter('.raty').raty({
score : place.rating,
path : 'http://wbotelhos.com/raty/lib/img'
})

Conditional javascript for Google Map values

I'm passing some variables to my google maps scrip to output an address in an info window. The variables are being pulled from a database, but not all of them will always exist. Using the following code I sometimes end up with multiple <br> tags in a row, meaning I get awkward breaks in the content.
So my question is how do I make it conditional so that only the variables that exist will display, followed by a <br>?
var contentString = '<div id="map_info">'+
'<h4>' + gmapsstring.gmapaddressname + '</h4>'+
'<div id="bodyContent">'+
'<p>' + gmapsstring.gmapaddressstreet + '<br>' +
gmapsstring.gmapaddressline2 + '<br>' +
gmapsstring.gmapaddressline3 + '<br>' +
'<span class="gmap_postcode">' + gmapsstring.gmapaddresspostcode + '</span></p>'+
'</div>';
Any suggestions would be greatly appreciated.
Thanks
You can use the length property of the variables, so you'd have something like:
var contentString = '<div id="map_info">';
if( gmapsstring.gmapaddressname.length > 0 ) {
contentString += '<h4>' + gmapsstring.gmapaddressname + '</h4>';
}
and so on. Or even better, you can loop through the properties, using a similar code.

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

jQuery "undefined" prints when appending to html element

I'm making a jQuery MP3 player. The song structure is first generated (including the information about the song), and then the structure is appended to a div using jQuery like this:
function loadFromPlaylist(playlist) {
var songsStructure;
for (var i=0; i<playlist.length; i++) {
songsStructure +=
"<div id='song" + i + "'>" +
"<span class='mpPlaylistArtist'>" + playlist[i].artist + "</span>" +
"<span class='mpPlaylistSong'>" + playlist[i].song + "</span>" +
"<span class='mpPlaylistAlbum'>" + playlist[i].album + "</span>" +
"</div>";
}
$('#mpTracks').append(songsStructure);
}
This works perfectly except for one thing. When the items are displayed in the browser, a string ("undefined") is printed above the songs, like so:
<div id="mpTracks">
"undefined"
<div id="song0">...</div>
<div id="song1">...</div>
</div>
Googling this problem yielded alot of related problems but that didn't help me.
Does anyone know what the problem might be?
Initialize your variable to an empty string, before using it:
var songsStructure = '';
You did not set an initial value, so it is set to undefined. According to JS rules for concatination, this undefinedis then concatenated with the strings generated by the for loop leading to your result.
You have to initialize the songsStructure variable.
Write
function loadFromPlaylist(playlist) {
var songsStructure="";
and your problem will be solved.

Categories