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. :)
Related
I am generating rows dynamically for a table using ASP.NET Core Razor Pages and each row has a Delete button without button ID.
example of generated HTML for a row:
<button onclick="return DeleteRowConfirm(event);" data-ajax="true" data-ajax-method="GET" data-ajax-begin="AjaxOnBegin" data-ajax-complete="AjaxOnComplete" data-ajax-failure="failed" data-ajax-update="#div_BusyIndicator" href="/ApproveNumber/a10b0c7a?handler=DeleteRow">Delete Row</button>
on button click I am using bootbox.js to confirm using this code:
function DeleteRowConfirm(e) {
e.preventDefault();
bootbox.confirm({
message: "Delete Row?",
buttons: {
confirm: {
label: 'Yes',
className: 'btn-success'
},
cancel: {
label: 'No',
className: 'btn-danger'
}
},
callback: function (result) {
if (result === false) {
}
else {
//$(this).trigger(e.type); //Doe not working
}
}
});
}
I would like to execute the "Button Click" if the user press "Yes".
I have tried $(this).trigger(e.type); but it does not working.
I solved the problem with the help of #mousetail and "Pooma" from this link https://stackoverflow.com/a/48018708
I have replaced button element to element and for onclick I have set event.preventDefault(); event.stopImmediatePropagation(); DeleteRowConfirm(event);
at DeleteRowConfirm function when callback is true I have removed the onclick from the element so it does not loop with bootbox popup and than trigger the click event.
$(e.target).removeAttr('onclick');
$(e.target).trigger(e.type);
I've a form with submit validation.
I'dd like to add more than 1 alerts on form submit with:
var proceed = true;
$.confirm({
title: 'Confirm 1',content: 'No products added. Are you sure to proceed?',
buttons: {
ok: {
text: "OK",
btnClass: 'btn-success',
action: function () {
}
},
cancel: {
text: "Cancel",
action: function () {
proceed = false;
return false;
}
}
}
});
... some others checks ....
if ( !proceed ) { return false;} //EXIT SCRIPT
// IF ALL CHECKS PASSED
$.confirm({
title: 'Final confirm',content: 'All checks are ok. Are you sure to insert?',
buttons: {
ok: {
text: "OK",
btnClass: 'btn-success',
action: function () {
form.submit(); //SUBMIT THE FORM
}
},
cancel: {
text: "Cancel",
action: function () {
// CLOSE DIALOG
}
}
}
});
but on form submit I get all of 2 $.confirm opens! I'd like to pause second one until I click OK on the first one.
My jsfiddle https://jsfiddle.net/st1cqb39/2/
Make the finalConfirm function as a generic one, and call it in the action callback (of your empty check) accordingly.
Here is a DEMO: https://jsfiddle.net/st1cqb39/3/
Hope this helps!
I'm using Bootstrap 4 Beta and JavaScript for my university project, I'm making some calendar event function. and I'm used Bootbox.js for popup, my issue is When I click the calendar event alert is display but this alert cant customize ,I want to know how to added <div> <button> text and etc for this alert, look my attached image, you can understand it
This is my script,
event
dp.events.list = [{
start: "2017-12-20",
end: "2017-12-28",
id: "1",
resource: "A",
text: "Mahesh",
backColor: "#70CB85",
},
click
dp.onEventClicked = function(args) {
bootbox.alert(" " + args.e.text()); //Alert
};
As from their documentation:
An alert callback should not supply an argument; it will be ignored
If you want to pass a button you can use confirm:
bootbox.confirm({
message: "This is a confirm with custom button text and color! Do you like it?",
buttons: {
confirm: {
label: 'Yes',
className: 'btn-success'
},
cancel: {
label: 'No',
className: 'btn-danger'
}
},
callback: function (result) {
// ...
}
});
Or use Dialog:
bootbox.dialog({ message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>' })
you can put html in alert easily .
bootbox.alert("Your message <b>here…</b>")
see this link for more option of alert
The documentation says:
Show a simple prompt popup, which has an input, OK button, and Cancel
button. Resolves the promise with the value of the input if the user
presses OK, and with undefined if the user presses Cancel.
I was doing:
$ionicPopup.prompt({
//options
}).then(function (userinput) {
//get userinput and send to server
});
I need to add a third button, but can't get the text of the input, how can I resolve the promise on the onTap event of the button to get the input?
$ionicPopup.prompt({
title: '¿Are you sure?',
inputType: 'text',
buttons: [
{ text: 'Cancel'
//close popup and do nothing
},
{
text: 'NO',
type: 'button-assertive',
onTap: function(e) {
//send to server response NO
}
},
{
text: 'YES',
type: 'button-energized',
onTap: function(e) {
//get user input and send to server
}
}]
See this demo i made with your code: http://play.ionic.io/app/ac79490c8914
prompt() is not meant to add more than two buttons,show() is used to make complex pop ups, Please see show() method in same documentation. As written in documentation, i am quoting:
Show a complex popup. This is the master show function
for all popups.
A complex popup has a buttons array, with each button having a text
and type field, in addition to an onTap function.
Your code will be like:
$scope.showPop = function(){
$scope.data = {};
var myPopup = $ionicPopup.show({
template: '<input type="text" ng-model="data.myData">',
title: '¿Are you sure?',
scope: $scope,
buttons: [
{ text: 'Cancel'
//close popup and do nothing
},
{
text: 'NO',
type: 'button-assertive',
onTap: function(e) {
return null;
}
},
{
text: 'YES',
type: 'button-energized',
onTap: function(e) {
return $scope.data.myData;
}
}]
});
myPopup.then(function(userinput) {
if(userinput){
console.log('returned data'+ userinput)
}
});
}
Simple thing about above code is that you have bind input with $scope (<input type="text" ng-model="data.myData">) so you can access it in any manner.
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