I'm trying to display results from an AJAX GET call, one of the results is a direct path to an image, problem is I'm not correctly appending the data to my html template.
This is the important part:
sliders_row += '<td><div style="width:100px; height:50px; outline:1px solid red; background-image:url(' + item.image + '); background-size:cover;"></div></td>';<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>$.ajax({
async: true,
url: '/sliders',
type: 'GET',
dataType: 'JSON',
success: function (data) {
$('.row[data-link=' + linked_entry + ']').remove();
$.each(data.sliders, function (index, item) {
var sliders_row = '<tr class="row" data-link="sliders">';
sliders_row += '<td>' + item.title + '</td>';
sliders_row += '<td>' + item.body + '</td>';
sliders_row += '<td><div style="width:100px; height:50px; outline:1px solid red; background-image:url(' + item.image + '); background-size:cover;"></div></td>';
sliders_row += '<td style="text-align:center;"><input type="checkbox" name="isVisible" '+(item.isVisible ? 'checked' : '')+'></td>';
sliders_row += '</tr>';
$('.entry_table_container[data-link=' + linked_entry + ']').append(sliders_row);
});
},
error: function (data) {
var errors = data.responseJSON;
console.log(errors);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></div>
You need to add version parameter in image file url like:
Image.gif?v=12
and change every time when you render image