2013-05-07 214 views
0

我打算使用jquery-ui實現交互式取消按鈕對話框。當用戶點擊取消時,它會彈出確認對話框。當用戶點擊是時,它將根據響應狀態進行響應。這是我如何實現代碼。jquery ui對話框意外關閉

function refreshPage() { 
window.location.reload(true); 
} 

$(function() { 
setTimeout(refreshPage,30000); 

var cancelJob = function(e) { 
    e.preventDefault(); 
    $('.hiddenCancelPopup').dialog({ 
     modal: true, 
     buttons: { 
      "Yes": function() { 
       var bookingJobNo = $('.cancelButton').attr("rel"); 
       var channel = $('.cancelButton').attr("channel"); 
       var deviceId = $('.cancelButton').attr("deviceId"); 
       if(readCookie("mbtx_session_id") == null) { 
        $(".invalidId").dialog({}); 
        return; 
       } 
       jQuery.get('/rest/v2/booking/cancel/'+ bookingJobNo + "?channel=" + channel + "&deviceId=" + deviceId, function(result) { 
        if(result.status == 501) { 
         $(".hiddenCancelledPopup").dialog({ 
          modal: true, 
          buttons: { 
           "OK": function() { 
            alert("OK"); 
            window.location.reload(true); 
            //$(this).dialog("close"); 
           } 
          } 
         }); 
        } else { 
         $(".hiddenFailedCancelPopup").dialog({ 
          modal: true, 
          buttons: { 
           "OK": function() { 
            $(this).dialog("close"); 
           } 
          } 
         }); 
        } 
       }); 
      }, 
      "No": function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 
} 

$(".cancelButton").on('click',cancelJob); 

$("body").on({ 
    ajaxStart: function(cancelJob) { 
     $(this).addClass("loading"); 
    }, 
    ajaxStop: function(cancelJob) { 
     $(this).removeClass("loading"); 
     refreshPage(); 
    } 
}); 

這個實現的問題是,在顯示$(".hiddenCancelledPopup").dialog,對話框意外關閉用戶點擊按鈕OK甚至之前。它顯示了一段時間後才消失。

我意識到setTimeout(refreshPage,30000);(意思是每30秒刷新一次)可能會導致問題,但我發現對話在30秒之前關閉的時間更短。任何想法如何解決這個問題?謝謝。

+2

向'refreshPage'添加一個提醒以確保。 – Barmar 2013-05-07 04:44:03

回答

1

通過窺視你的代碼,我懷疑問題是當你的ajax調用停止。即在您的代碼的這一部分。

$("body").on({ 
ajaxStart: function(cancelJob) { 
    $(this).addClass("loading"); 
}, 
ajaxStop: function(cancelJob) { 
    $(this).removeClass("loading"); 
    refreshPage(); //page refreshes after any ajax call stops after executing. 
} 
}); 

大概是什麼情況是帶班hiddenCancelledPopup威力您的UI對話框出現,但之前,你甚至按下OK裏面的代碼ajaxStop功能火災,它刷新爲你調用refreshPage()裏面的頁面,讓您的彈出你面前消失甚至做一些事情。

我不知道你背後的核心要求,但我對你的建議是,在其他地方叫refreshPage()函數。請使用fiddle更新您的問題以使其更清晰。

+0

謝謝。這回答了這個問題。 – snowball147 2013-05-07 06:22:00