Replace anchor with ajax

Replace anchor with ajax

本文关键字：ajax with anchor Replace      更新时间：2023-09-26

我试图通过点击锚点activate/deactivate用户。用户列表是由循环动态生成的。下面是锚标记的一个例子:

<a href="http://www.example.com/users/deactivate/44" class="btn btn-success" title="Deactivate">Activated</a>

ajax call/database updates/response工作良好。我想要的是改变上述锚适当更新href, class, title and text上的成功。例如，它现在应该更改为

<a href="http://www.example.com/users/activate/44" class="btn btn-danger" title="Activate">Inactive</a>

我有以下jquery代码:

$(".btn").click(function(event){
    event.preventDefault();
    var urlSplit=$(this).attr("href").split("/");
    var userid = urlSplit[urlSplit.length-1];
    var status = urlSplit[urlSplit.length-2];
    var $self = $(this); 
    if(status === 'activate'){
        $.post("users/" + status + "/" + userid, {userid: userid, status: status}, function(response){
            if(response === 'activated'){
                //Edit added code
                $self.text("Activated");
                $self.attr('href', "http://www.example.com/users/deactivate/"+userid);
                $self.attr('class', "btn btn-success");
                $self.attr('title', "Deactivate");
            }
        });
    }
    if(status === 'deactivate'){
        $.post("users/" + status + "/" + userid, {userid: userid, status: status}, function(response){
            if(response === 'deactivated'){
                //Edit added code
                $self.text("Inactive");
                $self.attr('href', "http://www.example.com/users/activate/"+userid);
                $self.attr('class', "btn btn-danger");
                $self.attr('title', "Activate");
            }
        });
    }
});
编辑:

我在成功响应中添加了代码。虽然它似乎工作得很好，但它看起来不太适合我，或者是吗?我必须将光标移开并再次聚焦，以查看href和title的变化。

似乎很直接，除非我误读了问题。使用字符串替换和attr来更改属性。使用removeClass和addClass更改类。$self已经指向引起该事件的特定链接。

$(".btn").click(function(event){
    event.preventDefault();
    var urlSplit=$(this).attr("href").split("/");
    var userid = urlSplit[urlSplit.length-1];
    var status = urlSplit[urlSplit.length-2];
    var $self = $(this); 
    if(status === 'activate'){
        $.post("users/" + status + "/" + userid, {userid: userid, status: status}, function(response){
            if(response === 'activated'){
                $self.text("Activated");
                // what to do here
                $self.attr('href', $self.attr('href').replace('activate', 'deactivate'));
                $self.removeClass('btn-danger').addClass('btn-success');
                $self.attr('title', 'Activate');
            }
        });
    }
    if(status === 'deactivate'){
        $.post("users/" + status + "/" + userid, {userid: userid, status: status}, function(response){
            if(response === 'deactivated'){
                //what to do here
                $self.text("Inactive");
                $self.attr('href', $self.attr('href').replace('deactivate', 'activate'));
                $self.removeClass('btn-success').addClass('btn-danger');
                $self.attr('title', 'Deactivate');
            }
        });
    }
});

简单模型:http://jsfiddle.net/TrueBlueAussie/9gLta/2/

我去掉了Ajax调用来测试它。

更新:注意问题代码在这篇文章发布后被更改，以包含大部分代码

相关文章：