最近（'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，还有 JavaScript 添加的参数 _token 和 id_epreuve .

但不是参数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，这可能会将其排除在 post.

之外

这可能会解决问题（注意：未经测试！）

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

最近（'tr'）不与 Jeditable 一起工作

closest('tr') not working with Jeditable

jquery

jeditable