jQuery Deferred und Dialogfeld

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 
    } 

Hallo allerseits, jede Chance, den Wert zurückzugeben? Ich möchte das Wahr und Falsch durch showDialog(). Done() zurückgeben und für validateField() fehlschlagen, aber es funktioniert nicht so, wie ich es will, ich kann bAllow nicht zuweisen, da ich bereits eine Rückgabe false zum Halten hatte der Dialog, um seine nächste Zeile auszuführen, irgendeine Idee? Oder ist es richtig, so zu machen?

Answer 1

Nun, das kann funktionieren.

Ihre Dialogfunktion ... 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(); 
} 

und dann der Code, wo Sie die Funktion ...

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 
     } 
    }); 
} 

Dies kann für die meisten Menschen falsch zu sein scheinen. Aber es gibt immer einige Situationen, in denen Sie nicht ohne Rückkehr von JQuery Dialog gehen können.

Dies wird im Wesentlichen die Funktion confirm() nachahmen. Aber mit hässlichem Code und einer schönen Bestätigungsbox aussehen :)

Ich hoffe, das hilft ein paar Leute aus.

---

EDIT: Bootstrap 3 Lösung

---

ich jetzt NakuPanda's Bootstrap-Bibliothek verwenden, es funktioniert wirklich gut. Im Wesentlichen das Gleiche wie bei JQueryUI, jedoch in der Bootstrap-Benutzeroberfläche.

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(); 
      } 
     }] 
    }); 
} 

und es (so ziemlich die gleiche Art und Weise)

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

ich erstellt habe this JSFIDDLE und verändern die boolean Parst, weil das oben weht. Danke, Pierre! Das hat mir viel Zeit gespart.

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

warum nicht verwenden die Methode ablehnen Entschlossenheit instaed ("false"). Sie können dann ein Objekt als Argument übergeben. Angenommen, Sie haben mehrere Fieldset der Eingänge haben, die jeweils eine Löschtaste mit:

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 

          }); 
         });