jQuery延期和對話框

Question

function ValidateField(){ 
var bAllow= true; 

    //some checking here 

if (bAllow == true && apl.val().trim() == "") 
{ 
    showDialog(); 
    showDialog().done(function() { 
     return true; // wanna return true, but not success 
    }).fail(function() { 
     return false; //wanna return false, but not success 
    }); 
    return false; //stop it to execute to next line 
} 
return bAllow; //success return } 

function showDialog(){ 
var def = $.Deferred(); 
var modPop = '<div id="diaCom" title="Information?"><p>something something</p></div>'; 
$("#diaCom").remove(); 
$(modPop).appendTo('body'); 
$("#diaCom").dialog({ 
    resizable: false, 
    draggable: false, 
    height:150, 
    width:300, 
    modal: true, 
    buttons: { 
     "Ok": function() { 
      def.resolve(); 
      $(this).dialog("close"); 

     }, 
     "Cancel": function() { 
      def.reject(); 
      $(this).dialog("close"); 

     } 
    } 
}); 

return def.promise(); 
} 
//on click 
if (validateField() == true){ 
     //do something 
}else{ 
     //do something 
    } 

嗨大家好，有沒有機會返回值？我希望通過showDialog（）。done（）函數返回true和false，但不能用於validatefield（）函數，但它不能用作我想要的，我不能指定給bAllow，因爲我已經有一個返回false來保存執行下一行的對話框，任何想法？或者像這樣做是正確的？

Answer 1

嗯，這可以工作。

你的對話功能...的ShowDialog（）

function confirmation(question) { 
    var defer = $.Deferred(); 
    $('<div></div>') 
     .html(question) 
     .dialog({ 
      autoOpen: true, 
      modal: true, 
      title: 'Confirmation', 
      buttons: { 
       "Yes": function() { 
        defer.resolve("true");//this text 'true' can be anything. But for this usage, it should be true or false. 
        $(this).dialog("close"); 
       }, 
       "No": function() { 
        defer.resolve("false");//this text 'false' can be anything. But for this usage, it should be true or false. 
        $(this).dialog("close"); 
       } 
      }, 
      close: function() { 
       $(this).remove(); 
      } 
     }); 
    return defer.promise(); 
} 

，然後將代碼中使用函數...

function onclick(){ 
    var question = "Do you want to start a war?"; 
    confirmation(question).then(function (answer) { 
     var ansbool = Boolean.parse(answer.toString()); 
     if(ansbool){ 
      alert("this is obviously " + ansbool);//TRUE 
     } else { 
      alert("and then there is " + ansbool);//FALSE 
     } 
    }); 
} 

這似乎是錯誤的大多數人。但是總有些情況下，如果沒有從JQuery Dialog返回，就無法離開。

這將基本上模仿confirm（）函數。但與醜陋的代碼和一個不錯的確認框外觀:)

我希望這可以幫助一些人。

---

編輯：自舉3溶液

---

我現在用 NakuPanda's引導庫，它的作品真的很好。基本上與JQueryUI相同，但在Bootstrap UI中。

function bsConfirm(question) { 
    var defer = $.Deferred(); 
    BootstrapDialog.show({ 
     type: BootstrapDialog.TYPE_PRIMARY, 
     title: 'Confirmation', 
     message: question, 
     closeByBackdrop: false, 
     closeByKeyboard: false, 
     draggable: true, 
     buttons: [{ 
      label: 'Yes', 
      action: function (dialog) { 
       defer.resolve(true); 
       dialog.close(); 
      } 
     }, { 
      label: 'No', 
      action: function (dialog) { 
       defer.resolve(false); 
       dialog.close(); 
      } 
     }], 
     close: function (dialog) { 
      dialog.remove(); 
     } 
    }); 
    return defer.promise(); 
} 
function bsAlert(error, message) { 
    BootstrapDialog.show({ 
     type: error ? BootstrapDialog.TYPE_DANGER : BootstrapDialog.TYPE_SUCCESS, 
     title: error ? "Error" : "Success", 
     message: message, 
     closeByBackdrop: false, 
     closeByKeyboard: false, 
     draggable: true, 
     buttons: [{ 
      label: 'OK', 
      action: function (d) { 
       d.close(); 
      } 
     }] 
    }); 
} 

，並用它（幾乎相同的方式）

bsConfirm("Are you sure Bootstrap is what you wanted?").then(function (a) { 
    if (a) { 
     bsAlert("Well done! You have made the right choice"); 
    } else { 
     bsAlert("I don't like you!"); 
    } 
}); 

Answer 2

我已經創建this JSFIDDLE和改變布爾解析因爲被炸燬。謝謝，皮埃爾！這節省了我很多時間。

的javascript：

function confirmation(question) { 
var defer = $.Deferred(); 
$('<div></div>') 
    .html(question) 
    .dialog({ 
     autoOpen: true, 
     modal: true, 
     title: 'Confirmation', 
     buttons: { 
      "Yes": function() { 
       defer.resolve("true");//this text 'true' can be anything. But for this usage, it should be true or false. 
       $(this).dialog("close"); 
      }, 
      "No": function() { 
       defer.resolve("false");//this text 'false' can be anything. But for this usage, it should be true or false. 
       $(this).dialog("close"); 
      } 
     }, 
     close: function() { 
      //$(this).remove(); 
      $(this).dialog('destroy').remove() 
     } 
    }); 
return defer.promise(); 
}; 

function onclick(){ 
var question = "Do you want to start a war?"; 
confirmation(question).then(function (answer) { 
    console.log(answer); 
    var ansbool = (String(answer) == "true"); 
    if(ansbool){ 
     alert("this is obviously " + ansbool);//TRUE 
    } else { 
     alert("and then there is " + ansbool);//FALSE 
    } 
}); 
} 

$("#item").on('click', onclick); 

HTML：

<button id="item">Hello, click me.</button> 

Answer 3

爲什麼不使用reject方法instaed決心（ 「假」）。然後您將能夠傳遞一個對象作爲參數。 比方說，你有輸入多個字段集，每一個有一個刪除按鈕：

function confirmation(question,obj) { 
    var defer = $.Deferred(); 
    $('<div></div>') 
     .html(question) 
     .dialog({ 
      autoOpen: true, 
      modal: true, 
      title: 'Confirmation', 
      buttons: { 
       "Oui": function() { 
        defer.resolve(obj);// pass the object to delete to the defer object 
        $(this).dialog("close"); 
       }, 
       "Non": function() { 
        defer.reject();//reject, no need to pass the object 
        $(this).dialog("close"); 
       } 
      }, 
      close: function() { 

       $(this).dialog('destroy').remove() 
      } 
     }); 
    return defer.promise(); 
} 

$(document).on("click", ".btn-suppr",function(){// all delete buttons having a class btn-suppr 

var question = "Are you sure to delete this fieldset ?"; 
confirmation(question,$(this)).then(function (obj) { 

           obj.parent('fieldset').remove(); // remove the parent fieldset of the delete button if confirmed 

          }); 
         });