How to output image link in jQuery append

Question

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/>"+
          " " + "<a href="+url+"><img src="+path+json_data[i].pic"/></a>"+"<br/>"+ //attempting output
          "\u00A3"+json_data[i].price+"</td>");
    }  

    $("#maindisplay").append(table);
}

Have you tried pasting the link into the address bar as it is rendered on the generated html to see if there is something wrong with your image name or path? — Nate, Apr 04 '13 at 22:00
The function is not displaying the image. I have tried in the above example to add the path to the image. — chucky, Apr 04 '13 at 22:01

score 1 · Answer 1 · answered Apr 04 '13 at 22:00

1

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>"+ ...

answered Apr 04 '13 at 22:00

Nelson

49,283
8
68
81

score 1 · Accepted Answer · answered Apr 04 '13 at 22:00

This line $(tr).append("<td>"+json_data[i].prod_name+"<br/>"+ " " + "<a href="+url+"><img src="+path+json_data[i].pic"/></a>"+"<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/>' +
  ' ' + '<a href="' + url + '"><img src="' + path + json_data[i].pic + '"/></a>' + '<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.

Thanks sweetamylase. Currently this works, how much more efficient would it be ? — chucky, Apr 04 '13 at 22:21
@chucky See related question: http://stackoverflow.com/questions/5422169/in-jquery-how-to-efficiently-add-lots-of-elements — Amy, Apr 04 '13 at 22:28

How to output image link in jQuery append

2 Answers2