jquery ui對話框確認

Question

我在嘗試使用jquery對話框複製javascript的'確認'框。這是我的代碼，

function customConfirm(customMessage) { 
     $("#popUp").html(customMessage); 
     $("#popUp").dialog({ 
      resizable: false, 
      height: 240, 
      modal: true, 
      buttons: { 
       "OK": function() { 
        $(this).dialog("close"); 
        alert(true); 
        return true; 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
        alert(false); 
        return false; 
       } 
      } 
     }); 
    } 

但是，當我試圖提醒這種方法，它顯示'未定義'。它不在等待彈出窗口顯示。我如何使這個customConfirm函數等待用戶輸入（確定/取消）？ 我的需求是，customConfirm（）方法將根據用戶輸入返回true或false。

Answer 1

你需要做的是使用jQuery.deferred /承諾。

http://api.jquery.com/deferred.promise/

在這個例子中，asyncEvent

1）創建一個jquery推遲對象

2）具有用於解決/拒絕，您的確定邏輯/取消

3）返回一個deferred.promise（）對象，然後可以與$ .when一起使用來確定延遲對象是否已解析或拒絕（ok/cancel）。

你會做什麼是

1）創建一個jQuery Deferred對象

2）啓動您的對話，以確定/取消設定deferred.resolve /拒絕

3）返回一個deferred .promise（）對象，

4）使用延遲承諾的對象與$。當 http://api.jquery.com/jQuery.when/

function customConfirm(customMessage) { 
    var dfd = new jQuery.Deferred(); 
    $("#popUp").html(customMessage); 
    $("#popUp").dialog({ 
     resizable: false, 
     height: 240, 
     modal: true, 
     buttons: { 
      "OK": function() { 
       $(this).dialog("close"); 
       alert(true); 
       dfd.resolve(); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
       alert(false); 
       dfd.reject(); 
      } 
     } 
    }); 
    return dfd.promise(); 
} 

$.when(customConfirm('hey')).then(
    function() { 
    alert("things are going well"); 
}, 
function() { 
    alert("you fail this time"); 
}); 

你也可以只使用決心，並確定是否確認是在$。當真或假，

function customConfirm(customMessage) { 
    var dfd = new jQuery.Deferred(); 
    $("#popUp").html(customMessage); 
    $("#popUp").dialog({ 
     resizable: false, 
     height: 240, 
     modal: true, 
     buttons: { 
      "OK": function() { 
       $(this).dialog("close"); 
       alert(true); 
       dfd.resolve(true); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
       alert(false); 
       dfd.resolve(false); 
      } 
     } 
    }); 
    return dfd.promise(); 
} 

$.when(customConfirm('hey')).then(
    function(confirm) { 

    if(confirm){alert("things are going well");} 
    else{alert("you fail this time");} 
}); 

希望有所幫助。

Answer 2

您應該在文檔就緒功能中加載對話框。呼籲customConfirm功能對話框打開，

function customConfirm(customMessage) { 
    $("#popUp").html(customMessage); 
    $("#popUp").dialog("open"); 
    } 

    $(document).ready(function(){ 
    $("#popUp").dialog({ 
     resizable: false, 
     autoOpen: false, 
     height: 240, 
     modal: true, 
     buttons: { 
      "OK": function() { 
       $(this).dialog("close"); 
       alert(true); 
       return true; 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
       alert(false); 
       return false; 
      } 
     } 
    }); 

    }); 

Answer 3

這就是我使用zepto模塊推遲和回調，像魅力一樣工作。 應該是jQuery的相似或者你可以導入延遲和回調模塊到HTML

function customConfirm(customMessage) { 
    var d = new $.Deferred(); 
    $("#popUp").html(customMessage); 
    $("#popUp").dialog({ 
     resizable: false, 
     height: 300, 
     modal: true, 
     buttons: { 
      "Yes": function() { 
       $(this).dialog("close"); 
       d.resolve() 
      }, 
      "No": function() { 
       $(this).dialog("close"); 
       d.reject(); 
      } 
     } 
    }); 
return d.promise(); 
} 

customConfirm("Do you Want to delete the File?") 
.then(function(){ 
    console.log("You Clicked Yes") 
}) 
.fail(function(){ 
    console.log("You Clicked No") 
});