jQueryダイアログモーダルフォームでフォームを作成しようとしています。私は何が欠けていますか？

Question

ビュー/ブログ/新規をダイアログに表示します。それはこのあたりに動作させることを試みたSO答え：ここでhttps://stackoverflow.com/a/5318155/732200

は私のコードは、（ブログが「寓話」と呼ばれている）である。

これは私の部分である - 景色/寓話/ fablemaker.html.erb

ここで

<div id="fableMaker" title="Fable Maker" style="display:none"> 

<div id="countdownTimer"> 
    <span id="countdown_timer" class="timer">4:20</span><br /> 
    <button id="play_btn">Play Timer</button> 
    <button id="pause_btn">Pause Timer</button> 
    <button id="reset_btn">Reset Timer</button> 

</div> 

<%= form_for @fable do |f| %> 

    <p> 
    <%= f.label :content, "Fable Portal:" %><br /> 
    <%= f.text_area :content, :style => "" %> 
    </p> 
    <p> 
    <%= f.label :title, "What would you like to title your creation?" %><br /> 
    <%= f.text_field :title %> 
    </p> 
     <p><%= f.submit "Create Fable", remote: true %></p> 
    <% end %> 

    </div> 

は、ビュー/ファブレス/ create.js.erbである：ここで

$("#fableMaker").dialog({ 
    autoOpen: false, 
    height: 900, 
    width: 550, 
    modal: true, 
    title: 'Fable Maker', 
    buttons: { 
     "Create": function() { $("#fable_form").submit() }, 
     }, 
     open: function() { 
     $("#fable_form").html("<%= escape_javascript(render('fablemaker')) %>") 
    }, 
}); 

は、アクションを作成し、fables_controllerです：

ここでは0

class FablesController < ApplicationController 
    respond_to :html, :js 

    def create 
    @user = current_user 
    @fable = @user.fables.build(params[:fable]) 
    @fable.save 
    respond_with @fable, :location => @fable 
    end 

関連ルートがある呼び出します

root :to => "pages#home" 

    resources :fables 

    match '/views/fables/fablemaker', :to => 'fables#create' 
    get "fables/create" 

これは、ページを起動することになっているリンクです：私は、ページのソースをチェックすると、すべての要素

<li><%= link_to image_tag("makeyourfable.png", :size => "130x102", 
               :alt => "freewriting portal", 
               :class => "typewriter", 
               :mouseover => "makeyourfableH.png"), 
               new_fable_path %> 
    </li> 

フィールドはロードされていますが、表示されません。もちろん、ダイアログボックスには表示されません。そのすべてが私のapplication.htmlコンテンツです。

Answer 1

ダイアログjQueryのオープン機能では、#fable_form要素に新しいHTMLを挿入しようとしています。

あなたは#fableMaker要素にそのHTMLを挿入するつもりであると思います。

jsレスポンスは、フォームを構成し、既に呼び出しビューにあったdivに挿入するhtmlをレンダリングしています。

$("#fableMaker").dialog({ 
    autoOpen: false, 
    height: 900, 
    width: 550, 
    modal: true, 
    title: 'Fable Maker', 
    buttons: { 
     "Create": function() { $("#fable_form").submit() }, 
     }, 
     open: function() { 
     $("#fableMaker").html("<%= escape_javascript(render('fablemaker')) %>") 
    }, 
});