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