Question

我正在尝试为我的博客创建简单的“管理员”页面。现在我想创建一些锁定/解锁用户的“动态”行为。然后我想用json取代另一个表行。我写了一个简单的函数但不幸的是它没有正常工作......

当我为用户id使用常量值（仅用于测试）时，它可以工作，但仅适用于一行。其他按钮没有。然后我尝试将id作为参数发送到我的函数，但现在它说它在我的TWIG中不存在（什么是真的）。

我想让它工作，因为当你只锁定一个用户或做了另一个单一动作时重新加载所有页面，这不是一个好主意。

如何让我的功能以良好的方式运作？

SCRIPT

$(document).ready(function(){
        $(".LockUserButton").click(function(id){
            $(this).closest("tr").toggleClass('locked progress-bar-striped');
            $.ajax({
                type: 'POST',
                url: "{{ path('lock_ajax', {'id': id }) }}",
                data: { user_id: "{{ user.id }}" },
                dataType: 'json',
                success: function () {
                    $(this).closest("tr").toggleClass('locked progress-bar-striped');
                }
            });
        });
    });

TWIG

<div class="table-content">
    {% for u in users %}
            {% if u.locked %}
                <tr id="tableRow" class="locked progress-bar-striped">
            {% else %}
                <tr id="tableRow" class="">
            {% endif %}

            {% if u.roles[0] == 'ROLE_SUPER_ADMIN' %}

                <td id="roles">
                    <h4><span class="glyphicon glyphicon-star admin-star" data-toggle="tooltip" data-placement="right" title="{{ u.roles[0] }}"></span></h4>
                </td>
                <td>{{ u.username }}</td>
                <td>{{ u.email }}</td>
                <td>
                    <span class="glyphicon glyphicon-lock admin-lock" data-toggle="tooltip" data-placement="right" title="Cannot modyfi this user!"></span>
                </td>
                <td>
                    <span class="glyphicon glyphicon-lock admin-lock" data-toggle="tooltip" data-placement="right" title="Cannot modyfi this user!"></span>
                </td>

            {% else %}

                <td id="roles">
                    <h4><span class="glyphicon glyphicon-star-empty user-star" data-toggle="tooltip" data-placement="right" title="{{ u.roles[0] }}"></span></h4>
                </td>
                <td>{{ u.username }}</td>
                <td>{{ u.email }}</td>
                <td>
                    <div class="btn btn-custom LockUserButton">LOCK USER WITHOUT RELOADING</div>
                </td>
                <td>
                    <a href="/profile/admin/delete_user/{{ u.id }}" onclick="return confirm('{{ 'user.deleting'|trans }}')">
                        <div class="btn btn-custom hvr-grow">
                            <span class="glyphicon glyphicon-trash"></span>
                        </div>
                    </a>
                </td>

            {% endif %}

            </tr>
    {% endfor %}
</div>

控制器行动

/**
 * @Route("/profile/ajax/{id}", name="lock_ajax")
 */
public function ajaxLock($id, Request $request)
{
    $entityManager = $this->getDoctrine()->getManager();

    $user = $entityManager->getRepository('AppBundle:User')->find($id);

    if($user->isLocked()){
        $user->setLocked(false);
    }else{
        $user->setLocked(true);
    }

    $entityManager->persist($user);
    $entityManager->flush();

    $result = array();
    $result[0] = $user;

    return new JsonResponse($result);
}

Answer 1

感谢Artamiel我终于明白了！这是我案例的解决方案：

1）我已将data-id="{{ u.id }}"属性添加到我的按钮。现在我可以访问我的实体ID。

2）我修改了一下我的脚本：

$(document).ready(function(){
        $(".LockUserButton").click(function(){
            //get user id from twig layout
            var user = $(this).data("id");

            //ajax request
            $.ajax({
                type: 'POST',
                url: "/profile/ajax/"+user,
                data: { user_id: "user" },
                dataType: 'json',
                context: this,
                success: function () {
                    //i've wrote some function to toggle html
                    $(this).toggleText('{{ 'user.unlocked'|trans }}', '{{ 'user.locked'|trans }}');

                    //find table row and toggle classes when button clicked and request ok
                    $(this).closest("tr").toggleClass('locked progress-bar-striped');
                },
                error: function(){
                    alert("Error!");
                }
            });
        });
    });

TWIG布局中的jQuery函数无法正常工作

1 个答案: