0

これはよくある質問かもしれませんが、運がなくて数時間検索していたので、質問することにしました.

入力フィールドの変更時に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 イベントを追加する正しい方法ですか?

助けてくれてありがとう！

4

3 に答える 3

1

ドロップダウン変更イベントにバインドします

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

});
于 2013-11-06T16:07:43.003 に答える
0

コレクションを変更してすぐに写真を表示したいですか？

これは次の 2 つの方法で行うことができます。

1.data-image-urlオプションに追加

最良の方法は、画像の URL をオプション 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 %>

そして、この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_tobutton_tosubmitremote: true

ガイドで詳細を学ぶことができremote: trueます: http://guides.rubyonrails.org/working_with_javascript_in_rails.html

于 2013-11-06T18:05:26.410 に答える