アヤックス:完全な火災だが、アヤックス:成功はレール3アプリではありません

私はRoRを初めて使いましたが、小さなアプリにさまざまな機能を実装することに成功しました。私がこの問題にぶつかるまでは、既存の問題や質問は見つけられませんでした。私の問題を一般的なフォームに絞り込むために、ここに私が持っているものがあります:

ユーザーストーリー

User is presented with a form to create topics (name & description), once topic is created user is presented the 'show' page which allows the user to add subtopics. As the user adds subtopics, they are shown to the user on the same page (this is where I am trying to use ajax).

コード成果物

model ==> topic_request.rb

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

controller ==> topic_requests_controller.rb

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

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

partial ==> _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'でキャプチャしようとしている部分をレンダリングした結果を表示していません。

私が参照するデバッグやサンプルの助けとなるアイデアは、これを大いに歓迎します。

10

3 答え

Rails 4 solution: add data {type: 'text'}:

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

これによりフォームに data-type = "text" 属性が追加されます。この属性は jquery-ujs はパラメータ dataType としてjQueryの ajax メソッドに渡されます。

jQueryの ajax メソッドのドキュメントによると:

  • インテリジェントに推論されている場合 dataType が指定されていない場合
  • json が推定された場合、レスポンスはJsオブジェクトに解析され、エラー時に解析エラー

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

4
追加された
これは私のために働いた。
追加された 著者 Richard Peck,
作品!どうもありがとう。
追加された 著者 Ritikesh,

私は同じ問題を抱えていました。要求のフォーマットタイプを明示的に記述しています

例えば

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

私が使用しない場合:そのようなフォーマットでは、私はあなたと同じ問題があります。

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

3
追加された

In my code I have found that any ajax response needs to specifically include :content_type => 'text/json' for ajax:success to ever fire. It's weird but unless your response explicitly includes this it seems the browser doesn't always handle it correctly (esp. firefox).

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

1
追加された