2013-01-11 166 views
0

所以我有一個使用模態來阻止UI的自定義加載動畫。我也使用jQuery對話框通知用戶確認或某些事件。處理JQuery刪除事件

我遇到的問題是,我需要做一個ajax請求後,他們單擊jquery對話框上的「確認」按鈕,每當我做任何ajax請求,我開始加載動畫。但是,當我銷燬並刪除對話框並運行ajax請求時,事件冒泡發生的方式會讓事情變得糟糕。即使我在提交事務之前有.dialog(「destroy」)。remove(),它也會執行銷燬並在事務代碼發生後刪除。當它確實消除了我在屏幕上的所有模態時,實質上關閉了我的加載動畫並允許用戶做他們想做的任何事情。

我把一個計時器,它可以工作,但我不喜歡用計時器來處理這個。我想知道是否有其他方法來處理這個問題?

我還補充一點,我支持ie8這個。

的代碼是那種無關,因爲潛在的問題是,這樣做的破壞和刪除似乎在事件隊列的底部放,但這裏的要點是:

var elem = $("#" + ctx.id); 
var button = $("#btn-confirm"); 
button.bind("click", function() { 
    elem.dialog("destroy").remove(); 
    validateEntry = ValidateEntry.getInstance(); 
    validateEntry.callback = new ValidateEntryHandler(this.content); 
    validateEntry.submit(); 
} 

....

// There is inheritance for the transaction class for each service. 
submit = function() { 
app.loadAnim.start(); 
    $.ajax({ 
     type: 'POST', 
     url: this.getApi_path(), 
     data: req, 
     contentType: 'application/xml; charset=utf-8', 
     dataType: "xml", 
     async: ctx.async, 
     timeout: ctx.getService_timeout(), 
     success: function(xml) 
     { 
      if(typeof ctx.returnXML === "undefined"){ 
       ctx.submitHandler(req, JsonixUtil.jsonixUnmarshaller(xml, ctx.jsonixKey)); 
      } 
      else{ 
       ctx.submitHandler(req, xml); 
      }   
     }, 
     error: function(response, strError) 
     { 
      ctx.callback.onFailure(response); 
     } 
    }); 
} 

....

//Load animation start code 
start: function(dotDelay, textDelay){ 
    //set array of images   
    var ss = $('.sliding-dots').children('img');   
    var ssize = ss.size(); 
    var anim = this; 
    if(!this.isShowing){ 
     this.isShowing = true; 
     this.dotTimer = setInterval(function() {     
     for(var i = 0; i < anim.dots.length; i++){ 
      anim.alpha = 1 - Math.abs(anim.currImg-i)*.25; 
      anim.alpha = (anim.alpha > 0) ? anim.alpha : 0; 
       $(ss[i]).css('opacity',anim.alpha); 
      } 
     anim.currImg = (anim.currImg == anim.dots.length-1) ? 0 : anim.currImg+1; 
    }, this.dotDelay); 
    $('.load-animation').fadeIn('slow'); 
    $('.load-animation .text-body').css({opacity: 0}).delay(this.textDelay).animate({opacity: 1}, 'slow'); 

}

+3

請分享您的代碼嗎? – Blazemonger

回答

1

當您的ajax調用返回時,您需要在回調中進行銷燬/刪除操作。例如

$.ajax('/some/url') 
    .done(function(response){ 
     $dialog.dialog('destroy').remove(); 
    }); 
+0

這會消除應用程序的一致性,因爲大多數彈出窗口會關閉,然後會發生加載動畫。在服務調用之後還會有另一個服務調用,所以同樣的事情會再次發生。 –