Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Do you want to when you change your collection and display the picture immediately?</p> <p>You can do this in two way:</p> <p><strong>1. Add <code>data-image-url</code> to option</strong></p> <p>The best way is image url add into the option use <code>data-image-url</code>:</p> <pre><code>&lt;%= f.association :product, include_blank: false, label: 'Product', input_html: {class: 'product_select' do %&gt; &lt;%= f.select :product, @products.map{|a| [a.name, a.id, {"data-image-url" =&gt; a.image_url}]} %&gt; &lt;% end %&gt; </code></pre> <p>And use this javascript:</p> <pre><code>&lt;script type="text/javascript"&gt; $(".product_select").change(function(){ var selection = $(this).find(':selected').data("imageUrl"); //The product image url $('#prodPicture').html("&lt;img src='" + selection + "' /&gt;") }); &lt;/script&gt; </code></pre> <p><strong>2. Use ajax</strong></p> <p>The ajax javascript use post:</p> <pre><code>&lt;script type="text/javascript"&gt; $(".product_select").change(function(){ var selection = $(this).val(); $.post("/products/return_image_url", {product_id: selection}, function(data) { if (data != null) { $('#prodPicture').html("&lt;img src='" + data + "' /&gt;") } } ) }); &lt;/script&gt; </code></pre> <p>And the ruby action about this: </p> <pre><code>def return_image_url product = Product.find(params[:product_id]) ... respond_to do |format| format.json { render :json =&gt; product.image_url } end end </code></pre> <p>And I think you do better use <code>Add data-image-url to option</code>.</p> <p><strong>I want to write something about <code>remote: true</code>:</strong></p> <p><code>remote: true</code> came from <code>jquery_ujs</code>, and it can use in the <code>link_to</code>, <code>button_to</code> or <code>submit</code>. It must have a link. When you change the select or radio and so on, could not use <code>remote: true</code>.</p> <p>You can learn more about <code>remote: true</code> in the guides: <a href="http://guides.rubyonrails.org/working_with_javascript_in_rails.html" rel="nofollow">http://guides.rubyonrails.org/working_with_javascript_in_rails.html</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload