Getting Id with jquery for jeditable

Question

I've been making a site and am now working on the administration part of it so that users can easily be managed, articles easily modified etc. I wanted to use jeditable so that the admin would be really easy to use.

Part of JEditable is working (the p tags are becoming inputs) however I'm having trouble sending the id of the product through the ajax request.

Here's the html code I currently have (generated by php):

    <table class="admin_list">
        <tr>
            <th style="width: 110px;">First Name</th>
            <th style="width: 110px;">Last Name</th>
            <th style="width: 100px;">Date of Birth</th>
            <th style="width: 200px;">Email</th>
            <th style="width: 140px;">Address</th>
            <th style="width: 112px;">Postal Code</th>
            <th style="width: 112px;">Town</th>
            <th style="width: 120px;">Country</th>
            <th style="width: 115px;">Login</th>
            <th style="width: 42px;">Action</th>
        </tr>

        <tr class="2">
            <td><p class="editable">Another</p></td>
            <td><p class="editable">User</p></td>
            <td><p class="editable">11/11/1911</p></td>
            <td><p class="editable">user@email.com</p></td>
            <td><p class="editable">Address</p></td>
            <td><p class="editable">56130</p></td>
            <td><p class="editable">Town</p></td>
            <td><p class="editable">2</p></td>
            <td><p class="editable">bob</p></td>
            <td>
                <a href="http://localhost/monline/private_html/musiconline/?delete/user/2">D</a>
                <a href="">U</a>
                <a href="">D</a>
            </td>
        </tr>

        <tr class="1">
            <td><p class="editable">Daniel</p></td>
            <td><p class="editable">Lucas</p></td>
            <td><p class="editable">10/04/1990</p></td>
            <td><p class="editable">dan@email.com</p></td>
            <td><p class="editable">myAddress</p></td>
            <td><p class="editable">12345</p></td>
            <td><p class="editable">myTown</p></td>
            <td><p class="editable">8</p></td>
            <td><p class="editable">dan</p></td>
            <td>
                <a href="http://localhost/monline/private_html/musiconline/?delete/user/1">D</a>
                <a href="">U</a>
                <a href="">D</a>
            </td>
        </tr>
    </table>

    <input type="text" class="edit_id" value="" />

Here's the jquery I've written:

    $( function() {
        $('.admin_list tr').hover( function() {
            $('.edit_id').attr( 'value', $(this).attr('class') );
        });

        $('.editable').editable("http://localhost/monline/private_html/musiconline/?admin/edit/users/" + $('.edit_id').attr('value'), {
            indicator : 'Saving...',
            onblur : 'submit',
            method : 'PUT'
        });
    });

As you can see I'm getting the ID of the current row when the mouse hovers over (which I would like to avoid), however when I submit the page the ID is not being set in the jeditable url.

Does anyone know how this can be sorted as I would like to use an in-place editor for the admin panel?

As an optional request how could I get the class of the tr surrounding the input that's been clicked on? I've tried something along the line of $(this).parent().parent().attr('class')

Thanks Dan

Answer 1

Have you tried (without the hover function, $(this).closest('tr').attr('value') should point to the relative <tr>)

 $('.editable').editable("http://localhost/monline/private_html/musiconline/?admin/edit/users/" + $(this).closest('tr').attr('value'), {
        indicator : 'Saving...',
        onblur : 'submit',
        method : 'PUT'
    });