jQuery ajax asynchronous submission cross browser issue
I am using .ajax() function to submit my form on the clicking of a link . In the backend , I am actually saving some data from the form into a database.
$("#save_report").click(function()
{
$.ajax({
url : actionOfForm,
type : $('#custom_targeting_param_form').attr("method"),
data : $('#custom_targeting_param_form').serialize(),
success : function(){
alert('Report Saved successfully');
$("#showOrExportCustomTargetingReport").val('showReport');
}
});
return false;
});
Now I am facing a strange issue on firefox and chrome allthough it works fine in IE8.
In chrome and firefox, the first time I click that link , the success alert is shown once , th开发者_运维知识库e next time I click the link, the alert is show twice , next time it shows thrice. This is really bothering me like hell. With this multiple success alerts , the same data is also getting saved multiple times into the database.
I have no clue what is happening with this. It seems totally spooky :O
In my html file , I have the link with the id save_report as below :
<a href="#">
Save Report
<img height="16" width="16" style="vertical-align: bottom;" src="/img/icn_export.gif" alt="export">
In the head , I am including the following jquery function :
$(document).ready(function(){
$('#save_report').bind('click',function(){
customSaveReport('saveReport',0);
return false;
});
});
My customSaveReport() function is written in script.js which I am linking in my .html file.
This customSaveReport() contains the jquery .ajax() call as I have given above.
After some gruelling hours of doing R&D over this issue , I finally found out a logical and probably fitting solution for my problem. Hope this will help others as well .
Actually , my problem lies in the binding of the onclick event with the save_report link. Each time I click on my link , my function gets fired which actually binds the click event with the link . As such for each subsequent clicking on my link , multiple binds happen which causes the multiple requests being send from the ajax call . So , what I did is an event unbind on return success from the Ajax call.
$("#preloader").show();
//$("#preloader").fadeIn("fast");
$.ajax({
url : actionOfForm,
type : $('#custom_targeting_param_form').attr("method"),
data : $('#custom_targeting_param_form').serialize(),
cache : false,
success : function(){
// $dialog.dialog("close");
$("#save_report").unbind();
$("#preloader").fadeOut('slow');
alert('Report Saved successfully');
$("#showOrExportCustomTargetingReport").val('showReport');
},
error : function(error){
alert(error);
}
});
return false;
One more issue that I came across during my study :
Actually , I had an onclick event attached to the link in my html . Again I was calling $(save_report).click(function) in my JS . This was actually binding the click function twice . As a result I was getting 2 responses on a single click when I tested with firefox and chrome , allthough everything was working fine in IE8 (!!surprisingly).
So what I did is removed the $(save_report).click(function) wrapper and now I am directly calling the $.(ajax) function on clicking the link. Here goes my entire function :
function customSaveReport(reportAction,Offset)
{
var actionOfForm = $("#custom_targeting_param_form").attr('action');
actionOfForm = actionOfForm.replace('#export','');
actionOfForm = actionOfForm+'#export';
$("#custom_targeting_param_form").attr('action',actionOfForm);
try{
//e.preventDefault();
$("#preloader").show();
//$("#preloader").fadeIn("fast");
$.ajax({
url : actionOfForm,
type : $('#custom_targeting_param_form').attr("method"),
data : $('#custom_targeting_param_form').serialize(),
cache : false,
success : function(){
// $dialog.dialog("close");
$("#save_report").unbind();
$("#preloader").fadeOut('slow');
alert('Report Saved successfully');
$("#showOrExportCustomTargetingReport").val('showReport');
},
error : function(error){
alert(error);
}
});
return false;
}catch(e){ //alert("ERROR OCCURRED :: "+e);
}
}
精彩评论