Någon som har en bra idé för detta?

Låt säga att vi i html har en lista med bilar. När man hovrar över texten för en bil körs en funktion, låt säga "GetInfoAboutCar(id)", låt också säga att ta fram id osv. är löst. Denna funktion ska nu fylla i en informationsruta med info om just denna bilen (låt säga årsmodell).

Alltså

ABC-123
CDE-456

när man hovrar över ABC-123 så anropas GetInfoAboutCar(1) (2006), resp. CDE-456/GetInfoAboutCar(2) (1997).
Och årsmodellen (2006 resp 1997) ska hamna i en liten ruta under CDE-456 med id="info".

Om man nu hämtar informationen med jquery-ajax, så blir det ju något i stil med:
$.ajax({
type: "POST",
url: "TestPage.aspx/GetInfo",
data: "{id: 1 }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
...
}
})


Problemet nu är ju att anropet är asynkront, och inte kan returnera något, vilket gör att jag kan hovra över den andra. (och om man har riktig otur, få grejerna i fel ordning). Hur hanterar man detta snyggast?

Är den enda hållbara varianten att hålla reda på "senaste anropet skedde vid tiden x", och strunta i att göra något om man själv anropades tidigare?
typ:


last_call

x = function(my_call){
$.ajax({
type: "POST",
url: "TestPage.aspx/GetInfo",
data: "{id: 1 }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
if(my_call < last_call)
return;
...
}
})
}

onmouseover = {
var tmp = now;
last_call = tmp;
x(tmp);
}

Eller finns det något smartare sätt?

Du kan göra anropet synkront men jag tror inte det löser ditt problem eftersom ajaxrequesten antagligen ligger i en funktion som kallas när man hovrar.

En lösning är att du skapar rutan när man hovrar och tar bort den när man tar bort musen.
<code>
$('.objekt').mouseOver(function() {
var infoRuta = $('<div/>').attr('id', 'infoRuta')
.appendTo('#containerInfoRuta');

$.ajax({
type: "POST",
url: "TestPage.aspx/GetInfo",
data: "{id: 1 }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
infoRuta.html(msg.modell + ' etc.'); // Använd infoRuta-variabeln så är det ingen risk att du får fram fel data.
});
},
function() {
$('#infoRuta').remove();
});
</code>

Men då får man väl (potentiellt) upp mängder med rutor?! =)

Nej hur så? Det borde inte kunna hända.


Nu funderade jag lite till och kom på att det kan lösas utan mouseout, då är det ingen risk för flera rutor heller.

<code>
$('.objekt').mouseOver(function() {
var infoRuta = $('<div/>').attr('id', 'infoRuta')
.appendTo( $('#containerInfoRuta').html('') );

$.ajax({
type: "POST",
url: "TestPage.aspx/GetInfo",
data: "{id: 1 }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
infoRuta.html(msg.modell + ' etc.'); // Använd infoRuta-variabeln så är det ingen risk att du får fram fel data.
});
});
</code>

Kan hända att du vill ha kvar mouseoutfunktionen om du vill dölja rutan när man tar bort musen från bilden men det är åtmisntone inte längre en nödvändighet.

* Edit några ggr, det här är nog den smdigaste lösningen.