When I insert a new text_area input(created by rails) into an existing form with jQuery it doesn’t allow the user to type in the box, but the text_field(also created by rails) input field does.
-form_tag user_posts_path do
-@posts.each_with_index do |post,index|
-semantic_fields_for "posts[#{index}]", post do |f|
=render :partial => "new_form_fields", :locals => {:f=>f, :offer_remove=> index > 0}
%p= add_record_link "+ add another question", "Post"
%p
= submit_tag "Create Question(s)"
%p
= :or.l
= link_to :cancel_and_go_back_to_my_posts.l, user_posts_path(@user)
= new_fields_template("Post", :partial => "new_form_fields")
it correctly inserts the partial "new_form_fields" above the first <p> tag but then does not accept input. Here is "_new_form_fields"
- offer_remove ||= false
.new_fields
- unless @posts[0].category || @posts[0].contest || @categories.blank?
%label
=:category.l
%select{:id=>"post_category_id", :name=>"post[category_id]"}
-for category in @categories
%option{:value=>"#{category.id}"}= h(category.name)
-else
= f.hidden_field :category_id
= f.hidden_field :contest_id
%label
=:title.l
%em="(#{:required.l})"
= f.text_field :title
%label
=:body_text.l
%em="(#{:required.l})"
= f.text_area :raw_post
%label
=:tags.l
%em="(#{:optional_keywords_describing_this_post_separated_by_commas.l})"
= text_field_tag 'tag_list', @posts[0].tag_list, {:autocomplete => "off", :size => 35}
.auto_complete#tag_list_auto_complete
= auto_complete_field 'tag_list', {:url => { :controller => "tags", :action => 'auto_complete_for_tag_name'}, :tokens => [','] }
%label
=:save_post_as.l
= f.select(:published_as, [[:published.l, 'live'], [:draft.l, 'draft']])
Here is the html that is created
<form action="/teddythetwig/posts" method="post"><div style="margin:0;padding:0;display:inline"><input name="authenticity_token" type="hidden" value="Szipko5C4iU5DxDic8xGKyCs62+FxvQlns8IOMjceNc="></div>
<div class="new_fields">
<input id="posts_0_category_id" name="posts[0][category_id]" type="hidden" value="1">
<input id="posts_0_contest_id" name="posts[0][contest_id]" type="hidden">
<label>
Title
<em>(required)</em>
</label>
<input id="posts_0_title" name="posts[0][title]" size="30" type="text">
<label>
Body Text
<em>(required)</em>
</label>
<textarea cols="40" id="posts_0_raw_post" name="posts[0][raw_post]" rows="20" style="display: none; "></textarea><span id="posts_0_raw_post_parent" class="mceEditor defaultSkin"><table id="posts_0_raw_post_tbl" class="mceLayout" cellspacing="0" cellpadding="0" style="width: 259px; height: 137px; "><tbody><tr class="mceFirst"><td class="mceToolbar mceLeft mceFirst mceLast"><a href="#" accesskey="q" title="Jump to tool buttons - Alt+Q, Jump to editor - Alt-Z, Jump to element path - Alt-X"><!-- IE --></a><table id="posts_0_raw_post_toolbar1" class="mceToolbar mceToolbarRow1 Enabled" cellpadding="0" cellspacing="0" align=""><tbody><tr><td class="mceToolbarStart mceToolbarStartButton mceFirst"><span><!-- IE --></span></td><td><a id="posts_0_raw_post_bold" href="javascript:;" class="mceButton mceButtonEnabled mce_bold" onmousedown="return false;" onclick="return false;" title="Bold (Ctrl+B)"><span class="mceIcon mce_bold"></span></a></td><td><a id="posts_0_raw_post_italic" href="javascript:;" class="mceButton mceButtonEnabled mce_italic" onmousedown="return false;" onclick="return false;" title="Italic (Ctrl+I)"><span class="mceIcon mce_italic"></span></a></td><td><a id="posts_0_raw_post_underline" href="javascript:;" class="mceButton mceButtonEnabled mce_underline" onmousedown="return false;" onclick="return false;" title="Underline (Ctrl+U)"><span class="mceIcon mce_underline"></span></a></td><td><span class="mceSeparator"></span></td><td><a id="posts_0_raw_post_justifyleft" href="javascript:;" class="mceButton mceButtonEnabled mce_justifyleft" onmousedown="return false;" onclick="return false;" title="Align left"><span class="mceIcon mce_justifyleft"></span></a></td><td><a id="posts_0_raw_post_justifycenter" href="javascript:;" class="mceButton mceButtonEnabled mce_justifycenter" onmousedown="return false;" onclick="return false;" title="Align center"><span class="mceIcon mce_justifycenter"></span></a></td><td><a id="posts_0_raw_post_justifyright" href="javascript:;" class="mceButton mceButtonEnabled mce_justifyright" onmousedown="return false;" onclick="return false;" title="Align right"><span class="mceIcon mce_justifyright"></span></a></td><td><a id="posts_0_raw_post_indent" href="javascript:;" class="mceButton mceButtonEnabled mce_indent" onmousedown="return false;" onclick="return false;" title="Indent"><span class="mceIcon mce_indent"></span></a></td><td><a id="posts_0_raw_post_outdent" href="javascript:;" class="mceButton mce_outdent mceButtonDisabled" onmousedown="return false;" onclick="return false;" title="Outdent"><span class="mceIcon mce_outdent"></span></a></td><td><span class="mceSeparator"></span></td><td><a id="posts_0_raw_post_bullist" href="javascript:;" class="mceButton mceButtonEnabled mce_bullist" onmousedown="return false;" onclick="return false;" title="Unordered list"><span class="mceIcon mce_bullist"></span></a></td><td><a id="posts_0_raw_post_numlist" href="javascript:;" class="mceButton mceButtonEnabled mce_numlist" onmousedown="return false;" onclick="return false;" title="Ordered list"><span class="mceIcon mce_numlist"></span></a></td><td><span class="mceSeparator"></span></td><td><a id="posts_0_raw_post_link" href="javascript:;" class="mceButton mce_link mceButtonDisabled" onmousedown="return false;" onclick="return false;" title="Insert/edit link"><span class="mceIcon mce_link"></span></a></td><td><a id="posts_0_raw_post_unlink" href="javascript:;" class="mceButton mce_unlink mceButtonDisabled" onmousedown="return false;" onclick="return false;" title="Unlink"><span class="mceIcon mce_unlink"></span></a></td><td><a id="posts_0_raw_post_image" href="javascript:;" class="mceButton mceButtonEnabled mce_image" onmousedown="return false;" onclick="return false;" title="Upload or insert an image"><span class="mceIcon mce_image"></span></a></td><td><a id="posts_0_raw_post_media" href="javascript:;" class="mceButton mceButtonEnabled mce_media" onmousedown="return false;" onclick="return false;" title="Insert / edit embedded media"><span class="mceIcon mce_media"></span></a></td><td><span class="mceSeparator"></span></td><td><a id="posts_0_raw_post_undo" href="javascript:;" class="mceButton mce_undo mceButtonDisabled" onmousedown="return false;" onclick="return false;" title="Undo (Ctrl+Z)"><span class="mceIcon mce_undo"></span></a></td><td><a id="posts_0_raw_post_redo" href="javascript:;" class="mceButton mce_redo mceButtonDisabled" onmousedown="return false;" onclick="return false;" title="Redo (Ctrl+Y)"><span class="mceIcon mce_redo"></span></a></td><td><a id="posts_0_raw_post_code" href="javascript:;" class="mceButton mceButtonEnabled mce_code" onmousedown="return false;" onclick="return false;" title="Edit HTML Source"><span class="mceIcon mce_code"></span></a></td><td class="mceToolbarEnd mceToolbarEndButton mceLast"><span><!-- IE --></span></td></tr></tbody></table><a href="#" accesskey="z" title="Jump to tool buttons - Alt+Q, Jump to editor - Alt-Z, Jump to element path - Alt-X" onfocus="tinyMCE.getInstanceById('posts_0_raw_post').focus();"><!-- IE --></a></td></tr><tr><td class="mceIframeContainer mceFirst mceLast"><iframe id="posts_0_raw_post_ifr" src='javascript:""' frameborder="0" style="width: 100%; height: 93px; "></iframe></td></tr><tr class="mceLast"><td class="mceStatusbar mceFirst mceLast"><div id="posts_0_raw_post_path_row">Path: <a href="#" accesskey="x"></a><span id="posts_0_raw_post_path"><a href="javascript:;" onmousedown="return false;" class="mcePath_0">p</a></span></div><a id="posts_0_raw_post_resize" href="javascript:;" onclick="return false;" class="mceResize"></a></td></tr></tbody></table></span>
<label>
Tags
<em>(optional keywords describing this post, separated by commas)</em>
</label>
<input autocomplete="off" id="tag_list" name="tag_list" size="35" type="text" value="">
<div class="auto_complete" id="tag_list_auto_complete" style="display: none; ">
<script type="text/javascript">
//<![CDATA[
var tag_list_auto_completer = new Ajax.Autocompleter('tag_list', 'tag_list_auto_complete', '/admin/tags/auto_complete_for_tag_name', {tokens:[',']})
//]]>
</script>
</div>
<label>
Save post as:
</label>
<select id="posts_0_published_as" name="posts[0][published_as]"><option value="live">Published</option>
<option value="draft" selected="selected">draft</option></select>
</div>
<div class="new_fields">
<input id="posts_1278546911484_category_id" name="posts[1278546911484][category_id]" type="hidden">
<input id="posts_1278546911484_contest_id" name="posts[1278546911484][contest_id]" type="hidden">
<label>
Title
<em>(required)</em>
</label>
<input id="posts_1278546911484_title" name="posts[1278546911484][title]" size="30" type="text">
<label>
Body Text
<em>(required)</em>
</label>
<textarea cols="40" id="posts_1278546911484_raw_post" name="posts[1278546911484][raw_post]" rows="20" style="display: none; "></textarea><span id="posts_1278546911484_raw_post_parent" class="mceEditor defaultSkin"><table id="posts_1278546911484_raw_post_tbl" class="mceLayout" cellspacing="0" cellpadding="0" style="width: 100px; height: 100px; "><tbody><tr class="mceFirst"><td class="mceToolbar mceLeft mceFirst mceLast"><a href="#" accesskey="q" title="Jump to tool buttons - Alt+Q, Jump to editor - Alt-Z, Jump to element path - Alt-X"><!-- IE --></a><table id="posts_1278546911484_raw_post_toolbar1" class="mceToolbar mceToolbarRow1 Enabled" cellpadding="0" cellspacing="0" align=""><tbody><tr><td class="mceToolbarStart mceToolbarStartButton mceFirst"><span><!-- IE --></span></td><td><a id="posts_1278546911484_raw_post_bold" href="javascript:;" class="mceButton mceButtonEnabled mce_bold" onmousedown="return false;" onclick="return false;" title="Bold (Ctrl+B)"><span class="mceIcon mce_bold"></span></a></td><td><a id="posts_1278546911484_raw_post_italic" href="javascript:;" class="mceButton mceButtonEnabled mce_italic" onmousedown="return false;" onclick="return false;" title="Italic (Ctrl+I)"><span class="mceIcon mce_italic"></span></a></td><td><a id="posts_1278546911484_raw_post_underline" href="javascript:;" class="mceButton mceButtonEnabled mce_underline" onmousedown="return false;" onclick="return false;" title="Underline (Ctrl+U)"><span class="mceIcon mce_underline"></span></a></td><td><span class="mceSeparator"></span></td><td><a id="posts_1278546911484_raw_post_justifyleft" href="javascript:;" class="mceButton mceButtonEnabled mce_justifyleft" onmousedown="return false;" onclick="return false;" title="Align left"><span class="mceIcon mce_justifyleft"></span></a></td><td><a id="posts_1278546911484_raw_post_justifycenter" href="javascript:;" class="mceButton mceButtonEnabled mce_justifycenter" onmousedown="return false;" onclick="return false;" title="Align center"><span class="mceIcon mce_justifycenter"></span></a></td><td><a id="posts_1278546911484_raw_post_justifyright" href="javascript:;" class="mceButton mceButtonEnabled mce_justifyright" onmousedown="return false;" onclick="return false;" title="Align right"><span class="mceIcon mce_justifyright"></span></a></td><td><a id="posts_1278546911484_raw_post_indent" href="javascript:;" class="mceButton mceButtonEnabled mce_indent" onmousedown="return false;" onclick="return false;" title="Indent"><span class="mceIcon mce_indent"></span></a></td><td><a id="posts_1278546911484_raw_post_outdent" href="javascript:;" class="mceButton mce_outdent mceButtonDisabled" onmousedown="return false;" onclick="return false;" title="Outdent"><span class="mceIcon mce_outdent"></span></a></td><td><span class="mceSeparator"></span></td><td><a id="posts_1278546911484_raw_post_bullist" href="javascript:;" class="mceButton mceButtonEnabled mce_bullist" onmousedown="return false;" onclick="return false;" title="Unordered list"><span class="mceIcon mce_bullist"></span></a></td><td><a id="posts_1278546911484_raw_post_numlist" href="javascript:;" class="mceButton mceButtonEnabled mce_numlist" onmousedown="return false;" onclick="return false;" title="Ordered list"><span class="mceIcon mce_numlist"></span></a></td><td><span class="mceSeparator"></span></td><td><a id="posts_1278546911484_raw_post_link" href="javascript:;" class="mceButton mce_link mceButtonDisabled" onmousedown="return false;" onclick="return false;" title="Insert/edit link"><span class="mceIcon mce_link"></span></a></td><td><a id="posts_1278546911484_raw_post_unlink" href="javascript:;" class="mceButton mce_unlink mceButtonDisabled" onmousedown="return false;" onclick="return false;" title="Unlink"><span class="mceIcon mce_unlink"></span></a></td><td><a id="posts_1278546911484_raw_post_image" href="javascript:;" class="mceButton mceButtonEnabled mce_image" onmousedown="return false;" onclick="return false;" title="Upload or insert an image"><span class="mceIcon mce_image"></span></a></td><td><a id="posts_1278546911484_raw_post_media" href="javascript:;" class="mceButton mceButtonEnabled mce_media" onmousedown="return false;" onclick="return false;" title="Insert / edit embedded media"><span class="mceIcon mce_media"></span></a></td><td><span class="mceSeparator"></span></td><td><a id="posts_1278546911484_raw_post_undo" href="javascript:;" class="mceButton mce_undo mceButtonDisabled" onmousedown="return false;" onclick="return false;" title="Undo (Ctrl+Z)"><span class="mceIcon mce_undo"></span></a></td><td><a id="posts_1278546911484_raw_post_redo" href="javascript:;" class="mceButton mce_redo mceButtonDisabled" onmousedown="return false;" onclick="return false;" title="Redo (Ctrl+Y)"><span class="mceIcon mce_redo"></span></a></td><td><a id="posts_1278546911484_raw_post_code" href="javascript:;" class="mceButton mceButtonEnabled mce_code" onmousedown="return false;" onclick="return false;" title="Edit HTML Source"><span class="mceIcon mce_code"></span></a></td><td class="mceToolbarEnd mceToolbarEndButton mceLast"><span><!-- IE --></span></td></tr></tbody></table><a href="#" accesskey="z" title="Jump to tool buttons - Alt+Q, Jump to editor - Alt-Z, Jump to element path - Alt-X" onfocus="tinyMCE.getInstanceById('posts_1278546911484_raw_post').focus();"><!-- IE --></a></td></tr><tr><td class="mceIframeContainer mceFirst mceLast"><iframe id="posts_1278546911484_raw_post_ifr" src='javascript:""' frameborder="0" style="width: 100%; height: 100px; "></iframe></td></tr><tr class="mceLast"><td class="mceStatusbar mceFirst mceLast"><div id="posts_1278546911484_raw_post_path_row">Path: <a href="#" accesskey="x"></a><span id="posts_1278546911484_raw_post_path"></span></div><a id="posts_1278546911484_raw_post_resize" href="javascript:;" onclick="return false;" class="mceResize"></a></td></tr></tbody></table></span>
<label>
Tags
<em>(optional keywords describing this post, separated by commas)</em>
</label>
<input autocomplete="off" id="tag_list" name="tag_list" size="35" type="text" value="">
<div class="auto_complete" id="tag_list_auto_complete">
</div>
<label>
Save post as:
</label>
<select id="posts_1278546911484_published_as" name="posts[1278546911484][published_as]"><option value="live">Published</option>
<option value="draft" selected="selected">draft</option></select>
</div>
<p><a href="javascript:void(0)" class="add_record" data-model="post">+ add another question</a></p>
<p>
<input name="commit" type="submit" value="Create Question(s)">
</p>
<p>
or
<a href="/teddythetwig/posts">cancel and go back to my posts</a>
</p>
</form>
Update
I’ve used the tool KDiff3 to compare the two span elements underneath the different text areas. There is one significant difference between the two, hopefully this will help someone help me out.
Path: <a href="#" accesskey="x"></a><span id="posts_1278546911484_raw_post_path"></span>
Vs.
Path: <a href="#" accesskey="x"></a><span id="posts_0_raw_post_path"><a href="javascript:;" onmousedown="return false;" class="mcePath_0">p</a></span>
The first snippet does not work, the second one does.
delete this: