Question

HTML

<tr>
    <td>No.</td>
    <td id="2" class="editable">data1</td>
    <td id="2" class="editable">data2</td>
    <td>Usage Left</td>
</tr>
<!-- Multiple rows with different ids -->

javascript

<script type="text/javascript">
    $(function () {
        $('.editable').editable({ onSubmit: Update });

        function Update() {
            var id = $(this).parent('td').attr('id');
            var title = $(this).text();
            $.ajax({
                type: 'post',
                url: 'update.php',
                data: 'title=' + title + '&id=' + id,

                success: function (response) {
                    $('#response').fadeIn('1000').empty().append(response);
                }
            });
        }
    });
</script>

I want to get the value of the ids of class editable, this is an inline edit plugin i am using I am able to collect the data1 and data2 values but for id, I am getting undefined.

What is wrong with my code.

Thank You.

Answer 1

Shouldn’t it be just $(this).attr('id')?

You are attaching the event to td. So this inside the event handler refers to the td itself.