1

現在使用しているコードは次のとおりです。

$.ajax({
    success: function(){
        $('.post_container').append('test <br />');
    }
});
<% sleep 1 %>

これは、単一のメイン マイクロポスト フォームに使用したコードに似ていますが、これには同じクラスを使用するコメントがいくつかあるため、テストは、投稿が作成されたばかりのものではなく、すべての post_containers に適用されます。「テスト」テキストは最終的に、ユーザーが投稿した実際のコメントを保持する div に置き換えられます。

通常は「this」を使用しますが、ここでは機能しません。

HTML:

<div class="post_content">
    <div class="post_container">
        <div class="userNameFontStyle">
            <%= link_to current_users_username.capitalize, current_users_username %> -
            <div class="post_time">
                <%= time_ago_in_words(m.created_at) %> ago.
            </div>
        </div>  
        <%=  simple_format h(m.content) %>
    </div>
    <% if m.comments.any? %>
    <% comments(m.id).each do |comment| %>
    <div class="comment_container">
        <%= link_to image_tag(default_photo_for_commenter(comment), :class => "commenter_photo"), commenter(comment.user_id).username %>
        <div class="commenter_content">
            <div class="userNameFontStyle">
                <%= link_to commenter(comment.user_id).username.capitalize, commenter(comment.user_id).username %> - <%=  simple_format h(comment.content) %>
            </div>
        </div>
        <div class="comment_post_time">
            <%= time_ago_in_words(comment.created_at) %> ago.
        </div>
    </div>
    <% end %>
    <% end %>
    <% if logged_in? %>
    <%= form_for @comment, :remote => true do |f| %>
    <%= f.hidden_field :user_id, :value => current_user.id %>
    <%= f.hidden_field :micropost_id, :value => m.id %>
    <%= f.text_area :content, :placeholder => 'Post a comment...', :class => "comment_box", :rows => 0, :columns => 0 %>
    <div class="commentButtons">         
        <%= f.submit 'Post it', :class => "commentButton" %>
        <div class="cancelButton">
            Cancel
        </div>
    </div>   
    <% end %>
    <% end %>
    </div>
</div>

どうすればこれに対処できますか？

敬具

4

2 に答える 2

0

新着：

$(function() {
    $('.post-form').submit(function(){
        var $post_content = $(this).find('.post_content');

        $.ajax({
            url: this.attributes['action'],
            data: $(this).serialize(),
            success: function() {
                $post_content.append('test <br />');
            }
        })
        return false; //this will stop the form from really submitting.
    });
});

これはあなたが探していることをするはずです。この JavaScript を任意の場所に含めるだけです。

年：

$('form').submit(function(){
    $.ajax({
        url: this.attributes['action'],
        data: $(this).serialize(),

        //the below line might need to be adapted.
        var post_content = $(this).find('.post_content');

        success: function() {
            $(post_content).append('test <br />');
        }
    })

これは、ページにフォームが 1 つしかないことを前提としています。ただし、コードが完全に機能するためには、どの .post_content が「送信された」post_content であるかを区別する方法を知る必要があります。それをプログラムでどのように判断しますか？post_content ごとに異なるボタンはありますか? または、各 post_content div の周りに異なるフォームがありますか? いずれにせよ、それを何らかの方法で js コードに含める必要があります。

于 2012-04-11T01:25:56.690 に答える
0

これが私が最終的にそれをしなければならなかった方法です。

.new_comment は私のフォーム ID です

$('.new_comment').on('ajax:success', function(){
    $(this).parent('.post_content').find('.comment_container:last').after("<BR />TEST <BR />");

});

<% sleep 1 %>

唯一の問題は、作成したばかりの投稿の実際の comment_container を特定することです。

于 2012-04-11T23:03:07.370 に答える