0

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'>&nbsp;</td></tr>";
                  }
                  table += "</table>";
                  $("#image").html(table);

                }   
              });
            })

Thanks in advance.

6
  • What is not working? What is the PHP code you are using?
    – putvande
    Jul 15, 2013 at 7:25
  • 3
    use <img /> tag... i think the src in your script is not correct.. thus image is not displayed
    – bipen
    Jul 15, 2013 at 7:25
  • nothing is wrong with the above code, check your link that you pass in SRC
    – zzlalani
    Jul 15, 2013 at 7:29
  • can you send me any link how to display image using jquery Jul 15, 2013 at 7:33
  • 1
    'http://img/"+obj[i].image_file_name+" I think this should be without http, like '/img/"+obj[i].image_file_name+" or img/"+obj[i].image_file_name+"
    – Spokey
    Jul 15, 2013 at 7:46

1 Answer 1

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'>&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 you want to control exceptional behavior - just go with deferred methods - .done, .fail instead of the callback

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.