I am using JQuery noty plugin. I need Confirmation message box, how ever the Confirmation Message Box comes fine along with Buttons, but the Buttons Click Event are not working. When i click any of the Buttons. It gives me
HTTP Error 404.0 - Not Found.
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable. error. Below is my code.
noty({
text: 'Are you sure?',
type: 'confirm',
buttons: [
{
addClass: 'btn btn-primary', text: 'Ok', onClick: function ($noty) {
$noty.close();
noty({ text: 'You clicked "Ok" button', type: 'success' });
}
},
{
addClass: 'btn btn-danger', text: 'Cancel', onClick: function ($noty) {
$noty.close();
noty({ text: 'You clicked "Cancel" button', type: 'error' });
}
}
]
})
whats wrong with this.
Check if the scripts are really loaded via firebug/devtools and if your paths are correct. Tested your code and it worked for me.
Related
I'm trying to create an Swal alert that must contain an input field with a continue and cancel button in ReactJs. This is my code right now:
swal({
icon: "warning",
text: 'Are you sure you want to continue? This operation is not reversible',
content: {
element: "input",
attributes: {
placeholder: title + " reason",
},
},
}).then(comment => {
if (comment === null || comment === ''){
swal({icon: 'error', text: 'You need to type the cancellation reason'});
return false
}
})
This code only creates an 'OK' button and I get the input from the user in the comment variable, but I need to add a 'Continue' button and a 'Cancel' button to leave the alert. I've tried adding the button parameter in the swal options and this creates the buttons but I'm not able to get the input from the user.
I also have tried to add raw html in the content and get the input with a handle method but so far I haven't been able to do this.
Maybe the solution for this is easy but I am not able to get it. Thank a lot for the help
I found out a way to solve this in case anyone have to do something similar. I just created the input by doing document.createElement('input') and then I got the value depending on the user clicked on Continue or Cancel:
const cancellation_reason = document.createElement('input');
swal({
icon: "warning",
text: 'Are you sure you want to continue? This operation is not reversible',
content: {
element: cancellation_input,
attributes: {
placeholder: title + " reason",
},
},
buttons: {
continue: 'continue',
cancel: 'cancel'
}
}).then(option => {
switch (option){
case 'continue':
if (cancellation_input.value === null || cancellation_input.value === ''){
swal({icon: 'error', text: 'You need to type the cancellation reason'});
return false
}
prop(runID, null, path, cancellation_input.value).then(showMesagge);
break;
case 'cancel':
break;
}
})
Anyone can help me?
I tried to used sweetalert2 on my app, but if used "question", "warning", and "info" it isn't correct.
Source from : https://sweetalert2.github.io/
enter image description here
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#10"></script>
<script>
function deleteConfirmation(id) {
var urlsite = "https://"+window.location.hostname+'/gudang/public/blok/d/'+id;
Swal.fire({
title: 'Peringatan',
text: "Anda yakin ingin menghapus data?",
icon: "question",
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Ya, Hapus!'
}).then((result) => {
if (result.isConfirmed) {
// redirect to delete data
location.replace(urlsite);
// notification
Swal.fire(
'Sukses!',
'Data Anda berhasil dihapus, mohon tunggu hingga proses selesai!',
'success'
)
} else {
// cancel to deleting data
Swal.fire(
'Batal Hapus!',
'Data Anda batal dihapus!',
'error'
)
}
})
}
</script>
try with options
Swal.fire({
title: 'Batal Hapus',
text: 'Data Anda batal dihapus!',
icon: 'error',
})
as per doc https://sweetalert2.github.io/
You can use a custom class to hide one of the icons. Some icons have content in a ::before pseudo-class which doubles up.
Create a custom class
.no-before-icon::before {
display: none !important;
}
Apply it to all icons - doesn't effect success or error icons
Swal.fire({
title: "No more double icons",
icon: "info",
customClass: {
icon: "no-before-icon",
},
});
Depending on your version of Sweetalert the property that sets the icon can be called either 'icon' or 'type', try both. Can't do much more without seeing your code.
I tried to display a toast after a user pressed a button in an alert but it throws an ExpressionChangedAfterItHasBeenCheckedException in dev mode. I believe it's an ionic bug. Has anyone experienced the same issue ? Can you confirm I'm not doing any mistakes ?
Here's the code :
let prompt = this.alertController.create({
title: 'Alert displaying a toast',
buttons: [{
text: 'Cancel',
role: 'cancel'
}, {
text: 'Display toast',
handler: () => {
displayToast();
}
}]
});
prompt.present();
and displayToast() :
displayToast() {
let toast = this.toastController.create({
message: 'toast displayed from inside an alert',
duration: 2000
});
toast.present();
}
To reproduce the Exception, you have to display the alert multiple times and press 'cancel' or 'display' buttons many times.
Cheers
I am using bootbox dialogs for confirming before deleting records.
here is my jQuery script for confirmation before deleting record.
<a class="btn btn-xs btn-danger" id="deleteContent" title="Delete">delete</a>
$('#deletec').click(function (e) {
bootbox.dialog({
message: "you data is save",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function () {
Example.show("great you save it");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function () {
Example.show("record deleted!");
}
}
}
});
});
it is showing correct dialog but the record being deleted without taking confirmation, can anyone please tell me how can i prevent deletion of record without confirmation ? Thanks in advance.
You can not do what you want because the modal dialog that you are using has no way of pausing the click action. You would need to have to cancel the click action and than make that call.
One way is just to unbind click and call it again
$('#deleteContent').on("click", function (e) {
e.preventDefault();
bootbox.dialog({
message: "you data is save",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function () {
Example.show("great you save it");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function () {
Example.show("record deleted!");
$('#deleteContent').off("click")[0].click();
}
}
}
});
});
As I said in my comments above, making a delete request with a get is a BAD idea. If a user has a plugin that prefetches pages, say goodbye to all your data in the database.
What happens in the code
e.preventDefault(); Cancels the click event so it will not go to the server
$('#deleteContent').off("click") //removes the click event so it will not be called again
[0].click() //selects the DOM element and calls the click event to trigger the navigation
I am creating dinamically a message box (Ext.window.MessageBox)
var msgBox = Ext.create('Ext.window.MessageBox', {
title: '',
//message in window
msg: 'message text',
icon: 'WARNING',
//buttons
buttons: 'OKCANCEL',
//onclick funciton
fn: myfunc
});
I am adding OK and Cancel buttons. Is it possible to add click listener on the OK button so that I can do my stuff only when this OK button is pressed?
Also is it possible to add specific ids to the OK and Cancel buttons so that I can distinguish them more easily, instad of using the pregenrated ids from ExtJS?
You may use the following construction instead:
Ext.MessageBox.show({
title: "",
msg: "message text",
icon: Ext.MessageBox.WARNING,
buttons: Ext.MessageBox.OKCANCEL,
fn: function(buttonId) {
if (buttonId === "ok") {
// do on OK pressed
}
}
});
Here the first argument in the fn handler is a string value of pressed button.
DEMO: http://jsfiddle.net/xj9qY/