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() के माध्यम से सत्य और गलत लौटना चाहता हूं।() किया गया है (वैध)() फ़ंक्शन के लिए असफल रहा है, लेकिन यह मेरे काम के रूप में काम नहीं कर रहा है, मैं इसे आवंटित नहीं कर सकता क्योंकि मेरे पास पहले से ही झूठी वापसी है अपनी अगली पंक्ति, किसी भी विचार को निष्पादित करने के लिए संवाद? या ऐसा करना सही है?

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 संवाद से वापस बिना वापस नहीं जा सकते हैं।

यह मूल रूप से पुष्टिकरण() फ़ंक्शन की नकल करेगा। लेकिन बदसूरत कोड और एक अच्छी पुष्टि बॉक्स के साथ देखो :)

मुझे आशा है कि इससे कुछ लोगों की मदद मिल जाएगी।

---

संपादित: 3 समाधान

---

बूटस्ट्रैप मैं अब NakuPanda's बूटस्ट्रैप पुस्तकालय का उपयोग कर रहा, यह वास्तव में अच्छी तरह से काम करता है। मूल रूप से JQueryUI के साथ ही बूटस्ट्रैप 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 बनाया है और बूलियन पार्स बदल क्योंकि उस उड़ा दिया गया था। धन्यवाद, पियरे! इसने मुझे बहुत समय बचा लिया है।

जावास्क्रिप्ट:

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

क्यों उपयोग नहीं अस्वीकारेंनीचे विधि संकल्प की instaed ("झूठे")। फिर आप ऑब्जेक्ट को तर्क के रूप में पास करने में सक्षम होंगे। मान लीजिए कि आप आदानों की कई fieldsets करते हैं, हर एक एक हटाएँ बटन होने:

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 

          }); 
         });