Question

I have few buttons that call Ajax functions (submit contact form, submit newsletter, check if user is valid/already registered, check user status etc…)

I use the ajaxSetup to show a Loading Dialog every time someone click on a button in order to tell him to wait. Here’s my code:

$('#submit').click(function(e) {
    // easily done but it's repetitive
    $('#loadingDiablog').css({'top':e.pageY+'px','left':e.pageX+'px'});
});


$.ajaxSetup({
    beforeSend: function(jqXHR, settings) {
        $('#loadingDiablog').css({'top':e.pageY+'px','left':e.pageX+'px'}); // e is not defined here
    }
});

So in order to not repeat the same code, How can I pass the mouse even ( passed on .click(function(e) ) to the beforeSend in the AjaxSetup?

Thanks

Answer 1

One quick way of doing it would be to add a class to all your submit buttons that you want to show the loader for and just fire it when any of them are clicked.

$('#submit .ajaxButton').click(function(e) {
    $('#loadingDiablog').css({'top':e.pageY+'px','left':e.pageX+'px'});
});

UPDATE:

var myEvent;

$(document).ready(function()
{
    $('#submit').click(function(e) {
        myEvent = e;
    });

    $.ajaxSetup({
        beforeSend: function(jqXHR, settings) {
            if (myEvent != null) {
                $('#loadingDiablog').css({'top':myEvent.pageY+'px','left':myEvent.pageX+'px'});
            }
    });
});