so I want to change the text on the existing alert after I press on OK. The modal closes after I click on any button. Rather than having to throw a new alert, can we prevent the modal from closing and change the existing text? Can we do it using PreConfirm?
Thanks in advance.
It's hard to say without seeing your code, but you can always implement your own version of an alert box as a modal and replace string inside it. You can also check SweetAlerts github issues (I'm guessing you're trying to use it after googling "PreConfirm javascript"). Have you seen this topic? SweetAlert github issue
So I was able to figure out a way of doing it. I used a setTimeout to delay the modal from closing for a few seconds and directly used their ID's to modify their content. If there is any other way of doing the same do let me know. Thanks .
swal({
title: "title",
text: "text goes here.",
closeOnEsc: false,
closeModal: false,
preConfirm: () => {
return new Promise((resolve) => {
$("#swal2-title").text("New title")
$("#swal2-content").text("new text")
setTimeout(() => {
console.log("Doing async operation");
resolve()
}, 5000)
})
},
allowOutsideClick: () => !swal.isLoading()
}).then( isConfirm => {
//code for after a confirmation
});
Related
How after pressing the button to show another window with success message?
in sweetalert2
The easiest way to do that is to call another Swal inside the then. The simplest example is:
swal.fire({
title: 'Input Text',
input: 'text'
}).then(result => {
swal.fire(`You wrote: ${result.value}`)
})
In this one, the value returned by the previous modal is re-used in the new one.
You can find plenty of examples at https://sweetalert2.github.io/
Currently I am creating a SweetAlert2 that displays a Froala HTML editor, This is done in a function called CreatePolicyPopUp (which is triggered on a button click). However, when I press the space bar inside the editor it closes the sweet alert. Previously I was using CKEditor for the html editor but this problem did not happen.
This is a stripped down version of the code that creates the sweet alert and initializes the editor.
CreatePolicyPopUp: function (fromTemplate, duplicatePolicyID, allVals) {
$.get("CreatePolicy.html", function (data) {
swal({
html: data,
showCloseButton: false,
showCancelButton: false,
width: 800,
showConfirmButton: false
}).then(function () {
});
/*initialize editor*/
$('#froalatextarea').froalaEditor();
});
},
Could there be anything conflicting between froala and sweetalert2?
Or is there a way to disable close on pressing the space bar?
If needed here is the html for my CreatePolicy.html file and also the whole CreatePolicyPopUp function is included.
Thanks to this post I found with a similar problem on an old version of sweetalert. I found out that the sweet alert 2 plugin is listening out for a space key pressed using charactercodes (the space charcode is 32) so to fix it I removed the space bar character from the close sweet alert event.
The easiest way to remove this in the sweetalert2.min.js file was to find "||32===r" and delete it.
I have a php function which reloads one page in hidden iframe before real redirection is done after input button is clicked.
function button_confirm_order_params() {
$url = "somepagetoreloadinbackground.php";
$alert = "alert('you will be redirected to ext. page')";
return "onclick=\"document.all.myFrame.src='$url'; $alert;\"";
}
Everything works good, however I would like to use something more beautiful than browser's alert. So I downloaded SweetAlert and changed return to:
return "id=\"btnShowAlert\" onclick=\"document.all.myFrame.src='$url'; \"";
The problem is that without alert() the page is not being stopped before redirection. It's just shows sweetalert for a moment and then opens another page, so my "somepagetoreloadinbackground.php" is not loaded. Any ideas to handle it?
If you check the examples given on a sweetalert github, it seems there's actually alot of options that can help you: http://t4t5.github.io/sweetalert/
There's a standard timeout version: It's the timer attribute you have to add.
swal({
title: "some title",
text: "some message",
timer: 2000, // timeout in miliseconds
showConfirmButton: false // show ok button or not
});
And also, although it's a confirm instead of an alert, there's a callback function! Just add you redirect to that callback if the timeout version isn't good enough:
swal({
// add all options you want
},
function(){
// the actual callback, triggered by clicking the ok button on the confirm.
document.all.myFrame.src='$url'
});
Always read the docs for the library you're using first. :)
I've seen lots of people ask for help with JQuery confirmation messages, however I am using the JQuery Confirm plugin link: https://craftpip.github.io/jquery-confirm/
My problem is that when the modal opens, it closes right away without the user being able to click anything. Not only does it close, but it just goes to the specified href link. How can I get it to wait for the user. I'm using MVC Visual C# with Razor.
This is my javascript for the confirmation box.
$('.deleteAdmin').on('click', function () {
$.confirm({
title: 'Delete Admin',
content: 'Are you sure you want to delete this admin?',
confirmButton: 'Yes',
cancelButton: 'Cancel',
confirmButtonClass: 'btn-warning',
cancelButtonClass: 'btn-success',
animation: 'rotate',
animationBounce: 1.3,
theme: 'black',
animationSpeed: 800
});
});
The only way I have been able to keep the confirmation box to stay on the page is to have either in the <a> link onclick="return false;", or have return false; in the on click function, however, both make it so nothing happens ever.
The section of my cshtml file is
<td class="admin-table-delete-style">Delete</td>
Where item.UserName is the username of the admin to delete (that part works fine).
The creator's website uses this exact code for theirs and it works
$('.example2').on('click', function () {
$.confirm({
title: 'Confirm!',
content: 'Simple confirm!',
confirm: function () {
$.alert('Confirmed!');
},
cancel: function () {
$.alert('Canceled!');
}
});
});
Any and all help is appreciated, thanks!
The native JavaScript alert function is blocking where the jQuery one is non-blocking. This is the reason why the jQuery $.confirm function provides you callback functions for confirm and cancel.
I'm using the below code to show a dnnConfirm confirmation popup before proceeding. The issue is that it requires two clicks to show. And when I close it and click the button again it needs 3 clicks and so on and so forth.
I'm new to DNN any idea what must be wrong here. Please guide
This is my hyperlink button:
<a id="link-btn" class="dnnSecondaryAction" onclick="setInfo();"/>Save Info</a>
This is my confirmation code:
$("#link-btn").dnnConfirm({
text: "<div class='MS'>Save info?</div>",
title: "Confirm Save",
yesText: 'Yes',
noText: 'No',
isButton: true
});
//handle user decision
$("#link-btn").click(function (e, isYES) {
if (isYES) {
saveUserInfo(userID);
}
return false;
});
There are a couple of issues here that could be causing problems for you.
Unfortunately, you didn't include code for the setInfo() method but I'd look there first. E.g. Is this method returning false?
Another issue could be returning false from
$("#link-btn").click(function (e, isYES) {
which could be short circuiting some other desired behavior. In general, you're better off using:
e.preventDefault();
instead.
I would also note that $("#link-btn").click() probably doesn't do what you think it does. Rather than handle the results of the confirm dialog, this is fired when the confirm dialog is launched. (e.g. #link-btn is clicked)
To address the potential causes for your two-click-show problem (and to also be able to handle the results of your confirm dialog) I'd recommend rewriting as follows:
Hyperlink
<a id="link-btn" class="dnnSecondaryAction"/>Save Info</a>
Javascript
$("#link-btn").dnnConfirm({
text: "<div class='MS'>Save info?</div>",
title: "Confirm Save",
yesText: 'Yes',
noText: 'No',
isButton: true,
callbackTrue: function() {
saveUserInfo(userID); // assuming userID is a global
}
});
$("#link-btn").click(function (e) {
setInfo();
// in this case, you don't need to call e.preventDefault()
// as dnnConfirm will handle that for you
});