How to display image using jquery - php

Question

How can I display the image in the following div id="image" using jQuery
HTML:
<h3 style="clear:both" class="margin_top30">Images</h3>
<div class="contentSection">
<div id="image"> </div>
</div>
jquery:
$(document).ready(function(){
var id = window.location.search.substring(1);
id = id.replace('id=','');
var url = "http://localhost/schoollife/services/author_chapter.php?a=image&id="+id;
//alert(url);
$.ajax({
url:url,
success:function(result){
var obj = $.parseJSON(result);
var table = "<table>";
for (var i = 0; i < obj.length; i++) {
table += "<tr>"
table += "<td><img src='http://img/"+obj[i].image_file_name+"' style='margin-right:20px;' /></td>";
table += "</tr>";
table +="<tr><td colspan='3'> </td></tr>";
}
table += "</table>";
$("#image").html(table);
}
});
})
Thanks in advance.

Answer 1

You rather rely on $.getJSON as it makes your code saying what you want to achieve with $.ajax - retrieving JSON-formatted data from a remote source. And check your server side code if it provides a valid JSON. Here is a working example:
$( document ).ready(function(){
var url = "./author-chapter.json";
$.getJSON( url, function( data ){
var out = "<table>";
$.each( data, function( i, row ) {
out += "<tr>";
out += "<td><img src='" + row.image_file_name + "' style='margin-right:20px;' /></td>";
out += "</tr>";
out +="<tr><td colspan='3'> </td></tr>";
});
out += "</table>";
$("#image").html( out );
});
});
Controller (author-chapter.json)
[
{"image_file_name": "./slides/sample_fussen.jpg"},
{"image_file_name": "./slides/sample_keukenhof.jpg"}
]
P.S. If you want to control exceptional behavior - just go with deferred methods - .done, .fail instead of the callback