Обновить изображение с внешнего URL при клике

Question

Обновить изображение с внешнего URL при клике

0

У меня есть панель инструментов, встроенная в Ruby on Rails, которая извлекает изображения из веб-камер и обслуживает их в формате jpg.

У меня есть кнопка обновления на каждом изображении и вы хотите обновить каждое изображение отдельно, не обновляя всю страницу.

 <% @shares.each do |camera| %>
    <div class="col-md-4 col-sm-6 col-xs-12 cam-box">
        <a href="/cameras/<%= camera['id'] %>">
           <div id="cam-name"><h5><%= camera['name'] %></h5></div>
              <img src="<%= camera['jpg'] %>" alt="">
                <a href="#" id="cam-refresh" class="refresh"><span class="glyphicon glyphicon-refresh"></span></a>
           </div>
        </a>
    </div>
 <% end %>

Кто-нибудь знает, как я могу добиться этого с помощью JQuery?

Оцените любые предложения.

Ciarán 12 май 2014, в 13:23

Источник

0

api.jquery.com/jquery.ajax
martynas 12 май 2014, в 10:30
0

Обновляет ли оно изображение (без изменения источника) или оно получает новый URL каждый раз?
Archer 12 май 2014, в 10:35
0

Обновление изображения без изменения источника действительно обновляет его, я думаю, что да
Ciarán 12 май 2014, в 11:15
0

Я выложу ответ, который учитывает это тогда :)
Archer 12 май 2014, в 11:22

Показать ещё 2 комментария

Теги:

javascript

jquery

image

refresh

partial-page-refresh

2 ответа

0

То, что вы хотите сделать, - это обновить изображение асинхронно. Вы можете сделать это, используя jQuery .ajax()

Вот как вы это делаете:

// Set up an onClick listener for the refresh button
// Make sure each refresh button has a class "cam-refresh"
$(".cam-refresh").click(function() { 
    var $img = $(this).closest("img"), // Find the closest image
        url = "filename.extension";    // The script that will return new image url

    // Make a request to that URL to obtain a new src parameter
    $.get(url, function() {
        alert('Request has been submitted');
    })
    .done(function(data) {
        alert( "second success" );
        $img.attr("src", data.src);
    })
    .fail(function() {
        alert( "error" );
    })
    .always(function() {
        alert( "finished" );
    });
});

martynas 12 май 2014, в 07:43

Ещё вопросы

Обновляет ли оно изображение (без изменения источника) или оно получает новый URL каждый раз?
Обновление изображения без изменения источника действительно обновляет его, я думаю, что да
Я выложу ответ, который учитывает это тогда :)

Archer · Accepted Answer · 2014-05-12T10-24-00.000Z

Поскольку вы можете просто обновить изображение без необходимости использования нового URL-адреса src, вы можете сделать следующее...

$("a.refresh").on("click", function(e) {
    e.stopPropagation();
    var $img = $(this).closest("img");
    var src = $img[0].src;
    src = src.substr(0, src.search("?")) + "?" + new Date().getTime();
    $img[0].src = src;
});

Это займет текущее изображение src и добавит временную метку к концу, что приведет к перезагрузке (а не просто использовать один и тот же URL-адрес и, возможно, не загружать или загружать из кеша).

Кроме того, в настоящее время у вас есть тот же идентификатор для всех ссылок обновления. Вы должны применить уникальный идентификатор к каждому из них (просто добавьте инкрементное значение для каждого идентификатора).

Наконец, я добавил e.stopPropagation() чтобы внешняя ссылка не отреагировала на то, что вы нажмете ссылку обновления, иначе щелчок просто начнет пузыриться, и вы в конечном итоге измените страницу.