Question

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

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

我没有测试过这段代码，但它应该可以运行

不明白为什么ajax没有直接更新我的按钮

1 个答案: