Question

I have this structure

<table> <tr><td><form>   .........<input type="submit"/> </form> </td></tr></table>

I am submitting the form via AJAX Form using jquery like this

var options = {
            target:        '.ajaxMessage',   // target element(s) to be updated with server response 
           // beforeSubmit:  showRequest,
            dataType: 'json',  // pre-submit callback 
            success:     function(data){ myResponse(data)},

            cache: false,
            delegation: true,
            type: 'POST'   }; 

            $(".r_form").ajaxForm(options); 

Everything is working fine but after success i want to append the row to closest table in which form was submitted.

I am not sure what does this points to when i use in myresponse() function after success

Answer 1

Assuming you have the following markup:

<table>
    <tr>
        <td>
            <form class="r_form" method="post" action="...">
                <input type="submit"/>
            </form>
            <div class="ajaxMessage"></div>
        </td>
        <td>
            <form class="r_form" method="post" action="...">
                <input type="submit"/>
            </form>
            <div class="ajaxMessage"></div>
        </td>
        ...
    </tr>
</table>

you could do this in your document.ready handler to AJAXify those forms:

var options = {
    success: function(data, statusText, xhr, form) {
        var ajaxMessage = $(form).closest('td').find('.ajaxMessage');
        ajaxMessage.html(data);
    }
}; 
$('.r_form').ajaxForm(options);

As explained in the documentation the fourth argument of the success callback will represent the corresponding form DOM element and it could be used to find the containing <td> (or <tr> depending on where is the ajaxMessage element located) and from there find the .ajaxMessage div to be updated.