closest('tr') not working with Jeditable

Question

I am using the plugin Jeditable and do not understand why all the parameters are not in the request.

HTML before rendering:

<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>

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

The request sent to the server:

The parameter user_id is missing. We have the parameters id and value which are automatically added by the plugin, and we have the parameters _token and id_epreuve which have been added by the JavaScript.

But not the parameter user_id.

Why is this happening?

Answer 1

It seems like $(this).closest('tr').data('user-id') expects this to be set to the td.edit_area you’re calling editable() on… but as written, you’re using whatever this is when you make the $('.edit_area').editable() call. If this is outside your <tr> tag, closest() won’t find data-user-id, which may exclude it from the post.

This may fix it (note: untested!)

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