0

私のアプリでは、ユーザーが投稿を作成できます。各投稿には多くのコメントがあり、投稿の HTML により、ユーザーは新しいコメントを作成できます。投稿の HTML は次のとおりです。

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

この HTML を生成する erb は次のとおりです。

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

HTML 経由で投稿を作成すると、コメント フォームが正しく表示されます。ただし、Ajax を介して投稿を作成し、jQuery を介して投稿をページに追加すると、filepicker 部分が正しくレンダリングされません。つまり、ボタンをレンダリングせず、style="display: none;") を filepicker 入力フィールドに追加しません。違いについては、以下を参照してください。

<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">

jQuery によって追加されたコード セクションに、ボタンとファイル ピッカーの入力フォーム用の追加の HTML を手動で追加すると、HTML クエリによって作成された投稿と同じように見えるかもしれませんが、ボタンをクリックしてもファイル ピッカー ダイアログは表示されません。ページを更新すると、問題のあるコメント フォームが正しく表示されます。

jQuery 経由でボタンを正しくレンダリングするコメント フォームを取得するにはどうすればよいですか?

4

1 に答える 1

1

探しfilepicker.constructWidgetているアクションを実行する呼び出しを見てください。https://developers.filepicker.io/docs/web/#widgets-programmingを参照してください

于 2013-04-17T02:59:41.387 に答える