I have created an image gallery grid and trying to output the images. I have attempted putting the path in var thumb ="path"; and then concatenating it to the json_data but the path to the image cannot be read. Any ideas?
function ajaxfunction(json_data){
var path = "images/products/shirts/smallthumbs/"; // path to image
var url = "#";
var table = $("<table></table>");
var tr = $("<tr></tr>").appendTo(table);
for (var i = 0; i < json_data.length ; i++){
if (i %4==0)
tr = $("<tr></tr>").appendTo(table);
$(tr).append("<td>"+json_data[i].prod_name+"<br/>"+
" " + "<img src="+path+json_data[i].pic"/>"+"<br/>"+ //attempting output
"\u00A3"+json_data[i].price+"</td>");
}
$("#maindisplay").append(table);
}
This line $(tr).append("<td>"+json_data[i].prod_name+"<br/>"+
" " + "<img src="+path+json_data[i].pic"/>"+"<br/>"+ //attempting output
"\u00A3"+json_data[i].price+"</td>");
Needs to have proper quotation marks separating the strings (it is better to use ' for JavaScript strings so you can use " for attributes in the HTML:
$(tr).append('<td>' + json_data[i].prod_name + '<br/>' +
' ' + '<img src="' + path + json_data[i].pic + '"/>' + '<br/>' + //attempting output
'\u00A3' + json_data[i].price + '</td>');
Also, it's not very efficient to have multiple calls to .appendTo(). You should generate the HMTL elements in one go, and not multiple .append() calls.
Enclose the src attribute content (that is your path data) on single quotes, so replace your following code:
... +"><img src="+path+json_data[i].pic"/></a>"+ ...
for this one:
... +"><img src='"+path+json_data[i].pic"'/></a>"+ ...
Related
Through ajax response I'm passing array data from controller to blade.
On Ajax success I'm looping through array with 2 elements and concatenating string to display later on in my bootstrap popover.
success: function (data) {
var content = "";
var num = 1;
for (var i = 0; i < data.length; i++) {
content = content.concat(num + "." + " " + data[i]);
num++;
}
$("#content").popover({content: content});
}
Result:
I would like to add new line, so that each item or "artikel" would be displayed in new line e.g. :
1.Artikel...
2.Artikel...
I tried to add "\n" (as below) or html break but nothing works, it only appends as string.
content = content.concat(num + "." + " " + data[i] + "\n");
Use this:
content.concat(num + "." + " " + data[i] + "<br/>");
And this:
$("#content").popover({ html:true, content: content });
I am trying to create a function that will add buttons with their corresponding event listeners
var wordCount = 0;
function createButton(word, alert){
document.querySelector('body').innerHTML += "<button id=\"word-" + wordCount + "\">" + word + "</button>";
document.querySelector('#word-' + wordCount).addEventListener('click', function(){
console.log(alert);
})
wordCount++;
}
createButton('a', 'A');
createButton('b', 'B');
Only the last button(b) responds. Clicking button(a) does not output anything.
How would you fix this? Are there better ways that I could have implemented this?
I am frequently facing this situation and doing it in a simpler way. see this, (the beauty of the method is if you start the variable full with single quotes, you can add any usual double quoted stuff within it, with ease and without any escaping issues). No addEventListener business needed here. :-)
var full = '';
var wordCount = 0;
function createButton(word, alert) {
alert='\'' + alert + '\'';
full = full + '<a href="javascript:void(0)" onclick="alert(' + alert + ');">'
full = full + '<button id="word-' + wordCount + '" >' + word + '</button>';
full = full + '</a>';
document.querySelector('body').innerHTML += full;
wordCount++;
}
function anyFunction(alert) {
console.log(alert);
}
createButton('a', 'A');
createButton('b', 'B');
I am trying to pull each element 'one by one' from two separate HTML lists and print each element after the other. If that doesn't make sense, here is some pseudo-code to better explain what I am trying to accomplish.
$('#tracktitle').append("<li class='titlelist'><a href='" + track.permalink_url + "' target='_blank'>" + track.title +"</a><br></li>")
$('#trackimage').append("<li class='imagelist'><a href='" + track.permalink_url + "' target='_blank'><img src='" + track.artwork_url + "' /></a></li>");
for(var i =0;i<7;i++){
// print 1st tracktitle
// print 1st image
// print 2nd tracktitle
// 2nd image ... etc
}
any help would be greatly appreciated
If you have to use for loop do this
for (var i = 0; i < 7; i++) {
$('#tracktitle').find('li:eq(' + i + ')'); // gives you the li tracktitle element as per index
$('#trackimage').find('li:eq(' + i + ')'); // gives you the li trackimage element as per index
}
To get the text and image use
$('#tracktitle').find('li:eq(' + i + ')').find('a').text();
$('#trackimage').find('li:eq(' + i + ')').find('a').html()
You can also use jquery.each if you want to navigate for elements
$('#tracktitle').find('li.titlelist').each(function () {
$(this) // gives you li element
});
Check http://jsfiddle.net/raunakkathuria/FVTUN/3/
Hit a slight bump on something.
So I have a spreadsheet feed coming through via json.
Once they are loaded, if they contain a certain word, I want an elment that is already on the page to do something.
Having some trouble.
Here is my code:
/*feed*/
function displayContent(json) {
var len = json.feed.entry.length
var divtag = ''
for (var i=0; i<len; i++) {
divtag += [
'<div id=' +' tooltipwrap' + i + '>' +
'<span style="font-size:22px; font-weight:600;">',
json.feed.entry[i].gsx$studentname.$t + ' ' +
'<span class="hide" style="font-size:18px; font-weight:300;">',
json.feed.entry[i].gsx$classlevel.$t
+ '</span>' + '<span id=' + 'tooltipside' + i +'>' +
json.feed.entry[i].gsx$gender.$t + '-' +
'</span>',
'</div>'
].join('');
}
document.getElementById('tipswrap').innerHTML = divtag
}
/* what I wanted to do */
if ($('#tooltipside0').html() === "Senior") {
$("#test1").addClass('no');
}
Here is the JSFiddle
Pay attention to the tabulation. Right now your code is hard to read because you have failed to do so.
Here:
var len = json.feed.entry.length
var divtag = ''
you are missing semi-colons. You have to put semi-colon at the end of any operation, like this:
var len = json.feed.entry.length;
var divtag = '';
Semi-colons serve as operation separators.
Here:
divtag += [
'' +
'',
json.feed.entry[i].gsx$studentname.$t + ' ' +
'',
json.feed.entry[i].gsx$classlevel.$t
+ '' + '' +
json.feed.entry[i].gsx$gender.$t + '-' +
'',
'</div>'
].join('');
You have multiple problems:
You have failed to put your html attributes into quotes, so the resulting html will be invalid. Also, you have used comma instead of plus at the last concatenation.
CONCLUSION: You are obviously not ready to implement this code, because:
- You lack Javascript syntax knowledge
- You lack HTML syntax knowledge
- You do not pay attention to tabulation
As a consequence, your main problem is not what the question states, namely, how to add a class to an element depending on JSON feed. Your main problem is that you lack Javascript and HTML education. Please, follow some tutorials to be able to solve a problem and after that try again to solve your problem. If you fail to do so, then you will have at least an educated guess.
After adding the content to tipswrap add the condition
document.getElementById('tipswrap').innerHTML = divtag; //$('#tipswrap').html(divtag)
if ($.trim($('#tooltipside0').html()) === "Senior") {
$("#test1").addClass('no');
}
Demo: Fiddle
I recommend you add a class to all of your rows called student and then from there use this javascript:
function displayContent(json) {
var len = json.feed.entry.length
var divtag = ''
for (var i = 0; i < len; i++) {
divtag +=
'<div class="student" id="tooltipwrap'+i+'">'+
'<span style="font-size:22px; font-weight:600;">'+
json.feed.entry[i].gsx$studentname.$t +
'<span class="hide" style="font-size:18px; font-weight:300;">'+
json.feed.entry[i].gsx$classlevel.$t +
'</span> '+
'<span id="tooltipside'+i+'">'+
json.feed.entry[i].gsx$gender.$t + '-' +
'</span>'+
'</span>'+
'</div>';
}
document.getElementById('tipswrap').innerHTML = divtag
}
jQuery(document).ready(function($) {
$('.student').each(function() {
if ($(this).text().toLowerCase().indexOf("senior") >= 0)
$(this).addClass('senior');
});
});
Here's a demo
I am trying to populate a div (class='thumb") with thumnailpictures. The name of the pictures is gathered from an xml file. Every thumnail picture is encapsulated with an a-tag that points to a function to show the full picture.
On some browsers the first thumbnailpicture seems not to have this a-tag...clicking on it gives no action...
var rubriek = gup('rubriek'), // rubriek is a parameter in the url of this page pointing a specific photogallery
gallerij = rubriek + "gallery.xml",
xmlDoc = loadXMLDoc(gallerij),
x = xmlDoc.getElementsByTagName("filename"),
legebron = x[0].childNodes[0].nodeValue;
for (i = 0; i < x.length; i++) {
var beeldnummer = x[i].childNodes[0].nodeValue,
index = i + 1,
kleinbeeld = "/" + rubriek + "images/thumb/" + beeldnummer;
$('.thumb').append('<p><a class="kleintje" onclick="toonDezeFoto("' + beeldnummer + '",' + index + ',' + x.length + ');">
<img src="' + kleinbeeld + '" id="' + index + '">
</a></p>');
}
See http://www.karinedaelman.be/foto.php?rubriek=Mensen/
Found the solution: the z-index of the div that keeps the thumbnails was too low. Another div that has the site logo in it had a higher z-index and a width of 100%. Because of that the first thumbnail image was on a layer below the site logo and could not be accessed by the mouseevents....