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.
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
});
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'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 have the following code,
var targetUrl = $(this).attr("href");
$("#leaving-dialog").dialog({
buttons: {
"No, I want to stay here": function () {
$(this).dialog("close");
},
"Yes, that's okay": function () {
window.location.href = targetUrl;
}
}
});
which basically makes one of the buttons send the user somewhere. What I want it to do, is open the link in a new window or tab and then close the modal (as they will still have the original page open).
Any idea how I could resolve this?
Use window.open(targetUrl); instead of window.location.href, and add the line to close the dialog after that.
Here's an example fiddle (using some of the example dialog code from the jQuery UI docs, and I haven't included the CSS files, so it doesn't look like a dialog!)
I'd like to make a very simple jquery box come up saying "Sorry, that blog post could not be found."
I don't want anything very advanced... How should I go about this?
You can check out these nice custom alert and confirmation boxes. You can customize them.
The jQuery plug-in Impromptu is a good simple choice for a pop-up that looks a lot nicer than a standard JS alert
http://trentrichardson.com/Impromptu/index.php
There are instructions on the site that will help you in your implementation.
Like the jQuery UI Dialog? Here's a Working Demo
$('div.no-post').dialog({
buttons: {
"Ok": function() {
$(this).dialog("close");
}
},
title: "Post Not Found",
modal: true,
draggable: false,
resizable: false
});
<div class="no-post">
Sorry, that blog post could not be found.
</div>
or I've always liked the BlockUI plugin