Question

我知道这可能是一个常见的问题，但我一直在寻找几个小时而没有运气，所以我想我会问。

如何通过输入字段上的ajax提交表单？我有一个表单，其中，用户从下拉列表中选择一个产品，然后我希望该产品的图片立即通过ajax显示。这就是我所拥有的：

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

我认为可能正确的方法是添加remote：true和url但是我还没有使用它。

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

这是将ajax事件添加到表单字段更改的正确方法吗？

提前感谢您的帮助！

Answer 1

绑定到下拉列表更改事件

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

});

Answer 2

您可以在页面上创建隐藏的img元素，然后添加一些JS代码： ("#idofdropdown").change(function(){ $('#id_image').attr('src', PRODUCTS_IMAGES[parseInt($(this).val())] });

然后显示img。

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

类似的东西....基本上你有一个带有选定ID的JS字典下拉和img src。

Answer 3

当您更改收藏并立即显示图片时，您想要吗？

你可以用两种方式做到这一点：

<强> 1。将data-image-url添加到选项

最好的方法是将图片网址添加到选项中使用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 %>

并使用此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。使用ajax

ajax javascript使用帖子：

<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>

关于这一点的红宝石行动：

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

我认为你最好使用Add data-image-url to option。

我想写一些关于remote: true：

的内容

remote: true来自jquery_ujs，可以在link_to，button_to或submit中使用。它必须有一个链接。当您更改选择或广播等时，无法使用remote: true。

您可以在指南中详细了解remote: true：http://guides.rubyonrails.org/working_with_javascript_in_rails.html

Ajax在输入字段中提交

3 个答案: