Попытка активировать диммер / пульсатор до / во время Ajax

Question

Вот что я хочу / пытаюсь сделать.

Есть форма. Форма имеет кнопку отправки. Событие onMouseDown() для кнопки отправки:

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

Теперь, когда кнопка нажата, я хочу, чтобы она делала три вещи в ТОЧНОМ порядке.

1) Затемните страницу.

2) Выполните Ajax Query и заполните результаты поиска.

3) Убрать тусклость.

РЕДАКТИРОВАТЬ:

Даже пытался использовать события beforeSend и Complete в объекте jQuery

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

В настоящее время это будет выглядеть так:

2) Выполните Ajax Query и заполните результаты поиска.

2) Затемните страницу.

3) Убрать тусклость.

Где результат заполнить (занимает десять секунд), и диммер мигает очень быстро и выключается.

Пожалуйста, помогите мне, коллеги-программисты, я не новичок в этой технологии, и почему я отключил асинхронный режим, чтобы попытаться привести вещи в порядок, но все же НЕТ ДИСКОВ.

Answer 1

Я решил эту проблему с помощью этой функции:

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

Этот 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;
}

и этот 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>