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); 
    }
}