My app allows users to create posts. Each post has many comments and the HTML for a post allows a user to create a new comment. Here is the HTML for a post:
<div id="post_2_main_comments_thoughts" class="">
<form accept-charset="UTF-8" action="/posts/53/comments" class="new_comment" id="new_comment" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="private="></div>
<div id="post_2_main_comments_thoughts_author_pic" style="display: inline-block; vertical-align: top; padding: 3px; border: 1px solid #ddd; background-color: rgba(204, 204, 204, 0.2); border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;">
<a href="/users/59" style="display: inline-block; text-indent: -9999px; width: 42px; height: 42px; background-image: url('/system/users/avatars/000/000/059/small/stringio.txt?1365876613'); background-repeat: none; border: 1px solid white; border-radius: 35px; -webkit-border-radius: 35px; -moz-border-radius: 35px;">Ryan</a>
</div>
<input class="new_comment_input" id="comment_content" name="comment[content]" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" size="30" type="text" value="thoughts?">
<button type="button" class="thoughts_attachment">Pick File</button><input data-fp-apikey="private" data-fp-button-class="thoughts_attachment" data-fp-button-text="Pick File" data-fp-drag-text="Or drop files here" data-fp-option-multiple="false" data-fp-option-services="" id="comment_attachment_url" name="comment[attachment_url]" size="30" type="filepicker" style="display: none;">
<input name="commit" style="visibility: hidden;" type="submit" value="Create Comment">
</form> </div>
Here is the erb that generates this HTML:
<div id="post_2_main_comments">
<% post.comments.each do |comment| %>
<%= render partial: 'comments/comment', locals: {comment: comment} %>
<% end %>
<div id="post_2_main_comments_thoughts" class="">
<%= form_for [post, Comment.new] do |f| %>
<div id="post_2_main_comments_thoughts_author_pic" style="display: inline-block; vertical-align: top; padding: 3px; border: 1px solid #ddd; background-color: rgba(204, 204, 204, 0.2); border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;">
<a href="<%= user_path(@current_user) %>" style="display: inline-block; text-indent: -9999px; width: 42px; height: 42px; background-image: url('<%= current_user.avatar.url(:small) %>'); background-repeat: none; border: 1px solid white; border-radius: 35px; -webkit-border-radius: 35px; -moz-border-radius: 35px;"><%= @current_user.name %></a>
</div>
<%= f.text_field :content, class: "new_comment_input", value: "thoughts?", :onfocus => "if(this.value==this.defaultValue)this.value='';", :onblur => "if(this.value=='')this.value=this.defaultValue;" %>
<%= f.filepicker_field :attachment_url, button_class: "thoughts_attachment" %>
<%= f.submit style: "visibility: hidden;"%>
<% end %>
</div>
</div>
When I create a post via HTML, the comment form is rendered correctly. However, if I create a post via Ajax and then append the post to the page via jQuery, it renders the filepicker part incorrectly. Namely, it does not render the button and it doesn't add style="display: none;") to the filepicker input field. See below for the difference.
<input data-fp-apikey="private" data-fp-button-class="thoughts_attachment" data-fp-button-text="Pick File" data-fp-drag-text="Or drop files here" data-fp-option-multiple="false" data-fp-option-services="" id="comment_attachment_url" name="comment[attachment_url]" size="30" type="filepicker">
If I manually add the additional HTML for the button and filepicker input form on a code section added by jQuery, it may look the same as the post created by an HTML query, but clicking the button does not tricker a filepicker dialog. If I refresh the page, the offending comment form will be rendered correctly.
How can I get the comment form to render my button correctly via jQuery?
