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

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'); 
       } 
      }); 
     }); 
    }); 

嫩枝

<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!"); 
       } 
      }); 
     }); 
    });