2017-02-28 6 views
1

私のajaxリクエストは機能しますが、サーバログはわかりません。私は、サーバーのログを見ると、それは、Ajaxリクエストのために、次の言う:それは*/*を言っている理由を私は知らないRails AJAXリクエストはJSとして処理されませんが、*/*

Processing by UsersController#change_food as */* 

。ここで

Processing by UsersController#change_food as JS 

は、物事の全体の流れです:私はそうのようなJSを言うことを期待します。このAjaxリクエストでは、選択ボックスが変更されたときにイベントリスナーをバインドし、選択が変更されたときにajaxリクエストを送信します。ここではそのフォームのフィールドは次のとおりです。

# _form.html.erb 
<div class="field"> 
    <%= f.label :food_type_id %> 
    <%= f.collection_select :food_type_id, FoodType.all, :id, :name, {}, {data: {action: 'food_sel', food_change_js_url: "#{user_food_change_js_path}"}} %>   
</div> 

そしてここでは、実際のAJAX要求である:ここで

# application.js 
$(document).on('turbolinks:load', function() { 

    $('[data-action="food_sel"]').on('change', function(){ 
    var url = $(this).data('food-change-js-url'); 

    $.ajax({ 
     url: url, 
     type: "GET", 
     datatype: "application/js", 
     data: {food_type_id: $(this).val()} 
    }) 

    }); 

}); 

関連するルートされます。

# routes.rb 
get 'user_food_change_js', to: 'users#change_food' 

このコントローラへのルートAJAXリクエスト:

# users_controller.rb 
def change_food 
    respond_to do |format| 
    format.js 
    end 
end 

このビューをレンダリングし、どの:

# change_food.js.erb 
alert("hello world"); 

私はもともと私は選択ボックスにremote: trueを置き、選択が変更されるたびに、それがサーバーにアップAJAXリクエストを撃つということができることを期待しました。残念ながらremote: trueは、あなたのform_for、あなたのform_tag、あなたのリンク、およびあなたのボタンのように、いくつかのもののためだけに働きます。イベントがトリガーされたときに、サーバーにajaxリクエスト(js経由)を送信する理由をきれいにすることはできませんでした。

質問:私はそれがJS代わり*/*による処理である言っていないサーバログので、型破りな何かをやっているような気がします。これを行う従来の方法がありますか?それはJSで処理していると言うでしょうか?受け入れ答えに基づいて


更新

:私がしなければならなかったすべてはキャメルケースdataType鍵となったとそれを正しく設定してください。すべては他に同じに滞在:それは働いてそれを得た:

# application.js 
$(document).on('turbolinks:load', function() { 

    $('[data-action="food_sel"]').on('change', function(){ 
    var url = $(this).data('food-change-js-url'); 

    $.ajax({ 
     url: url, 
     type: "GET", 
     dataType: "script", 
     data: {food_type_id: $(this).val()} 
    }) 

    }); 

}); 

答えて

2

最初の問題は、JavaScriptオブジェクト内のキーは大文字と小文字が区別されるということですので、datatypedataTypeと同じものではありません。

第二に、あなたがオフのままにcontentType jQueryのdataTypeからそれを推測しますが、dataTypeキーは、contentTypeと同じではありません。あなたの場合、scriptでなく、application/js(@ルスランも指摘した通りです)が必要です。

$.ajax({ 
    url: url, 
    type: "GET", 
    dataType: "script", 
    data: {food_type_id: $(this).val()} 
}) 

それはまだ動作しない場合、私はあなたが世界的に、例えば、contentTypeを設定されている場所を探します:あなたがしたい、一緒にそれらを置く

$.ajaxSetupに電話してください。

1

試してみてください。

dataType: 'script'

0

働くかもしれないどのようにヘッダを追加する方法について

contentType: "text/javascript" 
+0

同じことを言います。ログには、「UsersController#change_food as */* 'が処理中です。以前と同じように、それでも動作しますが、JSの代わりに '*/*'と表示されます。 – Neil

0

を試してみてください?

headers: {Accept: '*/*;q=0.5, text/javascript, application/javascript, application/ecmascript, application/x-ecmascript'}

1

user_food_change_js_path.jsを追加してみてください。

また - はchange_food_js.erbですか? change_food.js.erb(アンダースコアの代わりにドット)

+0

はい、それはタイプミスでした、私は私の質問を更新します。ありがとう!あなたのソリューションは私のために働いた唯一のものでした! – Neil

関連する問題