[jQuery] .after not really after
I'm having an issue where i have a table full of records,
when the user clicks on an entry i want it to slide down. he problem
is that it slides down
after right after the <tr> pushing out everything else.
i was under the impression that .after should be after the </td> and
not after the <tr> which is an append to me.
As its not working I'm of course sure im wrong.
any inputs on this would be much appreciated
two screenshots of what im trying to say can be find here
http://www.konstructive.com/table1.png
http://www.konstructive.com/table2.png
thanks,
Johan
<tr class="mytriptableitem" id="286">
<td>San Francisco</td>
<td>Mountain View</td>
<td>None</td>
<td>None</td>
<td>48</td>
</tr>
$(".mytriptableitem").click(function(){
//$("#map_canvas").remove();
if ($("#mytripinfoblock").length > 0) {
$("#mytripinfoblock").fadeOut("slow");
$("#mytripinfoblock").remove();
}
if ($(this).attr("clicked") == 1){
$(this).attr("clicked","0");
$(this).fadeTo("slow", 1);
}
else {
url = "/myTripFootprint/trip_query/mytripsmap?id="+$
(this).attr("id");
$(this).after("<div id=\"mytripinfoblock\"><img src=\"/
myTripFootprint/static/images/26-0.gif\" class=\"mytriploadimage\"> </
div>").fadeIn(); //nice little ajax load image
$("#mytripinfoblock").load(url,0,function(){ //loads the dropdown
var from = $("#mapfrom").attr("value");
var to = $("#mapto").attr("value");
initialize(from, to, 'mymap_canvas'); //initalizes the google map
var directions = setDirections(from, to, "en_US"); //loads the
googlemap
}).hide();
$("#mytripinfoblock").fadeIn();
$(this).attr("clicked","1");
//$(this).css({ backgroundColor:"white"});
$(this).fadeTo("slow", 0.33);
}
});