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);
});
you can abort the ajax request, using the jxhr object :
http://api.jquery.com/jQuery.ajax/#jqXHR
something like this :
var jxhr_object = $.ajax({
url: "some.php",
success: function(){
do something
}
});
//kill the request
jxhr_object.abort()
Try this:
var xhr = $.ajax({
type: "POST",
url: "some.php",
data: "name=Somename",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
//kill the request
xhr.abort()
var xhr = $.ajax({
type: "GET",
url: "/process.cfm",
async: true,
data: "your data",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
//kill the request
xhr.abort()
This will not make your browser freeze.
async: true,