Develop Reference

Make jQuery click on a button when someone has confirmed (dialog box)

I have a wordpress auction site and wanted to add a confirm dialog with jquery when someone clicks on the "bid" button. I can achieve this with the default system dialog but I want a more custom dialog box with jQuery. How can I make it click the bid button once the end user has confirmed the bid?
Here is the code example:
<button type="submit" class="bid_button button alt"><?php echo wp_kses_post( apply_filters( 'bid_text', esc_html__( 'Bid', 'auctions-for-woocommerce' ), $product ) ); ?></button>
<script>
jQuery('button').confirm({
title: 'titletext',
content: 'content text"',
type: 'red',
buttons: {
ok: {
text: "OK",
btnClass: 'btn-primary',
keys: ['enter'],
action: function(){
console.log('Brukeren bekreftet "OK"');
}
},
No: function(){
text: "No",
jQuery.alert('Kansellert!');
console.log('the user clicked cancel');
}
}
});
</script>

it seems like this libary is not created for submitting forms via button, more like using it for <a> tags, source - https://github.com/craftpip/jquery-confirm/issues/229
I thought i will give you still a way to solve your problem.
now i am preventing the default behavior from the button when its not confirmed and trigger it again when its confirmed, but this time the button can submit the form.
Also added the id submitButton to your button for making it individual.
<button type="submit" id="submitButton" class="bid_button button alt"></button>
<script>
var confirmed = false;
$('#submitButton').on('click', function() {
if (!confirmed) {
event.preventDefault();
$.confirm({
title: 'titletext ',
content: 'content text"',
type: 'red',
buttons: {
ok: {
text: "OK",
btnClass: 'btn-primary',
keys: ['enter'],
action: function() {
confirmed = true;
$('#submitButton').click()
console.log('Brukeren bekreftet "OK"');
}
},
No: function() {
text: "No",
jQuery.alert('Kansellert!');
console.log('the user clicked cancel');
}
}
})
} else {
confirmed = false
}
})
</script>
hope I could help you. :)

can't delete table row with jquery-confirm.js

