Zeliax Zeliax - 1 month ago 15
Javascript Question

slideUp and slideDown jQuery

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>

Answer

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');
            });
        });
    });

});