Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

trigger a javascript function before on any AJAX call

Here, I have a function which needs to be called before any AJAX call present in the .NET project.

Currently, I have to call checkConnection on every button click which is going to invoke AJAX method, if net connection is there, proceeds to actual AJAX call!
Anyhow, I want to avoid this way and the checkConnection function should be called automatically before any AJAX call on the form.

In short, I want to make function behave like an event which will be triggered before any AJAX call

Adding sample, which makes AJAX call on button click; Of course, after checking internet availability...

//check internet availability
function checkConnection() {
    //stuff here to check internet then, set return value in the variable
    return Retval;
}

//Ajax call
function SaveData() {
        var YearData = {
            "holiday_date": D.getElementById('txtYears').value
        };
        $.ajax({
            type: "POST",
            url: 'Service1.svc/SaveYears',
            data: JSON.stringify(YearData),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            processData: true,
            success: function (data, status, jqXHR) {
                //fill page data from DB
            },
            error: function (xhr) {
                alert(xhr.responseText);
            }
        });
    }

And below is current way to call function:

<form onsubmit="return Save();">
    <input type="text" id="txtYears" /><br />
    <input type="submit" id="btnSave" onclick="return checkConnection();" value="Save" />
    <script>
        function Save() {
            if (confirm('Are you sure?')) {
                SaveData();
            }
            else {
                return false;
            }
        }
    </script>
</form>
like image 466
Vikrant Avatar asked Dec 12 '22 00:12

Vikrant


1 Answers

You cannot implicitly call a function without actually writing a call even once(!) in JavaScript.

So, better to call it in actual AJAX and for that you can use beforeSend property of ajaxRequest like following, hence there will be no need to call checkConnection() seperately:

$.ajax({
            type: "POST",
            url: 'Service1.svc/SaveYears',
            data: JSON.stringify(YearData),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            processData: true,
            beforeSend: function() {
               if(!checkConnection())
                   return false;
            },
            success: function (data, status, jqXHR) {
                //fill page data from DB
            },
            error: function (xhr) {
                alert(xhr.responseText);
            }
        });

It reduces the call that you have made onsubmit() of form tag!

UPDATE: to register a global function before every AJAX request use:

$(document).ajaxSend(function() {
  if(!checkConnection())
     return false;
});
like image 197
Brijesh Bhatt Avatar answered Feb 11 '23 16:02

Brijesh Bhatt