I'm using the z weatherfeed plugin.
It already pulls most of the data from yweather api but I need the latitude and longitude.
The plugin gets the data for each item element like this for example:
html += '<div class="weatherCountry">'+ feed.location.country +'</div>';
However, if I try this...
html += '<div class="latitude">' + feed.item.geo.lat + '</div>';
html += '<div class="longitude">' + feed.item.geo.long + '</div>';
...it doesn't get the data for these elements.
How should I go about accessing both the geo:lat and geo:long?
Here's a live example: http://jsbin.com/sibafeke/1/edit
The data for geo:lat and geo:long can be accessed this way:
html += '<div class="latitude">' + feed.item.lat + '</div>';
html += '<div class="longitude">' + feed.item.long + '</div>';
Related
I'm working on the Contentful CMS for posting some data and retrieving it in an html page. I use JavaScript to display those in bootstrap grid columns, but it not showing the data properly.
here is my code:
<div class="row justify-content-center">
<div id="content"></div>
</div>
var client = contentful.createClient({
space: '#######',
accessToken: '#######'
})
var container = document.querySelector('#content');
client.getEntries()
.then(function(entries) {
container.innerHTML = renderProducts(entries.items)
})
function renderProducts(products) {
products.map(function(product) {
console.log(product.fields)
return '<div class="col-lg-4 col-md-6">' +
'<a href="service-details.html" class="single-feature wow fadeInUp">' +
'<img src="assets/images/icon/064-vector.png" alt="">' +
'<div class="content">' +
'<h4 class="title">' +
'<p>cool</p>' +
'</h4>'+
'</div>' +
'</a>' +
'</div>'
})
}
It showing the data in console properly, but the HTML is not rendering the way I want.
Heyo. I didn't test I could see two potential issues. renderProducts is not returning anything. You could try changing it to return your mapped products. And then innerHTML expects a string value, which means that you'd have to join your mapped array together.
function renderProducts(products) {
//👇add a return here
return products.map(function(product) {
console.log(product.fields)
return '<div class="col-lg-4 col-md-6">' +
'<a href="service-details.html" class="single-feature wow fadeInUp">' +
'<img src="assets/images/icon/064-vector.png" alt="">' +
'<div class="content">' +
'<h4 class="title">' +
'<p>cool</p>' +
'</h4>'+
'</div>' +
'</a>' +
'</div>'
}).join('');
// 👆 join the array of strings together to one long string
}
I am dynamically creating Div Text in JS and was wondering how I access the various text upon click.
Here is what I have tried so far;
My Dynamically created div
function Message(Side, message) {
var divChat = '<div class="direct-chat-msg ' + Side + '">' +
'<div id="myDiv" class="direct-chat-text">' + message + '</div>' +
'<div id="accountMenu">' +
'<li onclick = "getMessage(' + message + ')" id="replyDiv">Reply</li>' +
'<li>Preferences</li>' +
'</ul>' +
'</div></div>';
$('#divChatWindow').append(divChat);
}
JS when the li is clicked on.
function getMessage(str) {
alert(str);
}
The error I am getting is:
Uncaught ReferenceError: *whaeverthemessageis* is not defined
at HTMLLIElement.onclick
What is the best solution to solve this problem?
Thanks =)
You have malformed html using single and double quotes. The message is being treated as a variable, not a string, hence the undefined error.
replace:
'<li onclick = "getMessage(' + message + ')" id="replyDiv">Reply</li>' +
with this:
'<li onclick = "getMessage(\'' + message + '\')" id="replyDiv">Reply</li>' +
I'm not exactly sure what the problem is, but here is a working Playcode
I have an array in a JSON file and what I want to do is pull a single entry from the array and display it when the page loads.
I have gotten partway there using this question and answer, however my attempt to adapt this answer causes the output html block to repeat the array items in sequence instead of simply picking one.
Here is a screenshot of what I get:
screenshot of output
I am likely doing something real stupid, and I hope someone can point this out.
My script is as follows:
$.getJSON('recommend.json', function(data) {
var entry = data[Math.floor(Math.random()*data.length)];
$.each(data, function(entryIndex, entry) {
var html = '<div class="rec_img"><img src="./recs/' + entry['img'] + '" /></div>';
html += '<span class="rec_title">' + entry['title'] + '</span><p>';
html += '<span class="rec_author">' + entry['author'] + '</span><p>';
html += '<span class="rec_blurb">' + entry['blurb'] + '</span>';
$('#recblock').append(html).fadeIn();
});
});
Any questions just let me know.
Cut this:
$.each(data, function(entryIndex, entry) {
The whole purpose of $.each is to iterate over the entire array, which is the opposite of what you want. You're already defining entry earlier as a random entry from the data.
So you'll have:
$.getJSON('recommend.json', function(data) {
var entry = data[Math.floor(Math.random()*data.length)];
var html = '<div class="rec_img"><img src="./recs/' + entry['img'] + '" /></div>';
html += '<span class="rec_title">' + entry['title'] + '</span><p>';
html += '<span class="rec_author">' + entry['author'] + '</span><p>';
html += '<span class="rec_blurb">' + entry['blurb'] + '</span>';
$('#recblock').append(html).fadeIn();
});
The error apears when i click the blue "add row" button". Any help trying to troubleshoot the problem?
Jquery is loaded before the tool and the script is run after the page is loaded
error occurs in line 9 of this code:
if($.isEmptyObject(num)) // check if any row already exist if not set 1
num = 1;
else // check if any row already exist if yes set max + 1
num = Math.max.apply(Math,num) + 1;
html += '<div id="megamenu-row-'+num+'" class="megamenu-row row">';
html += '<div class="clearfix">';
html += '<div class="add-column-button-container col-lg-6">';
html += ''+add_megamenu_column+'';
html += '</div>';
html += '<div class="remove-row-button col-lg-6 text-right">';
html += '<a class="btn btn-danger btn-remove-row" href="#" onclick="return false;">'+btn_remove_row_text+'</a>';
html += '</div">';
html += '</div>';
html += '<input type="hidden" name="row_content" />';
html += '</div>';
return html;
}
You might imported some products/categories with wrong \r or \n in their names and this brokes up back.js. Replace in /modules/tmmegamenu/views/templates/admin/additem.tpl on line 223
{addJsDef option_list=$option_select}
on
{addJsDef option_list=$option_select|replace:"\r":""|replace:"\n":""}
This should works.
I'm adding some amount of div based on the xml list which contain some data and url
Currently trying to use onClick but it doesn't seems right on the js that loads the div part.
//retrieve each of the data field from ITEM
var url = item.find('url').text();
var image = item.find('project-img').text();
var title = item.find('id').text();
var desc = item.find('desc').text();
var html;
//Embed them into HTML code
html = '<div class="project"><img src="' + image + '" alt="' + title + '" />';
html += '<div class="info">';
html += '<div class="title">'+title+'</div>';
html += '<div role="button" class="launch" onclick="window.open('+url+',"mywindow");">Launch Website</div>';
html += '<div role="button" class="more">View More</div>';
html += '</div></div>';
I think it somehow get mess up on the adding 'url' part with ' or "
Or there would be a much easier way to call a link on such situation?
as per your requirement correct syntax would be
html += '<div role="button" class="launch" onclick="window.open(\''+url+'\',\'mywindow\');">Launch Website</div>';
I think you have an error (the only one i could spot), so try the following:
onclick="window.open('+url+',\'mywindow\');"