尝试在Ajax之前/期间调用调光器/调速器 [英] Trying to invoke dimmer/throbber Before/During Ajax

问题描述

这就是我想/正在尝试做的事.

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

有一个表格.表单上有一个提交按钮.提交按钮的onMouseDown()事件是:

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)将页面变暗.

2)执行Ajax查询，并填充搜索结果.

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

3)移除调暗器.

甚至尝试使用jQuery对象中的beforeSend和Complete事件

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)执行Ajax查询，并填充搜索结果.

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

2)将页面变暗.

3)移除调暗器.

填充结果(需要十秒钟)，并且调光器快速闪烁.

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.

推荐答案

我使用以下功能解决了此问题:

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

此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>

这篇关于尝试在Ajax之前/期间调用调光器/调速器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！