2014-10-26 2 views
0

В моем приложении у меня есть веб-страница с большим количеством изображений, исходный URL-адрес которых генерируется динамически, отправив запрос на сервер rails, изначально по умолчанию присваивается исходное изображение. После загрузки страницы я делаю запрос на сервер, который возвращает json с новым изображением URl, а затем нужно обновить src этого изображения. Ниже приводится код, я использую в html.erbзаменить изображение src с помощью ajax и jquery

<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> 

нужно обновить SRC в «IMG» тег, имеющий класс «по убыванию-IMG». В моем JS файл

$(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']); 
    }); 
    } 
}); 

Я также попытался использовать DIV с фоновым изображением вместо IMG тега и обновление фонового изображения DIV в JS, но ничего не работает. Я новичок в JQuery и Ajax, любая помощь будет оценена.

+0

JS кажется прекрасным, вы уверены, что получаете достоверный ответ на сервер? –

+0

Во-первых, у вас так много строк в вашем JavaScript-коде без окончания ';'. Удостоверьтесь, что у вас нет ошибок. Проверьте окно консоли разработчика для браузера. – Alireza

+0

Да, я получаю действительный ответ от сервера – hsaini734

ответ

0

попробовать это:

$.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()); 
}); 

Надеется, что это помогает.

+0

спасибо, но не работает, если я использую «async false» в $ ajax-запросе вместо $ getJSON, все работает нормально, но на страницу требуется много времени для загрузки, так как для каждого изображения есть запрос ajax , – hsaini734

Смежные вопросы