使用ajax和jquery替换图像src

Question

In my app, i have a web page with lots of images whose source url is generated dynamically by making get request to the , initially a default image is assigned to the source. After loading the page i make request to the server that return a json with new image URl, and then need to update the src of that image. Following is the code i am using in html.erb

<div class="inner">
 <div class="span9 blog-head alert alert-info"><h3><%=@feeds.title%></h3></div>
 <%@feeds.entries.each do|feed|%>
  <div class="thumbnail feeds span6">
   <div class="row title lead">
     <span class="span6"><%=link_to feed.title,feed.url,target: "_blank"%></span>
   </div>
   <div class="row content">
     <input type="hidden" class="image-feed-url" value="<%=feed.entry_id%>">
     <!-- need to update src of following img tag -->
     <img class="span2 desc-img thumbnail" src="/assets/default.jpg" alt="RSS">
     <span class="span3"><%=feed.summary%></span>
   </div>
   <div class="row footer">
     <%if feed.published%>
      <span class="span3">Published on: <small><%=feed.published.to_date.strftime("%b, %-d, %Y")%></span></small>
     <%end%>
     <span class="span2 source">Source: <small><%=link_to 'Click here',@feeds.url, target: "_blank"%></span></small>
   </div>
 </div>
 <%end%>
</div>

Need to update src in "img" tag having class "desc-img". In my JS file

$(document).ready(function(){
  all_feeds = $('.inner .feeds')
  for(i=0;i<all_feeds.length;i++)
  {
    element = all_feeds[i]
    feed_url = $(element).find('.image-feed-url').val()
    $.getJSON("/get_image_url?feed_url="+feed_url,function(data){
      // data['link] is the actual image link returned by server
      $(element).find('.desc-img').attr('src',data['link']);
    });
  }
});

I had also tried using div with background image instead of img tag and updating background image of div in JS but nothing works. I am new to Jquery and Ajax, any help will be appreciated.

Answer 1

try this :

$.getJSON("/get_image_url?feed_url="+feed_url,function(data){
      $(element).find('.desc-img').removeAttr('src');
      $(element).find('.desc-img').attr('src', '../' + data['link'] + '?' + Math.random());
});

Hope this helps.