I have AJAX request that takes data from remote file and displays in a div on a page. The AJAX is called and div with data is displayed when user hovers mouse over a link, and it disappears when the mouse is moved out of the link. The div displays immediately, but when mouse is moved out there is about 5 second delay between moving mouse out and hiding the div.
I presume it has something to do with AJAX request blocking the hide function, because when I removed AJAX request the div hides immediately.
Is there something I could do to abort, kill or ignore AJAX when the mouse is removed from the link and just hide the div no matter what?
Here is the code I have so far:
$(function(){
var showPopup = function(){
$.ajax({
type: "GET",
url: "/process.cfm",
data: "id=" + 1,
success: function(data){
$(".profilePopup").html(data);
if ($(data).find(".profileResult").length) {
var text = $(data).find(".profileResult").html();
$(".profilePopup").html(text);
}
}
});
$(".profilePopup").show();
}
var hidePopup = function(){
$(".profilePopup").hide();
}
$("#username").mouseover(showPopup);
$("#username").mouseout(hidePopup);
});