Yes or no confirmation flag using jQuery

Question

I want yes / no alerts using jQuery instead of ok / Cancel:

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

Any other alternatives?

Answer 1

 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> 

Answer 2

The warning method blocks execution until the user closes it:

use the confirmation function:

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

Answer 3

I used these codes:

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> 

These codes work for me, but I'm not quite sure if this is correct. What do you think?

Answer 4

Take a look at this jQuery plugin: jquery.confirm .

 <a href="home" class="confirm">Go to home</a> 

and then:

 $(".confirm").confirm(); 

A confirmation pop-up is shown before proceeding to the link.

There is a demo here: http://myclabs.github.com/jquery.confirm/

Answer 5

The entire example that I saw cannot be reused for various yes / no questions. I was looking for something that would allow me to specify a callback so that I could trigger any situation.

The following works well for me:

 $.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"); } }); 

Then I call it like this:

 var deleteOk = function() { uploadFile.del(fileid, function() {alert("Deleted")}) }; $.confirm( "CONFIRM", //title "Delete " + filename + "?", //message "Delete", //button text deleteOk //"yes" callback ); 

Answer 6

I could not get the answer from the dialog box, but in the end I came up with a solution, combining the answer from this other question display-yes-and-no-buttons-instead-of-ok-and-cancel-in-confirm-box with part of the code from modality confirmation dialog

This is what was suggested on another issue:

Create your own flag to confirm:

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

Create your own confirm() method:

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

Call it by your code:

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

MY CHANGES I changed this above so that instead of calling confirmBox.show() I would use confirmBox.dialog({...}) , like this

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

Another change I made was to create a confirmBox div in the doConfirm function, as ThulasiRam did in its answer.

Answer 7

I needed to apply the translation to the Ok and Cancel buttons. I changed the code except for dynamic text (calls my translation function)

---

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

Answer 8

You can reuse your confirmation:

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