ajax：完全な火災だが、Ajax：成功はレール3のアプリではない

Question

私はRoRを初めて使いましたが、小さなアプリにさまざまな機能を実装することに成功しました。私がこの問題にぶつかるまでは、既存の問題や質問は見つけられませんでした。トピックは、ユーザーが作成されると、

ユーザーストーリー

ユーザーがトピック（名前&説明）を作成するために、フォームが表示されます。一般的な形式に私の問題を絞り込む助けるために、ここで私が持っているものですユーザーがサブトピックを追加できるようにする 'show'ページを示しました。ユーザーがサブトピックを追加すると、それらは同じページのユーザーに表示されます（これがAjaxを使用しようとしています）。

コードアーティファクト

モデル==> topic_request.rb

class TopicRequest < ActiveRecord::Base 
has_many :subtopics, :class_name=>"TopicRequest", :foreign_key=>"parent_id" 
end 

コントローラ==>

class TopicRequestsController < ApplicationController 
    expose(:user_topic_requests) {current_user.topic_requests} 
    expose(:topic_request) 
    expose(:sub_topic_request) {TopicRequest.new} 

    def new 
    end 

    def create 
    topic_request.save 
    if (topic_request.parent_id != nil) 
    parentreq = TopicRequest.find(topic_request.parent_id) 
    render :partial => 'subreqs', \ 
      :locals => {:topic_requests => parentreq.subtopics}, \ 
      :layout => false 
    else 
    render :show 
    end 
    end 

    def show 
    end 

    def index 
    end 
end 

new.html.slim topic_requests_controller.rb

= simple_form_for topic_request, :html => {:class => 'form-stacked'} do |f| 
    = f.error_notification 
    fieldset 
    = f.input :name, :required => true 
    = f.input :description, :required => true 
    .actions 
    = f.button :submit, "Propose Topic" 

show.html.slim

# display the parent topic 
= topic_request.name 
= topic_request.description 

#display the form for accepting subtopic requests 
= simple_form_for sub_topic_request, \ 
        :url => {:controller => "topic_requests", :action => "create"}, \ 
        :remote => true, \ 
        :html => {:class => 'form-stacked', \ 
          :id => 'new_subtopic_request'} do |f| 
    = f.error_notification 
    fieldset 
    = f.input :name, :required => true 
    = f.input :description, :required => true 
    = f.input :parent_id, :as => :hidden,\ 
       :input_html => {:value => topic_request.id}   
    .actions 
    = f.button :submit, "Propose Subtopic", \ 
       :class => "btn", :disable_with => "Please wait..." 
#subtopic_requests 
    = render :partial => 'topic_requests/subreqs', \ 
      :locals => {:topic_requests => topic_request.subtopics} 

部分==> _subreqs.html.slim

- topic_requests.each do |onereq| 
    = onereq.name 
    = onereq.description 
    hr 

のCoffeeScript ==> topic_requests.js.coffee

jQuery -> 
    new_subreq_form = $("#new_subtopic_request") 

    if new_subreq_form.length > 0 
    new_subreq_form.bind 'ajax:before', (e) -> 
     # console.log 'ajax:before' 
    new_subreq_form.bind 'ajax:success', (event, data, status, xhr) -> 
     $("#subtopic_requests").html(data) 
    new_subreq_form.bind 'ajax:failure', (xhr, status, error) -> 
     # console.log 'ajax:failure' 
    new_subreq_form.bind 'ajax:error', (xhr, status, error) -> 
     # console.log 'ajax:error' # parseerror eg 
    new_subreq_form.bind 'ajax:complete', -> 
     $("#topic_request_name").val("") 
     $("#topic_request_description").val("") 

問題

サブトピックの作成データベースに新しいレコードが表示されます。 'ajax：complete'バインディングからのフィールドのクリアもうまくいきます。これらの入力フィールドはクリアされています。私はtopic_requests/_subreqs.html.slimがステータス200で完了しているのを見ています。しかし、 'show'ページは、 'ajax：success'でキャプチャしようとしている部分をレンダリングした結果を表示していません。

私が参照するデバッグやサンプルに役立つアイデアは、これが大変ありがとうございます。

Answer 1

私は同じ問題を抱えていたと私はそれが私が使用していない場合の例

= form_for vendor, :format => :html, :remote => true, :html => {:class => "form form-edit", :'data-widget' => 'edit-vendor-form'} do |f| 

に対して明示的に要求

のフォーマットタイプを書い作品でした：フォーマットをそのように、私は持っていますあなたと同じ問題。

私は助けて欲しいです。よろしく。

Answer 2

私のコードでは、すべてのajaxレスポンスに具体的に:content_type => 'text/json'を含める必要があることが判明しました。ajax:successがこれまでに発生します。あなたの応答に明示的にこれが含まれていない限り、ブラウザーが常に正しく処理するとは限りません（特にFirefox）。

あなたの状況を正確に修正するためにそれを適用できるかどうかわかりませんが、その情報が役立つことを願っています。

Answer 3

Railsの4溶液：data {type: 'text'}を追加します。

= form_for vendor, :remote => true, data: {type: 'text'} 

をこれはjquery-ujsは、パラメータdataTypeとしてjQueryのajaxメソッドに渡す形にdata-type="text"属性を追加します。

the docs of jQuery's ajax methodによれば：インテリジェントjsonが推測される

場合に推測されている場合

• dataType場合が指定されていない場合、応答は、jsオブジェクトに解析され、エラーにparse error戻る

'ajax:error'から得られるparseerrorの出力を考えれば、これはおそらく起こっていることです。