jquery UI 대화 상자가 예기치 않게 닫혔습니다.

Question

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 초 간격보다 훨씬 짧게 닫혔습니다. 이 문제를 해결하는 방법에 대한 아이디어가 있습니까? 감사.

Answer 1

코드를 엿볼 수 있으므로 아약스 호출이 중지 될 때 문제가 발생한 것으로 판단됩니다. 즉 코드의이 섹션에서

$("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 대화 상자입니다 표시하지만, 당신도 ajaxStop 기능 화재 내부의 코드를 확인을 누릅니다하고 팝업 전에 사라 그래서, 당신은 그 안에 refreshPage()이라고대로 페이지를 새로 고침하기 전에 심지어 무언가를하십시오.

본인의 핵심 요구 사항을 잘 모르겠지만 내 조언은 다른 곳에서 refreshPage()으로 전화하십시오. 좀 더 명확하게하기 위해 귀하의 질문을 fiddle으로 업데이트하십시오.