I want to open another alert along with the previous alert and prevent closing the previous alert, But the previous alert closes and new open.
I used iziToast and I can do this but I want to use SweetAlert.
SweetAlert Example:
const swalToast = Swal.mixin({
toast: true,
iconColor: "white",
customClass: { popup: "colored-toast" },
showConfirmButton: false,
timerProgressBar: true,
});
swalToast.fire({
title: "One",
position: "bottom",
timer: 5000,
icon: "info",
});
setTimeout(() => {
swalToast.fire({
title: "Two",
position: "bottom",
timer: 1500,
icon: "info",
});
}, 2000);
iziToast Example:
iziToast.info({
position: "bottomCenter",
title: "One",
message: "",
timeout: 5000,
});
setTimeout(() => {
iziToast.info({
position: "bottomCenter",
title: "Two",
message: "",
timeout: 1500,
});
}, 2000);
It is not possible to show more than one modal at a time, by design.
SweetAlert open another alert with prevent closing previous alert
Show two swal at same time
2 or more modals at the same time
Related
I have a javascript code below:
var alertText = "Hey.";
$("div").remove("#confirmationDialogBox");
$(document.body).append("<div id='confirmationDialogBox'></div>");
$("#confirmationDialogBox").html('');
$("#confirmationDialogBox").dialog({
resizable: false,
height: 140,
title: 'Alert !!',
modal: true,
draggable: false,
zIndex: 99999,
buttons: [{
"class": 'btnModalDisplay',
text: "Ok",
click: function () {
//Calls another function that shows an alert
}}]
}).text(alertText);
My problem here is, when the dialog box appears and onclick of 'ok' of the dialog box i have to call another function that shows an alert.But for some reason when i click 'ok', the dialog box doesn't close and the alert shows up. Could someone help how can I close the dialog box and then the alert shows up?
You need to use .dialog("close"), like below:
var alertText = "Hey.";
$("div").remove("#confirmationDialogBox");
$(document.body).append("<div id='confirmationDialogBox'></div>");
$("#confirmationDialogBox").html('');
$("#confirmationDialogBox").dialog({
resizable: false,
height: 140,
title: 'Alert !!',
modal: true,
draggable: false,
zIndex: 99999,
buttons: [{
"class": 'btnModalDisplay',
text: "Ok",
click: function () {
// Calls another function that shows an alert
$( this ).dialog( "close" ); // add this line to close dialog
}
}]
}).text(alertText);
You can try to update the click event like this:
$("#confirmationDialogBox").dialog({
...
buttons: [{
"class": 'btnModalDisplay',
text: "Ok",
click: function(e) {
//Calls another function that shows an alert
e.preventDefault();
$('#confirmationDialogBox').dialog('close');
}
}]
});
DEMO:
var alertText = "Hey.";
$("div").remove("#confirmationDialogBox");
$(document.body).append("<div id='confirmationDialogBox'></div>");
$("#confirmationDialogBox").html('');
$("#confirmationDialogBox").dialog({
resizable: false,
height: 140,
title: 'Alert !!',
modal: true,
draggable: false,
zIndex: 99999,
buttons: [{
"class": 'btnModalDisplay',
text: "Ok",
click: function(e) {
//Calls another function that shows an alert
e.preventDefault();
$('#confirmationDialogBox').dialog('close');
}
}]
}).text(alertText);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet">
I have this:
setTimeout(function () {
$.dialog({
title: 'Existing user',
content: "This account is already registered on our system. If you are the real owner, contact us!",
icon: 'fas fa-user',
theme: 'modern',
animation: 'scale',
type: 'red',
draggable: false,
closeIcon: function(){
window.location="/dashboard";
},
});
}, 200);
I need to redirect the user after 5 seconds once he/she clicks "closeIcon". The problem is, if I use this the dialog is never shown:
closeIcon: setTimeout(function () {
window.location="/dashboard";
}, 5000);
});
How could I do?
Thanks!
EDIT:
I also tried this, but it doesn't work:
function () {
$.dialog({
title: 'Existing user',
content: "This account is already registered on our system. If you are the real owner, contact us!",
icon: 'fas fa-user',
theme: 'modern',
animation: 'scale',
type: 'red',
draggable: false,
closeIcon: setTimeout(function () {
window.location="/dashboard";
}, 5000);
});
}
closeIcon: function () {
setTimeout(function () {
window.location="/dashboard";
}, 5000);
}
Do this instead.
The problem is that setTimeout returns a positive integer, but the closeIcon expects a function. Using an arrow function (ES6) to enclose the timer should fix the problem. You can also use a regular function.
setTimeout(function () {
$.dialog({
title: 'Existing user',
content: "This account is already registered on our system. If you are the real owner, contact us!",
icon: 'fas fa-user',
theme: 'modern',
animation: 'scale',
type: 'red',
draggable: false,
closeIcon: ()=> {
setTimeout(()=>window.location = "/dashboard",2000);
},
});
}, 200);
Is there a way of achieving this on a multilingual site, so that the "/dashboard" redirects to each specific language on the site?
So i have this code that calls a popup dialog that contains a partial view. The problem is that whenever i call the dialog div.load appends the entire string block to the address of the home controller.
function OpenSendMessagePopUp() {
var div = $("#DivAppendToPartialView");
div.load("#Url.Content(~/Resend/_SendMessage.cshtml)", function () {
div.dialog({
modal: true,
width: 500,
height: 420,
show: 'blind',
hide: 'blind',
title: "Send Message",
draggable: false,
resizable: false,
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
}
});
});
}
function SaveMessage() {
$.ajax({
type: 'POST',
url: '#Url.Content("~/Resend/_SendMessage.cshtml")',
data: {
smsContentId: smsContentId,
comments: comments
},
});
The MobileNumberUpload is the home controller for the project while Resend is the controller for the Partial View. Note that I cannot combine the two controllers as per the constraints of the project.
Error Message for when i click the button
This is the dialog that pops up when i click the button
Try below changes :
function OpenSendMessagePopUp() {
var div = $("#DivAppendToPartialView");
div.load('#Url.Content("~/Resend/_SendMessage.cshtml")', function () {
div.dialog({
modal: true,
width: 500,
height: 420,
show: 'blind',
hide: 'blind',
title: "Send Message",
draggable: false,
resizable: false,
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
}
});
});
}
function SaveMessage() {
$.ajax({
type: 'POST',
url: '#Url.Content("~/Resend/_SendMessage.cshtml")',
data: {
"smsContentId": smsContentId,
"comments": comments
},
});
}
Also make sure smsContentId and comments should be declared in JS.
Am using Bootstrap-Purr for alert messaging. By using this, alert message appears and automatically disappears within few seconds. This should not happen. Alert message should be dismissed on only clicking close button, until then it should be viewed.
Tried a Fiddle
$.bootstrapPurr('<strong>My error Mesasge </strong> ,Try Again !', {
type: 'danger',
delayPause: true,
align: 'center',
allow_dismiss: false,
allowDismissType: 'click',
draggable: false,
width:'350px',
position:'absolute',
top:'50px',
});
Any Idea will be appreciated. Thank you in advance.
Set the 'delay' attribute to 0, thats all it will work
$.bootstrapPurr('This is another "purr" that will display until manually closed', {
type: 'danger',
align: 'left',
align: 'center',
delay: 0,
stackupSpacing: 30
});
Try the fiddle
I'm using qtip ( http://craigsworks.com/projects/qtip/ ) to make tooltips. Now I need to show tooltips when the button is pressed and hide tooltips for example when 3 seconds have passed. My current code is not working, tooltips will sometimes go away and sometimes stay...
var self = $("#email");
self.qtip({
content: error,
tip: true,
position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle' } },
style: 'error',
show: { when: false, ready: true },
hide: { when: { event: 'mousemove' }, delay: 2000, effect: function () { self.qtip("destroy"); } }
});
#newbie, but a response, is to tidy the code and that maybe that's the problem. eg replacing the name of the variable "self" by "this".
$("#email").qtip( {
content: error,
tip: true,
position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle' } },
style: 'error',
show: { when: false, ready: true },
hide: { when: { event: 'mousemove' },
delay: 2000,
effect: function() { $(this).qtip("destroy"); }
}
});