Question

在我的项目中，我使用jquery和jquery步骤和blockui作为插件

现在我有三步形式;当我从第1步传递到第2步时，我需要进行ajax调用，检查一些字段，如果一切正常，我可以进入第二步

我的伪代码是：

doAjax();

函数function doAjax() { var dataObj = new Object(); dataObj.num = $("#num").val().toUpperCase(); dataObj.cat = $("#cat").val().toUpperCase(); dataObj.canc = false; var start = 0; var end = 0; $.ajax({ url: '${ajaxUrl}', async : false, //I need a synchronous call otherwhise jquery steps will process the result before the end of the call dataType : 'json', contentType: 'application/json; charset=UTF-8', data : JSON.stringify(dataObj), type : 'POST', beforeSend : function(){ start = (new Date()).getTime(); console.log("Start: "+start); $.blockUI({ message: '<h2><img src="${pageContext.request.contextPath}/images/busy.gif" />Processing....</h2>', onBlock: function() { alert('Page is now blocked; fadeIn complete'); } }); }, complete : function(){ end = (new Date()).getTime(); var total = end-start; console.log("Stoppo dopo ("+total+") millisecondi"); $.unblockUI(); }, success: function (data) { var codiceEsito = data.esitoOperazione; if( codiceEsito == 200 ) { esitoSalvataggioPatente = true; } else if( codiceEsito == 412 ) { esitoSalvataggioPatente = false; } else if( codiceEsito == 500 ) { esitoSalvataggioPatente = false; } }, error: function(data){ esitoSalvataggioPatente = false; } }); console.log("Final result "+esitoSalvataggioPatente); return esitoSalvataggioPatente; }的伪代码如下：

Start 1480419159812
jquery-1.10.2.min.js:6 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.send 
Stoppo dopo (1969) millisecondi
Final result false
result false

除了blockui之外，一切都很好;它从未被展示过，似乎从未被称为在我的浏览器控制台中，我看到以下内容：

Array.prototype.reduce

在这种情况下，永远不会调用blockUI。如果我从方法onStepChanging的jquery步骤之外调用相同的方法（doAjax），则成功调用blockUI

有人可以告诉我怎么做吗？基本上我想在步骤更改之前的ajax调用期间向用户提供blockUI

谢谢你安吉洛

Answer 1

我解决了我的问题问题与我想要进行异步调用并告诉jquery-steps等到异步调用结束的事实有关。我做的是以下内容：

var wizard = form.steps({
    headerTag: "h3",
    bodyTag: "div",
    cssClass : "wizard",
    titleTemplate: '<span class="number">#index#</span> #title#',
    transitionEffect: "slideLeft",
    onStepChanging: function (event, currentIndex, newIndex)
    {
        if (currentIndex > newIndex) 
        {
            return true;
        }
        if(currentIndex === 0  && newIndex ===1 )
        {
            doAjax();
            //Always return false so the wizard doesn't change step
            return false; 
        }
    },
    autoFocus : true,
    enableAllSteps : false,
    enableKeyNavigation : false,
    enablePagination : true,
    enableContentCache : false,
    enableCancelButton : true,
    enableFinishButton : true,
    labels : {
        cancel : 'Delete',   
        finish : 'Save',
        next : 'next',
        previous : 'previous',
        current : ""
    }
});

如您所见，我总是返回false，因此向导无法移动然后在我的ajax调用中，我执行以下操作

function doAjax()
{
    var dataObj = new Object();
    dataObj.num = $("#num").val().toUpperCase();
    dataObj.cat = $("#cat").val().toUpperCase();
    dataObj.canc = false;
    $.ajax({
        url: '${ajaxUrl}',
        async  : false, //I need a synchronous call otherwhise jquery steps will process the result before the end of the call
        dataType   : 'json',
        contentType: 'application/json; charset=UTF-8',
        data   : JSON.stringify(dataObj),
        type   : 'POST',
        beforeSend : function(){

            $.blockUI({ 
                message: '<h2><img src="${pageContext.request.contextPath}/images/busy.gif" />Processing....</h2>'
            }); 
        },
        complete   : function(){
            $.unblockUI();
        },
        success: function (data) {
            var codiceEsito = data.esitoOperazione;
            if( codiceEsito == 200 )
            {
               //All controls have been successfully verified; I can move the the next step
               wizard.steps("next");
            }
            else if( codiceEsito == 412 )
            {
                 console.log("Validation failed..."+e);
            }
            else if( codiceEsito == 500 )
            {
                 console.log("Error..."+e);
            }
        },
        error: function(data){
           console.log("Error..."+e);
        }
    });
}

正如您所看到的，当ajax调用完成并且一切正常时，我可以通过编程方式调用此方法wizard.steps("next");

进入下一步

通过使用此tecnique，我在我的场景中解决了我的问题

我希望它对其他人有用

安吉洛

Jquery blockui不使用jquery步骤

1 个答案: