CODEWITHSUNDEEP
javascriptjquery
user1253847
user1253847

Reputation: 5451

how to substitute values to img tag through JQuery

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>

Upvotes: 1

Views: 476

Answers (3)

Joseph
Joseph

Reputation: 119827

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

Upvotes: 2

Hardik Patel
Hardik Patel

Reputation: 838

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);
?>

Upvotes: 0

naim shaikh
naim shaikh

Reputation: 1111

@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);

Upvotes: 0

Related Questions