Ajax在输入字段中提交

Question

I know this may be a common question but I've been searching for a couple hours with no luck, so I figured I'd ask.

How do make a form submit through ajax on an input field change? I have a form where, among other things, a user selects a product from a dropdown, and then I want that product's picture to show immediately through ajax. This is what I have:

<%= f.association :product, collection: @products %>
<div id="prodPicture">...</div>

What I think might be the right way is adding remote: true and the url but I haven't gotten it to work as of yet.

<%= f.association :product, collection: @products, remote: true, url: url_for(controller: 'quotes', action: 'getdata'), type: 'JSON' %>

Is that the correct way to adding an ajax event to a form field change?

Thanks in advance for any help!

Answer 1

you bind to the dropdowns change event

$("#idofdropdown").change(function(){
var selection = $(this).val() // always gets selected value by default
$.ajax()//and so forth

});

Answer 2

you can create hidden img element on page and then add some JS code: ("#idofdropdown").change(function(){ $('#id_image').attr('src', PRODUCTS_IMAGES[parseInt($(this).val())] });

then show img.

where var PRODUCTS_IMAGES = #{@products.collect{|e| [e.id, e.file.url]}.to_json}; var PRODUCTS_IMAGES = #{@products.collect{|e| [e.id, e.file.url]}.to_json};

something like that....basically you have a JS dictionary with selected ID in dropdown and img src.

Answer 3

Do you want to when you change your collection and display the picture immediately?

You can do this in two way:

1. Add data-image-url to option

The best way is image url add into the option use data-image-url :

<%= f.association :product, include_blank: false, label: 'Product', input_html: {class: 'product_select' do %>
  <%= f.select :product, @products.map{|a| [a.name, a.id, {"data-image-url" => a.image_url}]} %>
<% end %>

And use this javascript:

<script type="text/javascript">
  $(".product_select").change(function(){
    var selection = $(this).find(':selected').data("imageUrl");   //The product image url
    $('#prodPicture').html("<img src='" + selection + "' />")
  });
</script>

2. Use ajax

The ajax javascript use post:

<script type="text/javascript">
  $(".product_select").change(function(){
    var selection = $(this).val();
    $.post("/products/return_image_url",
            {product_id: selection},
            function(data) {
               if (data != null) {
                  $('#prodPicture').html("<img src='" + data + "' />")
               }
             }
           )
  });
</script>

And the ruby action about this:

def return_image_url
  product = Product.find(params[:product_id])
  ...
  respond_to do |format|
    format.json { render :json => product.image_url }
  end
end

And I think you do better use Add data-image-url to option .

I want to write something about remote: true :

remote: true came from jquery_ujs , and it can use in the link_to , button_to or submit . It must have a link. When you change the select or radio and so on, could not use remote: true .

You can learn more about remote: true in the guides: http://guides.rubyonrails.org/working_with_javascript_in_rails.html