php - How to display image using jquery -


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'>&nbsp;</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'>&nbsp;</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