how to substitute values to img tag through JQuery

Question

I get this response from the AJAX Call made of Jquery

[/Uploaded Files/190420120611171146Wj.jpg, Uploaded Files/IMG4040hY.jpg, /Uploaded Files/a2124.jpg]

This is my JQuery response

<script type="text/javascript">
$(document).ready(function(){
    $.ajax({
        url  : '<%=getChartData%>',
        success : function(data){
                $.each(data, function(index, item) {
                $('img').eq(index).attr('src', item);
             });


        }
    });

});
</script>

This is my div tags with images

<div><a href="#"><img src=""   /></a></div>
<div><a href="#"><img src=""   /></a></div>
<div><a href="#"><img src=""   /></a></div>
<div><a href="#"><img src=""   /></a></div>

I tried with the above , but I am not able to subsitute these values to the images

Updated :

This is my div container

<div id="fp_thumbContainer">
                <div id="fp_thumbScroller">
                    <div class="container">
                        <div class="content">
                            <div><a href="#"><img src=""   /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src=""   />  </a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src=""   />  </a></div>
                        </div>

Answer 1

the problem of using $('img') is that it gets ALL images in the page. suppose you have this HTML:

<img src="foo" />  <!-- this is eq(0) -->
<img src="foo" />  <!-- this is eq(1) -->
<img src="foo" />  <!-- this is eq(2) -->

<!-- target images -->
<div><a href="#"><img src="" /></a></div>  <!-- this is eq(3) -->
<div><a href="#"><img src="" /></a></div>  <!-- this is eq(4) -->
<div><a href="#"><img src="" /></a></div>  <!-- this is eq(5) -->

when you do $('img') and you had images before your target images, they are the ones you are replacing and not your actual targets. when you looped through the array, the index starts at 0. if you had those images before the target images... you know what happens.

---

to make sure you are targetting the right images, make your selector more specific, like $('div a img') which is "get all images in an anchor that is in a div" or better, if these target images have a parent, use it as a base instead, like $('#parent_id img') which is "get all images in parent container" like:

$('#fp_thumbScroller img');  //get all img from fp_thumbscroller

---

also, just to add:

• check your urls if they are correct
• check the urls when they are appended to the image if they are correct
• check your ajax call if it returns
• check the return data if it's valid
• check each if it does loop

console.log() can help you

Answer 2

@user1253847 if you are getting the image src from server then why not write the whole div html like below..

Make a div wrapper

<div id="imagewrapper"></div>

and add the div and image into that..

$(document).ready(function(){
var content = "";
$.ajax({
    url  : '<%=getChartData%>',
    success : function(data){
            $.each(data, function(index, item) {
            content += "<div><a href='#'><img src=" + item + "   /></a></div>";
         });
       $("#imagewrapper").html(content);
    }
  });
});

or append like

$("#imagewrapper").append(content);

Answer 3

add dataType: "json" option in your AJAX call like follow:

$(document).ready(function(){
    $.ajax({
        dataType: 'json',
        url     : '<%=getChartData%>',
        success : function(data){
                $.each(data, function(index, item) {
                $('#fp_thumbContainer #fp_thumbScroller').find('img').eq(index).attr('src', item);
             });
        }
    });
});

even though this its not work then check out JSON response it should be:

["\/Uploaded Files\/190420120611171146Wj.jpg","Uploaded Files\/IMG4040hY.jpg","\/Uploaded Files\/a2124.jpg"]

For example in php that is something like:

<?php
  $arr = array("/Uploaded Files/190420120611171146Wj.jpg", "Uploaded Files/IMG4040hY.jpg", "/Uploaded Files/a2124.jpg");
  echo json_encode($arr);
?>