how can display image in 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>"; (var = 0; < 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.
you rather rely on $.getjson makes code saying want achieve $.ajax - retrieving json-formatted data remote source. , check server side code if provides valid json. here 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 want control exceptional behavior - go deferred methods - .done, .fail instead of callback
Comments
Post a Comment