I'm new to jquery, and one of my first tasks was to make a dynamic table. I managed to create a button that deletes the table row on click and it worked perfectly, the problem is, when i added a confirmation box for the user, and assigned the function to remove the tr to it, it stopped working.
i've tried several things inside the button function, but it seems like either way the button only closes the alert box and the tr remains untouched.
//This works just fine, it deletes the selected tr without any issue
but it needs a confirmation from the user
$(document).on('click','.delete', function(){
$(this).parents('tr').remove();
}
//This is my code for the confirmation box including the shown function in the action for the button
$(document).on('click','.delete', function(){
$.alert({
useBootstrap:false,
columnClass: 'small',
title: 'Are you sure you want to delete the task?',
content: 'This action is irreversible',
type: 'red',
typeAnimated:true,
icon:'fas fa-exclamation-triangle',
typeAnimated: true,
buttons: {
Delete: {
text: 'Delete',
btnClass: 'btn-red',
action: function(){
$(this).parents('tr').remove();
$.alert({
title:'Task deleted',
icon:'fas fa-exclamation-triangle',
type:'red',
content:'',
useBootstrap:false
});
}
},
close: function () {
}
}
});
});
To sum it up, i understand how to delete the tr with .remove(), but i don't understand why it doesn't work inside the alert function. Thank you for your time.

When you register the click event, you are registering it to an element or elements with the class of .delete. Therefore, inside the click handler function, this refers to the element that was clicked.
When you are inside the .alert function of jquery-confirm, this refers to a different element (probably the button in the dialog, depending on how jquery-confirm is implemented), so the parent of that element is not the tr that you are looking for.
Try assigning $(this) to a variable before you make the call to $.alert, like this:
$(document).on('click','.delete', function(){
var buttonClicked = $(this); //assign to a variable here
$.alert({
useBootstrap:false,
columnClass: 'small',
title: 'Are you sure you want to delete the task?',
content: 'This action is irreversible',
type: 'red',
typeAnimated:true,
icon:'fas fa-exclamation-triangle',
typeAnimated: true,
buttons: {
Delete: {
text: 'Delete',
btnClass: 'btn-red',
action: function(){
buttonClicked.parents('tr').remove(); //reference that variable here
$.alert({
title:'Task deleted',
icon:'fas fa-exclamation-triangle',
type:'red',
content:'',
useBootstrap:false
});
}
},
close: function () {
}
}
});
});

MVC post losing values when submitted via javascript

I have an MVC form with a submit button:
<form method="POST" id="submitProject" action="#Url.Action(SubmitProject, "ProjectSummary")">
<button type="submit" name="submitButton" id="submitProject" value="saveToProposed" class="btn btn-primary">Submit Project</button>
</form>
But when a user clicks on that button i want to show them a confirmation dialog before the post goes on its way:
$('#submitProject').submit(function (e) {
var currentForm = this;
e.preventDefault();
bootbox.dialog({
message: "Approve or Reject",
title: "Project Approval",
buttons: {
success: {
label: "Approve",
className: "btn-success",
callback: function () {
alert("Approved");
currentForm.submit();
}
},
danger: {
label: "Reject",
className: "btn-danger",
callback: function () {
alert("Rejected");
currentForm.submit();
}
},
main: {
label: "Cancel",
className: "btn-primary",
callback: function () {
return true;
}
}
}
});
});
in my controller i am trying to trap the value of the submit button like this:
[HttpPost]
public ActionResult SubmitProject(ProjectModel m, string submitButton)
{
}
if i do not have that preventDefault line in there i can see the value of the submitButton in the controller. With the preventDefault the value is always null.
this is something i have been struggling with for some time as i try to learn MVC. if i didn't have any client side interaction i would be fine. But trying to get js to play with mvc is giving me hearburn. what am i doing wrong?

A form only posts back the name/value pair of its submit button that was clicked. In your case your cancelling the buttons .click() event and then calling the .submit() function (i.e. the submit is no longer triggered by the click so its value is not sent in the request).
Rather than calling e.preventDefault();, call a function that returns true or false, in the same way that you can use the javascript .confirm() function to cancel the form submission (i.e. return confirm("...");
function confirmSubmit()
{
bootbox.dialog({
....
// for the success and danger buttons - return true;
// for the main button - return false
buttons: {
success: {
label: "Approve",
className: "btn-success",
callback: function () {
return true;
}
},
....
});
}
$('#submitProject').submit(function (e) {
return confirmSubmit();
});
Side note: your form only has one submit button, so the value of string submitButton will only ever be "saveToProposed". Not sure if you omitted it from your code, but I assume you would really have at least 2 submit buttons.

Bootbox: Callback function after dismissing the dialog / Clicking on the 'X' button

The following snippet allows me to perform stuff in a callback function for the buttons that are clicked. However, how can I get a callback function, or a similar workaround such that I can perform some code when a user clicks on the 'X' button/dismisses the dialog?
bootbox.dialog({
title: "Woah this acts like an alert",
message: "Cool info for you. You MUST click Ok.",
buttons: {
sucess:{
label: "Ok",
callback: callback
}
}
});
callback(){//stuff that happens when they click Ok.}
I do not want to disable/hide the close button with
closeButton: false,

There is onEscape function for this.
bootbox.dialog({
message: 'the msg',
title: "Title",
onEscape: function() {
// you can do anything here you want when the user dismisses dialog
}
});

You can use a variable to check if the modal was hidden after a click on OK or x button / escape key
var status = false;
$('.btn').on('click', function () {
bootbox.dialog({
title: "Woah this acts like an alert",
message: "Cool info for you. You MUST click Ok.",
buttons: {
sucess: {
label: "Ok",
callback: function () {
status = true;
}
}
},
onEscape: function () {
$('.bootbox.modal').modal('hide');
}
});
});
$(document).on("hidden.bs.modal", ".bootbox.modal", function (e) {
callback();
});
function callback() {
if (!status) {
onClose();
} else {
onOK();
status = false;
}
}
function onClose() {
$('p.alert span').removeClass().addClass('text-danger').text("Dismissed");
}
function onOK() {
$('p.alert span').removeClass().addClass('text-success').text("Sucess");
}
Fiddle demo

Some people might see this as a bit of a hack-around. Although it suits me fine as all I wanted to acknowledge as a developer that someone accepted the message, which triggered the next event.
Using Bootbox.js' native confirm() method which does supply a callback action. I added an additional class as an option to the confirm button (which must be supplied on a confirm() call) with the hidden classname (E.g. Bootstap has a helper class for display:none called hidden.
This hides the confirm button, thus the Modal appears as a normal Alert box.
bootbox.confirm({
message: "Some Button Text",
buttons: {
"cancel": {
label: "<i class='fa fa-check'></i> OK - I understand",
className: "btn btn-primary"
},
//Hide the required confirm button.
"confirm": { label: "", className: "hidden" }
},
callback: function(){
//Begin Callback
alert( "Finished" );
}
});
JsFiddle Example

Error when clicking buttons in jquery dialog

I'm able to get the dialog to appear when I click "Reject Request", but the dialog won't close and I see an error in the console when I click Cancel or OK. "Uncaught TypeError: Cannot read property 'apply' of undefined"
HTML:
<button id="btn-reject" class="btn btn-danger" type="submit" style="float: right;">Reject Request</button>
<div id='reject-dialog' title='Confirmation Required'>Reject Request?</div>
JQuery:
<script type="text/javascript">
$(document).ready(function () {
$("#reject-dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
"Confirm": {
text: "OK",
id: "confirm-reject"
},
"Cancel": {
text: "Cancel",
id: "cancel-reject"
}
}
});
$("#btn-reject").click(function (e) {
e.preventDefault();
$("#reject-dialog").dialog('open');
});
$('#cancel-reject').click(function () {
$("#reject-dialog").dialog('close');
console.log('confirm');
});
$('#confirm-reject').click(function () {
$("#reject-dialog").dialog('close');
console.log('reject');
});
}); //dom
</script>
JQuery versions:

you are binding to buttons that don't exist yet on document.ready.
instead you can tell the dialog what callback to trigger while creating the buttons.
Update:
according to the Jquery-ui documentation, dialog buttons options are accepted in one of the two following formats:
1) Object: The keys are the button labels and the values are the callbacks for when the associated button is clicked.
2) Array: Each element of the array must be an object defining the attributes, properties, and event handlers to set on the button.
i updated the code to reflect that.
code
<script type="text/javascript">
$(document).ready(function () {
var dialogDiv = $("#reject-dialog");
dialogDiv.dialog({
autoOpen: false,
modal: true,
buttons: [
{
text: "OK",
id: "confirm-reject",
click: function() {
dialogDiv.dialog("close");
console.log('confirm');
}
},
{
text: "Cancel",
id: "cancel-reject",
click: function(){
dialogDiv.dialog("close");
console.log('reject');
}
}
]
});
$("#btn-reject").click(function (e) {
e.preventDefault();
dialogDiv.dialog('open');
});
}); //dom
</script>

You need to use .on()'s event delegation since the buttons don't exist when the code is executed.
For example, change:
$('#cancel-reject').click(function () {
$("#reject-dialog").dialog('close');
console.log('confirm');
});
to:
$(document).on('click','#cancel-reject', function () {
$("#reject-dialog").dialog('close');
console.log('confirm');
});
jsFiddle example
Ideally you want to bind to an element that already exists on the page that's closer than document for better performance.

You need to inform a click function, even you need to bind a click handler after the create the dialog. I think this happens because Jquery tries to execute the attribute click through apply native js function and, if you don't define it, js try to execute apply in a undefined.
So, I suggest that you define an empty function (or jQuery.noop):
"Confirm": {
text: "OK",
id: "confirm-reject",
click: function(){} // or jQuery.noop()
}