Question

Is there anyway to pass additional parameters to the anonymous callback function for AJAX calls?

I need to pass the ID or the element itself to the callback function to show the returned data properly.

My jQuery snippet is below:

$("a.DetailsLink").click(function (e) {
                e.preventDefault();
                var row = $(this).closest("tr");  // determin the TR where the A tag is located.
                row.next("tr.details").toggle(); // Toggle the next TR (initially hidden)
                $.get(this, function (data) {
                    var cell = row.next("tr.details").next("td"); // get the TD contained in next TR.
                    cell.empty();  // clear it
                    cell.html(data); // assign data (I am getting HTML back from the server)
                });
            });

It seem that “var cell” line looses track of the initial A tag. So the “cell” ends up undefined.

My HTML is along the following lines:

...
<tr>
    <td></td>
    <td><a href="..../details/123" class="DetailsLink">Details</a></td>
</tr>
<tr class="details">
    <td colspan="2">&nbsp;</td>  <!-- Initially Hidden -->
</tr>
...

Any pointers on what I’m doing wrong or am missing would be appreciated.

backend is ASP.NET MVC2, but don’t think that has any bearing on anything. Firebug shows the ajax call being made and data being returned.

Answer 1

It should work, because you are creating a closure that has access to row. But your code retrieving the td element is wrong:

var cell = row.next("tr.details").next("td");

This would imply that td is a sibling of tr which it is not! It is a child:

var cell = row.next("tr.details").children("td:first");