Note that there are some explanatory texts on larger screens.

plurals
  1. POTrying to make a form in a jQuery dialog modal-form work. What am I missing?
    text
    copied!<p>I want my views/blogs/new to open in a dialog. Tried to make it work per this SO answer: <a href="https://stackoverflow.com/a/5318155/732200">https://stackoverflow.com/a/5318155/732200</a> </p> <p>Here is my code (the blogs are called "fables"):</p> <p>This is my partial - views/fables/fablemaker.html.erb</p> <pre><code>&lt;div id="fableMaker" title="Fable Maker" style="display:none"&gt; &lt;div id="countdownTimer"&gt; &lt;span id="countdown_timer" class="timer"&gt;4:20&lt;/span&gt;&lt;br /&gt; &lt;button id="play_btn"&gt;Play Timer&lt;/button&gt; &lt;button id="pause_btn"&gt;Pause Timer&lt;/button&gt; &lt;button id="reset_btn"&gt;Reset Timer&lt;/button&gt; &lt;/div&gt; &lt;%= form_for @fable do |f| %&gt; &lt;p&gt; &lt;%= f.label :content, "Fable Portal:" %&gt;&lt;br /&gt; &lt;%= f.text_area :content, :style =&gt; "" %&gt; &lt;/p&gt; &lt;p&gt; &lt;%= f.label :title, "What would you like to title your creation?" %&gt;&lt;br /&gt; &lt;%= f.text_field :title %&gt; &lt;/p&gt; &lt;p&gt;&lt;%= f.submit "Create Fable", remote: true %&gt;&lt;/p&gt; &lt;% end %&gt; &lt;/div&gt; </code></pre> <p>Here is the views/fables/create.js.erb:</p> <pre><code>$("#fableMaker").dialog({ autoOpen: false, height: 900, width: 550, modal: true, title: 'Fable Maker', buttons: { "Create": function() { $("#fable_form").submit() }, }, open: function() { $("#fable_form").html("&lt;%= escape_javascript(render('fablemaker')) %&gt;") }, }); </code></pre> <p>Here is the fables_controller, create action:</p> <pre><code>class FablesController &lt; ApplicationController respond_to :html, :js def create @user = current_user @fable = @user.fables.build(params[:fable]) @fable.save respond_with @fable, :location =&gt; @fable end </code></pre> <p>Here are the related routes calls:</p> <pre><code> root :to =&gt; "pages#home" resources :fables match '/views/fables/fablemaker', :to =&gt; 'fables#create' get "fables/create" </code></pre> <p>This is the link that is supposed to launch the page:</p> <pre><code> &lt;li&gt;&lt;%= link_to image_tag("makeyourfable.png", :size =&gt; "130x102", :alt =&gt; "freewriting portal", :class =&gt; "typewriter", :mouseover =&gt; "makeyourfableH.png"), new_fable_path %&gt; &lt;/li&gt; </code></pre> <p>When I check the page source, all of the elements and fields are loading, but they are not visible - and not, of course, in a dialog box. All that shows is my application.html content.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload