В моем приложении у меня есть веб-страница с большим количеством изображений, исходный 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, любая помощь будет оценена.
JS кажется прекрасным, вы уверены, что получаете достоверный ответ на сервер? –
Во-первых, у вас так много строк в вашем JavaScript-коде без окончания ';'. Удостоверьтесь, что у вас нет ошибок. Проверьте окно консоли разработчика для браузера. – Alireza
Да, я получаю действительный ответ от сервера – hsaini734