TWIGレイアウトのjQuery関数が正常に動作しない

Question

私は自分のブログのために簡単な "admin"ページを作成しようとしています。今のところ、私はユーザーをロック/ロック解除するいくつかの「動的な」動作を作成したいと思っています。それから、私はjsonから取り出した別のテーブル行を単一のテーブル行に置き換えたいと思います。私は単純な関数を書いたが、不幸にもそれは正しく動作していません...

ユーザIDに定数を使用すると（テストの場合のみ）、1行しか使用できません。他のボタンはありません。それから私はidとして自分の関数にidを送るようにしましたが、TWIGには存在しないと言われています（本当ですか）。

1人のユーザーだけをロックしたときや別の1つの操作をしたときにすべてのページを再読み込みすることが効果的です。

私の機能をうまく機能させるにはどうすればよいですか？

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にアクセスできます。あなたは、現在のユーザーの `id`既に可能なアクセスを使用して` row`に例えば `data`属性を追加することができ非常に少なくとも、

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