Trying to invoke dimmer/throbber Before/During Ajax

Question

Here is what I want to / am trying to do.

There is a form. The form has a submit button. the onMouseDown() event for the submit button is:

<input type='submit' value='Search' name='save' id='save' onmousedown = 'DimOn("test.php", "SearchResultDiv")' />

Now, once the button is clicked I want it to do three things in EXACT order.

1) Dim the page.

2) Perform the Ajax Query, and Populate the search Results.

3) Remove the Dim.

EDIT:

Even tried using the beforeSend, and Complete events in jQuery object

function DimOn(sUrl, sElement) 
{
    jQueryAjax(sUrl, sElement);
}

function jQueryAjax(sUrl, sElement) 
{
    $.ajax({
        url: sUrl,
        type: 'GET',
        async: false,
        cache: false,
        timeout: 1000,
        beforeSend: function(){
            $('#dim').fadeIn();
        },  
        complete : function(){
            $('#dim').fadeOut();
        },      
        error: function(){
            return true;
        },
        success: function(msg){ 
            if (msg != '')
                PopulateResponse(msg, sElement, false);
            else 
                PopulateResponse("An Error Has Occured.", sElement, false);
        }
    });
}

Currently, it will appear to do it like this:

2) Perform the Ajax Query, and Populate the search Results.

2) Dim the page.

3) Remove the Dim.

Where the result populate (takes ten seconds) and the dimmer flashes on and off very quickly.

Please lend me a hand fellow programmers, I am no stranger to this technology, and why I turned async off, to try to get stuff to happen in order, but still NO DICE.

Answer 1

I resolved this issue with this function:

function jax(sUrl, sElement, bEval, sType, bAsync) 
{
    $.ajax({
        url: sUrl,
        type: sType,
        async: true,
        cache: false,
        timeout: 30000,
        error: function()
        {
            return true;
        },
        beforeSend: function(){
            $('div#dim').fadeIn(400);
        },  
        complete : function(){
            $('div#dim').fadeOut(200);
            if(sUrl.search(/scroll=true/ig) != -1)
                goToByScroll(sElement);

        },                      
        success: function(msg){ 
            if (msg != '')
            {
                PopulateResponse(msg, sElement, bEval);
            }
            else
            {
                PopulateResponse("An error has occurred.", sElement, bEval)
                //Coming soon, ajax call to php file to log javascript failure.
            }
        }
    });
}    

This CSS

div#dim
{
    background-color:#000;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
    opacity:.6;
    height:100%;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:1005;
    display:none;
    cursor:wait;
}

div#dim div
{

    position:relative;
    top:400px;
    z-index:1006;
    text-align:center;
    cursor:wait;
}

div#dim div img
{
    z-index:1007;
    text-align:center;
    border:none;
    cursor:wait;
}

and This HTML

<div id='dim'><div style="text-align:center;"><img src="Images/Loading/loading10.gif" alt="Loading... please wait" title="Loading... please wait" /></div></div>