1

私の ajax の目標は、誰かのフォローとフォロー解除です。問題は、ボタンをクリックすると resquest が送信されるが、ページを新しいボタンに更新する必要があることです。リフレッシュせずに直接動作するようにするにはどうすればよいですか。

<script type="text/javascript">
$(function() {
    $('.ajax_button').click(function() {
        $.ajax({
            type: "POST",
            url: "/" +$(this).attr('name') + "/toggle_follow_via_ajax",
            success: function(msg){
                elm = $('#btn_' + msg);
                if (elm.val() == "Stop Following") {
                    elm.val("Follow");
                } else {
                        elm.val("Stop Following");
                        }
            }
        });
    })
});
</script>

ボタンを生成する html.erb は次のとおりです。

<div class="button_container">
        <input type="button" name="<%= friend.username %>" id="btn_<%=friend.username %>" class="button ajax_button" 
        value="<% if current_user.is_friend? friend %>Stop Following<% else %>Follow<% end %>"/>
    </div>
4

1 に答える 1

1

サーバーから返された値を使用してボタンのハンドルを取得する代わりに、ajax メソッドを呼び出す前にハンドルを取得できます (既にボタン オブジェクトのスコープ内にいるため)。このような：

<script type="text/javascript">
$(function() {
    $('.ajax_button').click(function() {
        var btn = $(this);
        $.ajax({
            type: "POST",
            url: "/" +$(this).attr('name') + "/toggle_follow_via_ajax",
            success: function(msg) {
                var val = btn.val() == 'Follow' ? 'Stop Following' : 'Follow';
                btn.val(val);
            }
        });
    })
});
</script>

このコードはテストしていませんが、動作するはずです

于 2012-12-23T11:40:40.653 に答える