ближайший ('tr') не работает с Jeditable

Question

Я использую плагин Jeditable и не понимаю, почему все параметры не указаны в запросе.

HTML перед визуализацией:

<tbody> 
    @foreach ($liste_eleve_note as $eleve_note) 
    <tr data-user-id="{{{ $eleve_note->id_personne }}}"> 
     <td>{{{ $eleve_note->nom }}}&nbsp;{{{ $eleve_note->prenom }}}</td> 
     <td class="edit_area" >{{{ $eleve_note->note_num }}}</td> 
     <td class="edit_area" >{{{ $eleve_note->appreciation }}}</td> 
    </tr> 
    @endforeach 
</tbody> 

Вынесено HTML:

<tbody> 
    <tr data-user-id="3"> 
     <td>HACKETT&nbsp;Steve</td> 
     <td class="edit_area" >22.00</td> 
     <td class="edit_area" ></td> 
    </tr> 
    <tr data-user-id="106"> 
     <td>BRUFFORD&nbsp;Bill</td> 
     <td class="edit_area" >0.00</td> 
     <td class="edit_area" ></td> 
    </tr> 
    <tr data-user-id="107"> 
     <td>LENNON&nbsp;John</td> 
     <td class="edit_area" ></td> 
     <td class="edit_area" ></td> 
    </tr> 
</tbody> 

JQuery:

$('.edit_area').editable($('#url_for_ajax').val()+'/edit_note_epreuve', { 
    indicator : 'Saving...', 
    tooltip : 'Click to edit...', 
    onblur : 'submit', 
    submitdata : { 
     'user_id'  : $(this).closest('tr').data('user-id'), 
     'id_epreuve' : $('#id_epreuve').val(), 
     '_token'  : $('meta[name="_token"]').attr('content') 
    }, 
    onerror : function(settings,original,xhr) { 
     alert("It wasn't possible to edit. Try again"); 
     console.log("XHR Status: " + xhr.status); 
    } 
}); 

Запрос отправляется на сервер:

Отсутствует параметр user_id. У нас есть параметры id и value, которые автоматически добавляются плагином, и у нас есть параметры _token и id_epreuve, которые были добавлены JavaScript.

Но не параметр user_id.

Почему это происходит?

Answer 1

Похоже, что $(this).closest('tr').data('user-id') ожидает this быть установлен на td.edit_area вы звоните editable() на ..., но как написано, что вы используете любой this, когда вы делаете $('.edit_area').editable() вызов. Если this находится за пределами вашего тега <tr>, closest() не найдет data-user-id, что может исключить его из строя.

Это может исправить:

$('.edit_area').each(function(){ 
    $(this).editable($('#url_for_ajax').val()+'/edit_note_epreuve', { 
     indicator : 'Saving...', 
     tooltip : 'Click to edit...', 
     onblur : 'submit', 
     submitdata : { 
      'user_id'  : $(this).closest('tr').data('user-id'), 
      'id_epreuve' : $('#id_epreuve').val(), 
      '_token'  : $('meta[name="_token"]').attr('content') 
     }, 
     onerror : function(settings,original,xhr){ 
      alert("It wasn't possible to edit. Try again"); 
      console.log("XHR Status: " + xhr.status)} 
    }); 
});