0

In my app, i have a web page with lots of images whose source url is generated dynamically by making get request to the rails server, 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><%[email protected]%></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.

5
  • JS seems fine, are you sure you are getting a valid response server-side? Oct 26, 2014 at 14:38
  • Firstly you have so many lines in your JavaScript code without the ending ;. Make sure you have no errors first. Check your Browser's Developer Tools Console window.
    – Alireza
    Oct 26, 2014 at 14:39
  • Yes, i am getting a valid response from server
    – hsaini734
    Oct 26, 2014 at 14:49
  • Oh sorry for not terminating my JS lines, but it appers fine as i don't have any errors on my console
    – hsaini734
    Oct 26, 2014 at 14:50
  • want to add that i am using bootstrap for my views, hope that is not creating any problem
    – hsaini734
    Oct 26, 2014 at 14:51

1 Answer 1

0

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.

1
  • thanks, but not working, if i use "async false" in $ajax request instead of $getJSON all works fine but the page takes a lot of time to load as for every image there is a ajax request.
    – hsaini734
    Oct 27, 2014 at 7:11

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.