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/
Related
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
});
If I use the arrow keys it works fine. But if I click on the next or back button opening a new page
I am using setOptions like below:
setOptions({
steps:[{
element: '#cmsinput',
intro: 'ENTER URL HERE',
position:'bottom'
}],
'showStepNumbers': 'false'
});
You're having this problem because introJs considers the tour complete for this page. The Done button runs the code in your oncomplete function. You can change the text of the Done button using the doneLabel option.
doneLabel: 'Next Page'
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
});
I received this message on how to react when a toast is clicked, so I decide to post it here for everyone.
When the user clicks on a toast I don't always want the message to disappear, but depending on the kind of message I want to:
Disappear.
Redirect the user to a different page (x es /meetings/210)
show a jquery dialog (ex: showing the sms received).
Using the basic click event I'm unable to detect the toast I've clicked.
The only workaround I found was to add a link in the toast and do a redirect when the user click on it.
So what I'm asking is a way to get the current toast the user clicks, by using the basic click event (but this may require some more work hiding data in the toast to recover it when clicked to understand what to do), or by adding to the function that creates a toast an optional callback to a function when clicked, something like this:
toastr.error(
'body text',
'header text',
click: function() {
console.log('you clicked on the error toaster')
}
);
Thank you for this very nice library.
This is already built it. You can do this 2 ways: you can grab the jQuery object that contains the indiviudal toastr element or you can set the onclick event for the individual toast. Your code is passing in a function for the 3rd parm. The 3rd parm should be the options override. So it should look like this:
toastr.error('body text', 'header text',
{onclick: function() {console.log('you clicked on the error toaster')}}
);
toastr.info('body text 1', 'header text',
{onclick: function() {console.log('you clicked on the info toaster n.1')}}
);
How can I display a yes/no message box to the user on the client-side in Javascript?
I don’t want to display “OK” and “Cancel” to the user, which is the default behavior of the confirm function in Javascript. Any help will be appreciated.
You can't amend the Ok/Cancel of the default confirm box, but you can use a 3rd party library (such as jQuery/jQuery UI) which will give you what you need: http://jqueryui.com/demos/dialog/#modal-confirmation
have a look at this jquery plugin http://www.84bytes.com/2008/06/02/jquery-modal-dialog-boxes/
jQuery UI has modal confirmation boxes
http://jqueryui.com/demos/dialog/#modal-confirmation
I just posted in my blog an easy to use Yes/No message box that you can easily modify to fit your project.
Example:
SmallJS.message.modal('Do you want to click yes?', {
buttons: {
ok: 'Yes',
cancel:'No'
},
onOK: function () {
SmallJS.message.show('Yes sir!', { animate:false});
}
})
You can see the source code at: http://www.waltersoto.com/javascript/javascript-yes-no-message-box