JQuery का उपयोग करके हां या नहीं की पुष्टि करें


121

मैं ठीक / रद्द बटन के बजाय jQuery का उपयोग करके हाँ / नहीं अलर्ट चाहता हूं:

jQuery.alerts.okButton = 'Yes';
jQuery.alerts.cancelButton = 'No';                  
jConfirm('Are you sure??',  '', function(r) {
    if (r == true) {                    
        //Ok button pressed...
    }  
}

कोई अन्य विकल्प?



पर एक नज़र डालें jQuery यूआई : jqueryui.com/demos/dialog/#modal-confirmation
JANDY


3
$ .alerts.okButton = 'Yes'; $ .alerts.cancelButton = 'नहीं'; jConfirm ('आर यू श्योर ??', '', फंक्शन (र) {if (r == true) {// ओके बटन दबाया ...}}
सुशांत CS

2
पुष्टि की तरह एक और JQuery के संवाद समाधान () फ़ंक्शन जो रिटर्न करता है: stackoverflow.com/a/18474005/1876355 उम्मीद है कि यह मदद करता है
पियरे

जवाबों:


129

ConfirmDialog('Are you sure');

function ConfirmDialog(message) {
  $('<div></div>').appendTo('body')
    .html('<div><h6>' + message + '?</h6></div>')
    .dialog({
      modal: true,
      title: 'Delete message',
      zIndex: 10000,
      autoOpen: true,
      width: 'auto',
      resizable: false,
      buttons: {
        Yes: function() {
          // $(obj).removeAttr('onclick');                                
          // $(obj).parents('.Parent').remove();

          $('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');

          $(this).dialog("close");
        },
        No: function() {
          $('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');

          $(this).dialog("close");
        }
      },
      close: function(event, ui) {
        $(this).remove();
      }
    });
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


2
यह jquery-ui या सादा पुराना jquery है? मैं jQuery के डॉक्यूमेंटऑन पर कहीं भी .dialog () नहीं देखता।
चॉवी

11
आपको अपने पेज में jquery और jquery ui स्क्रिप्ट शामिल करने की आवश्यकता है।
थुलसीराम

@ थुलसीराम मैं yii2फ्रेमवर्क में प्लगइन कैसे जोड़ सकता हूँ ?
फैसल

113

उपयोगकर्ता द्वारा इसे बंद करने तक चेतावनी विधि निष्पादन को रोकती है:

पुष्टिकरण फ़ंक्शन का उपयोग करें:

if (confirm('Some message')) {
    alert('Thanks for confirming');
} else {
    alert('Why did you press cancel? You should have confirmed');
}

3
confirmहालांकि "ठीक नहीं है", "हाँ नहीं"।
KlaymenDK

57

मैंने इन कोड का उपयोग किया है:

HTML:

<a id="delete-button">Delete</a>

jQuery:

<script>
$("#delete-button").click(function(){
    if(confirm("Are you sure you want to delete this?")){
        $("#delete-button").attr("href", "query.php?ACTION=delete&ID='1'");
    }
    else{
        return false;
    }
});
</script>

ये कोड मेरे लिए काम करते हैं, लेकिन अगर यह उचित है तो मुझे यकीन नहीं है। तुम क्या सोचते हो?


3
यह मेरे लिए काम करता हैif(confirm("Are you sure you want to return this meter?")){ return true; } else{ return false; }
फैसल

अधिक छोटा return confirm("Are you sure you want to return this meter?")))
Павел


12

सभी उदाहरण जो मैंने देखे हैं, वे अलग-अलग "हां / नहीं" प्रकार के प्रश्नों के लिए पुन: प्रयोज्य नहीं हैं। मैं एक ऐसी चीज की तलाश में था जो मुझे कॉलबैक को निर्दिष्ट करने की अनुमति दे, ताकि मैं किसी भी स्थिति के लिए कॉल कर सकूं।

निम्नलिखित मेरे लिए अच्छी तरह से काम कर रहा है:

$.extend({ confirm: function (title, message, yesText, yesCallback) {
    $("<div></div>").dialog( {
        buttons: [{
            text: yesText,
            click: function() {
                yesCallback();
                $( this ).remove();
            }
        },
        {
            text: "Cancel",
            click: function() {
                $( this ).remove();
            }
        }
        ],
        close: function (event, ui) { $(this).remove(); },
        resizable: false,
        title: title,
        modal: true
    }).text(message).parent().addClass("alert");
}
});

मैं तो इसे इस तरह से बुलाता हूं:

var deleteOk = function() {
    uploadFile.del(fileid, function() {alert("Deleted")})
};

$.confirm(
    "CONFIRM", //title
    "Delete " + filename + "?", //message
    "Delete", //button text
    deleteOk //"yes" callback
);

4

मुझे डायलॉग बॉक्स से उत्तर वापस पाने में परेशानी हुई, लेकिन आखिरकार इस अन्य प्रश्न डिस्प्ले-हां-और-नो-बटन्स के बजाय-ओके-ऑफ-एंड-कैंसल-इन-कन्फर्म- से उत्तर को जोड़कर एक समाधान निकला मोडल-पुष्टिकरण संवाद से कोड के भाग के साथ बॉक्स

यह वही है जो अन्य प्रश्न के लिए सुझाया गया था:

अपनी खुद की पुष्टि बॉक्स बनाएँ:

<div id="confirmBox">
    <div class="message"></div>
    <span class="yes">Yes</span>
    <span class="no">No</span>
</div>

अपना खुद का confirm()तरीका बनाएँ :

function doConfirm(msg, yesFn, noFn)
{
    var confirmBox = $("#confirmBox");
    confirmBox.find(".message").text(msg);
    confirmBox.find(".yes,.no").unbind().click(function()
    {
        confirmBox.hide();
    });
    confirmBox.find(".yes").click(yesFn);
    confirmBox.find(".no").click(noFn);
    confirmBox.show();
}

इसे अपने कोड से कॉल करें:

doConfirm("Are you sure?", function yes()
{
    form.submit();
}, function no()
{
    // do nothing
});

मेरे परिवर्तन मैंने ऊपर बताए हैं ताकि कॉल करने के बजाय confirmBox.show() मैंने confirmBox.dialog({...}) इस तरह का उपयोग किया

confirmBox.dialog
    ({
      autoOpen: true,
      modal: true,
      buttons:
        {
          'Yes': function () {
            $(this).dialog('close');
            $(this).find(".yes").click();
          },
          'No': function () {
            $(this).dialog('close');
            $(this).find(".no").click();
          }
        }
    });

मैंने जो दूसरा बदलाव किया वह था डॉकफर्म फंक्शन के भीतर कन्फर्मबॉक्स डिव को तैयार करना, जैसे थुलसीराम ने अपने जवाब में किया।


0

मुझे ओके और रद्द बटन पर अनुवाद लागू करने की आवश्यकता थी। मैंने डायनामिक टेक्स्ट को छोड़कर कोड को संशोधित किया (मेरे अनुवाद फ़ंक्शन को कॉल करता है)


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


0

यह कोशिश करो ... यह बहुत ही सरल है हां के साथ चेतावनी के लिए पुष्टि संवाद बॉक्स का उपयोग करें।

अगर (पुष्टि करें ("क्या आप अपग्रेड करना चाहते हैं?")) {आपका कोड}


-3

आप अपनी पुष्टि का पुन: उपयोग कर सकते हैं:

    function doConfirm(body, $_nombrefuncion)
    {   var param = undefined;
        var $confirm = $("<div id='confirm' class='hide'></div>").dialog({
            autoOpen: false,
            buttons: {
                Yes: function() {
                param = true;
                $_nombrefuncion(param);
                $(this).dialog('close');
            },
                No: function() {
                param = false;
                $_nombrefuncion(param);
                $(this).dialog('close');
            }
                                    }
        });
        $confirm.html("<h3>"+body+"<h3>");
        $confirm.dialog('open');                                     
    };

// for this form just u must change or create a new function for to reuse the confirm
    function resultadoconfirmresetVTyBFD(param){
        $fecha = $("#asigfecha").val();
        if(param ==true){
              // DO THE CONFIRM
        }
    }

//Now just u must call the function doConfirm
    doConfirm('body message',resultadoconfirmresetVTyBFD);

2
कृपया, सही अंग्रेजी का उपयोग करें और "यू" जैसे संक्षिप्त रूप से बचें। इसके अलावा, यह बेहतर है यदि आप ओपी को स्पष्ट और शिक्षित करने के लिए अपने कोड को थोड़ा सा समझा सकते हैं, और आपको लगता है कि आपका जवाब पहले की गई किसी भी पोस्ट से बेहतर है।
डेविड एमएच
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.