Question

我有一个Symfony应用程序，我正在使用Bootstrap前端。

我正在尝试使用ajax来切换数据库中项目的状态。只要点击a.isActive，就应该调用我的/admin/toggleProgramActive路由。此路由包含适当更新数据库的代码。如果成功，.done应该被调用，其中的jQuery应该运行（改变某些元素的样式）。

然而，这就是发生的事情：我正在调用我的Symfony路由，并且正在更新数据库。但是...... jQuery永远不会触发UI更改。

以下是相关代码：

HTML：

...
<tbody>
    <tr class="bg-primary no-hover">
        <th ...>
            <div>
                <a href="#" 
                   class="isActive" 
                   data-program-id="{{ program.programId }}">
                    <span class="fa fa-power-off {{ active  ?  'active'  :  'non-active' }}" > </span>
                </a>
            </div>
        </th>
    </tr>
</tbody>
...

JavaScript的：

$(document).ready(function ()  {
    $(".isActive").on('click', function()  {
        var element = $(this);
        $.ajax({
            type: "post",
            url:  "/admin/toggleProgramActive",
            data: {"id": $(this).data('program-id')}
        })
            .done(function() {
                element.closest("tr").css('background-color', '#FF6600');
                element.closest("tbody").effect("highlight", {}, 600, function()  {
                    $(this).find("tr.bg-primary").css('background-color', "#337AB7")
                });
            })
    });
});

我知道正在调用.done。如果我在console.log(element)之后放置.done(function() {我可以看到它在Chrome控制台中返回[a.isactive]。

知道我做错了什么吗？在ajax调用之后我应该如何改变CSS？

Answer 1

a.isActive元素附加了click个事件，点击该元素后，将调用上述函数。

在该函数中，您运行ajax请求（将数据发送到服务器 - 但不会更改文档中的任何内容），因此a.isActive元素不会更改。

如果你想 - 你可以在ajax调用返回后更改元素（在ajax调用之前或在done调用之内）。

您可以使用toggleClass function在元素中添加/删除isActive类：

element.toggleClass('isActive')

Answer 2

将采用正确的方法：

在服务器端，路由/admin/toggleProgramActiv应返回programId作为响应。例如，它应该发送JSON响应，如下所示：

{
  programId: '215546'
}

然后在您的js代码中执行以下操作：

$(document).ready(function ()  {
    $(".isActive").on('click', function()  {
        $.ajax({
            type: "post",
            url:  "/admin/toggleProgramActive",
            data: {"id": $(this).data('program-id')}
        })
            .done(function(response) {
                var pid = response.programId;
                var element = $('a[data-program-id=' + pid + ']');

                element.removeClass('isActive');
                element.closest("tr").css('background-color', '#FF6600');
                element.closest("tbody").effect("highlight", {}, 600, function()  {
                    $(this).find("tr.bg-primary").css('background-color', "#337AB7")
                });
            })
    });
});

此外，请确保您的html中包含<tr>标记，其中包含<a>，因为我在您的问题中未看到任何<tr>。

如何在.ajax调用后更改UI元素上的CSS

2 个答案: