jquery로 자바 스크립트 확인 확인 바꾸기

Question

다음 코드를 사용하여 jquery UI 대화에서 기본 javascript 확인을 사용합니다.

jQuery.extend({ 
    confirm: function(message, title, okAction) { 
     jQuery("<div></div>").dialog({ 
      // Remove the closing 'X' from the dialog 
      open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); }, 
      buttons: { 
       "Ok": function() { 
        jQuery(this).dialog("close"); 
        return true; 
       }, 
       "Cancel": function() { 
        jQuery(this).dialog("close"); 
        return false; 
       } 
      }, 
      close: function(event, ui) { jQuery(this).remove(); }, 
      resizable: false, 
      title: title, 
      modal: true 
     }).text(message); 
    } 
}); 

jQuery.confirm(
     "LogOut", 
     "Do you want to log out", 
     function() { 
     }); 

이제 로그 아웃 작업에이 코드를 사용해야합니다. 그래서 코드에서 javascript를 대신 할 수 있습니다.

<a class="homeImage" onclick="return confirm('Do you want to logout?');" href="/future/myhome/head?$event=logout">LOG OUT</a> 

내가 다른 함수와 함께 확인을 교체하고 결정을 내릴 반환 값을 기다릴 때 내가 지금 직면하고 문제, 대화 상자는 변수에 값을 반환하지 않습니다. 이 두 함수는 동시에 실행됩니다 (경고를 표시하지만 href 대상으로도 안내됩니다). 메서드가 true 또는 false 값을 반환 할 수 있으므로 href 대상으로 진행할 수있는 방법이 있습니까?

참조 : jQuery Extend, jQuery UI Replacement for alert
관련 질문 : 당신이 실제로 수 있다면 js override confirm

Answer 1

문제는 기본 confirm 대화 상자가 synchronus이며 전체 브라우저 UI를 차단한다는 것입니다. JQuery 대화 상자는 비동기이며 UI를 차단하지 않습니다 (렌더링이 필요하기 때문에).

그래서 문제의 답은 다음과 같습니다. 당신은 변경해야

  buttons: { 
      "Ok": function() { 
       window.location = "/future/myhome/head?$event=logout" 
      }, 

및

<a class="homeImage" onclick="return jQuery.confirm('Do you want to logout?');return false;" href="/future/myhome/head?$event=logout">LOG OUT</a> 

Answer 2

내가 모르는 jQuery.dialog 기능은 비동기로 그.

약속 라이브러리를 사용하여 버튼 클릭 이벤트를 설정할 수 있습니다. 그러나 당신은 단순히 onclick 속성의 방법을 지정하고 약속 라이브러리 jQuery reference

를 참조 jQuery를에 대한 자세한 정보를 위해 코드

var d = jQuery.Deferred(); 
d.resolve(true); // resolve is used then to mark the function as complete 
return d.promise(); // return the promise 

jsFiddle

jQuery.extend({ 
    confirm: function(message, title, okAction) { 
     var d = jQuery.Deferred(); 
     jQuery("<div></div>").dialog({ 
      // Remove the closing 'X' from the dialog 
      open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); }, 
      buttons: { 
       "Ok": function() { 
        jQuery(this).dialog("close"); 
        d.resolve(true); 
        return true; 
       }, 
       "Cancel": function() { 
        jQuery(this).dialog("close"); 
        d.resolve(false); 
        return false; 
       } 
      }, 
      close: function(event, ui) { jQuery(this).remove(); }, 
      resizable: false, 
      title: title, 
      modal: true 
     }).text(message); 
     return d.promise(); 
    } 
}); 

을 통해 그것을 할 수 없습니다 수정 : 설정하는 다른 방법 : jsFiddle

Answer 3

개인적으로

, 내가 조건부 함수의 실행 또는 양식을 게시 자세한 내용을 확인 사용 ...

따라서, 귀하의 예제를 사용하여, I

buttons: { 
     "Ok": function() { 
       jQuery(this).dialog("close"); 
       okAction(); 
     }, 

다음과 같이 확인 :

onclick="jQuery.confirm('Do you want to logout?','Confirm:',function(){window.location='/future/myhome/head?$event=logout'}); return false;">LOG OUT</a>