Получите URL Carrierwave через javascript - PullRequest
Новая
       26

Получите URL Carrierwave через javascript

0 голосов
/ 11 января 2020

Есть ли способ получить Model.image_url через sql или javascript?

У меня есть выбор, который при изменении я хочу, чтобы <img src=> динамически менялся.

В других ситуациях я сделал следующее, чтобы изменить цвет фона контейнера div: 

<%= f.grouped_collection_select :color_id, @other_model, :colors, :title, :id, :title, include_blank: "Select Color" %>

<div id="div" style="background-color:<%= "#{model.color.hex}" %>;">
...
</div>

**javascript**

var colors = <%= Color.pluck(:id, :hex).to_h.to_json.html_safe %>;
document.getElementById("model_color_id").addEventListener("change", function(){
    document.getElementById("div" %>").style.backgroundColor = colors[this.value];
}, false);

Для получения imge carrierwave я попробовал аналогичный подход: 

var product_mock = <%= Item.pluck(:id, :image).to_h.to_json.html_safe %>;
    document.getElementById("model_item_id").addEventListener("change", function(){
        document.getElementById("item").src = product_mock[this.value];
}, false);

но это не захватывает *.url' или *_url

Попробовал способ, подобный этому для onchange: 

$('#shop_product_item_id').on('change', function(){
    let item_id = $(this).val(); #tried with and without these 2 lines and with var
    console.log(item_id); #tried with and without these 2 lines
    var image = <%= Item.find(1).image_url %>;
    document.getElementById("id").src = image;
});

Есть идентификатор: 1

ничего не выводится на консоль, кроме следующей ошибки: 

Uncaught TypeError: e.unique is not a function

Есть ли способ получить это изВОБЕРЕЖНОЙ ЧЕРЕЗ sql или даже ruby в пределах javascript?

1 Ответ

0 голосов
/ 23 января 2020

Вы можете изменить свой код Item.pluck(:id, :image).to_h.to_json.html_safe на Item.all.map{|item| [item.id, item.image_url]}.to_h.to_json.html_safe. Но, как говорили другие в комментариях, лучше получать элементы через запрос Ajax, а не просто хранить их в html.

...