Edgar Ong Edgar Ong - 2 months ago 9
Ajax Question

Javascript - AJAX displaying image from the table

I've already getting the file name of the image in my table using json which my code is

$("show_product_img").val(data.picture);
, now I want to show the image in my page. In my var
urlimg
is the link where my images are stored. So I will call the
urlimg
and get the file name of my image which is in
$("show_product_img").val(data.picture);


How will I show the image in my page? BTW I'm using codeigniter framework, here's my code.

AJAX

var prodid = $("#prod-names option:selected").attr("value");
var url = "http://localhost:800/client_ayos/administrator/createpromoajax/"+prodid;
var urlimg = "http://localhost:800/client_ayos/uploads/"; //this is where the images are stored
var type = "GET";

$.getJSON( url,type, function(data) {
console.log(data);
$("#orig-price").val(data.price);
$("#supplier").val(data.supplier);
$("show_product_img").val(data.picture);
}


HTML

<div class="form-group" id="product_img" hidden>
<label class="control-label col-md-3 col-sm-3 col-xs-12">Product Image</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<img id="show_product_img" class="form-control" />
</div>
</div>

Answer
<div class="form-group" id="product_img" hidden>
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Product Image</label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <img  id="show_product_img" class="form-control" />
        </div>
</div>

Change JS ..

var image = document.getElementById("show_product_img");
image.src = data.picture;

use this to set the image.

or simply..

document.getElementById("show_product_img").src = data.picture;

Using jQuery

$("#show_product_img").attr("src",data.picture);