I'm using Bootbox Dialog to load a php page in the following manner:
$('.create_special').on('click', function(event) {
var loadurl = $(this).attr('data-load-url');
var title = $(this).attr('data-title');
$.get(loadurl, function(data) {
bootbox.dialog({
message: data,
title: title,
buttons: {
cancel: {
label: "Cancel",
className: "btn-default",
},
submit: {
label: "Submit",
className: "btn-primary",
callback: function() {
console.log($(this).closest("form"));
$(this).closest("form").submit();
}
}
}
});
});
});
via:
<td><?php echo htmlentities($user['email']); ?></td>
As you can see, I want to be able to have two buttons at the bottom of the modal. One to cancel and close, and one to submit the form in the php file that the dialog loaded. I am having trouble figuring this out, and don't really know where to go from here. As the dialog is getting loaded afer DOM ? I am trying to avoid having to specifically submit the form as I will use this function for other php files with different form names. So it would be nice if I could do something as simple as this closest...etc.
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 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. :)
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 () {
}
}
});
});
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()
}
I am very dissapointed because I can't get rid of this issue! I have a product view and an "Add to Cart" button. If I click on the button, the form will be submitted (productAddToCartForm.submit(this)) and following function will be called:
var myAjaxify = function(button) {
button.prop('disabled', true);
if (this.validator.validate()) {
$(this.form).request({
onComplete: function(response) {
var responseData = JSON.parse(response.responseText);
if (responseData.success === 'true') {
Dialog.confirm(
responseData.message,
{
className: 'openit',
width: 385,
height: 220,
destroyOnClose: true,
id: 'ajax-add-result',
closable: true,
zIndex: 100,
title: 'Added to Your Cart',
okLabel: 'Continue Shopping',
cancelLabel: 'Proceed to Cart',
onCancel: function() {
window.location = '/checkout/cart';
},
buttonClass: 'action-btn'
}
);
...
But it takes a few seconds till the popup shows up. And if I click on the "Add to Cart" button multiple times in the meanwhile, the popup appears more than once. If I don't close the popup fast enough I also get the error "ajax-add-result is already registered in the DOM". I tried to disable the button ($(this).prop('disabled', true);), but all my solutions break the script :(
Can anyone help me?
Every help is much appreciated.
Best, Hannes.
Unset the button :)
$( "#yourbutton").unbind( "click" );
After everything is loaded you can bind the event back.