I have a table in which I can click the rows () with the class .details. This will show a div with id="details" with extra information about the element in the row.

I have the following code.

$('.details').click(function () {
    $('#details').slideUp('slow');
    $('#details').load($(this).data('url'), { id: $(this).data('id') }, function () {
        $(this).slideDown('slow');
    });
});

However I would like the loading (.load()) to happen after the .slideUp() due to the fact that the load starts while the element is sliding up (which looks wierd). I have tried to add it as a callback function the following way:

$('#details').slideUp('slow', function () {
    $('#details').load($(this).data('url'), { id: $(this).data('id') }, function () {
        $(this).slideDown('slow');
    });
});

However that stops the code from working. Does anyone have an idea on how to solve this?

Thanks.

EDIT:

My table row looks as follows:

<tr class="details" data-id="@item.VehicleID" data-url="@Url.Action("Details", "Vehicle")">
</tr>

My div looks as follows:

<div id="details"></div>

One problem i see with your code is, you are using $(this).data('url') to get the url data attribute value set to the tr which was clicked. but $(this) is actually the $('#details') there because you are accessing it inside the slideUp of $('#details'), which does not have the url data attribute. So you must be getting an error

The solution is to assign the $(this) (clicked row) to a local variable and use that inside your other callback function.

This should work.

$(function () {


    $('.details').click(function () {
        var _this = $(this);

        $('#details').slideUp('slow', function () {
            $('#details').load(_this.data('url'), { id: _this.data('id') }, function () {
                $('#details').slideDown('slow');
            });
        });
    });

});