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
});
Related
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 have the following beforeunload function which I have stolen from sonewhere else....
$().ready(function() {
$("#posManagerLoginForm").trigger("submit");
$(window).bind("beforeunload", function(){
window.setTimeout(function () {
window.location = "home.htm";
}, 0);
window.onbeforeunload = null; // necessary to prevent infinite loop that kills your browser
return "Press 'Stay On Page' to go to Reporting Manager home";
});
});
Regardless of what option I select I get navigated to home.htm. Is there a way that I can make the dialog box an ok button instead of the default "Leave Page" or "Stay on page" options?
Or perhaps someone else could make a suggestion on hot to better handle?
thanks
You cannot override the styling of the onbeforeunload dialog. Believe me, I tried this before in my earlier projects.
Reference: http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx
It is built into the browser object, and you have no control over it.
You can however set your own dialog to show when the onbeforeunload event triggers, but it will not disable that the regular one will show. Quite annoying, yes.
The reason you're still getting redirected is because you're actually doing nothing to prevent it.
If you want to open an alert box before the form gets submitted, make sure the default behaviour is prevented (which is to submit the form), then redirect after OK has been clicked like this:
$().ready(function() {
$("#posManagerLoginForm").submit(function( event ) {
event.preventDefault();
alert("Press 'OK' to go to Reporting Manager home");
window.location = "home.htm";
});
});
Though not sure what the use of this would be. If you wanted to stay on the form if a different button is pressed (say 'Cancel' for example), then you'd rather want to use a 'confirm' like this:
$().ready(function() {
$("#posManagerLoginForm").submit(function( event ) {
event.preventDefault();
if confirm(("Press 'OK' to go to Reporting Manager home"))
window.location = "home.htm";
});
});
You could replace the alert or confirm with a custom dialog box too, depending on what library you're using. Just make sure you put window.location = "home.htm" inside the dialog's function, otherwise it will execute immediately.
As an example, you may want to have a look into jQuery UI's dialog here: https://jqueryui.com/dialog/
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 have a form where people can delete records;
Delete Record 1
Delete Record 2
Delete Record 3
To ensure they are sure, I am using a "Are you sure" confirmation script (Popconfirm) which gives a nice little popup confirmation.
$(".confirm-action").popConfirm();
If the user clicks cancel, nothing happens. If they click 'yes' - the link is processed and the record deleted. This is working as intended.
Now instead of following the link (when the user clicks 'yes'), I want to fire an ajax request:
$('.confirm-action').click(function(event) {
event.preventDefault();
$.ajax({
// Ajax stuff here
});
});
$(".confirm-action").popConfirm();
The problem is when I try this, the functions are fired in the correct order when expected, except the event is null, so the script fails.
How do I "preventDefault()" when the event is null, and/or manually get the event to prevent the link from being followed by the browser?
Edit: JSFiddle showing the problem.
As noted in the comments, the plugin is horrible and plays with _data(events) IE plays with internal event management of jQuery.
If you aren't concerned about the UI, I would suggest you to go with normal confirm() as used in SO.
I've created this for you while typing this answer:
$.fn.nativeConfirm = function (options) {
return this.click(function () {
var bool = confirm(options.text);
bool ? options.yes.call(this) : options.no.call(this);
});
}
Example:
$('a').nativeConfirm({
yes: function(){
alert('yes');
},
no:function(){
alert('no');
},
text: 'Seriously?'
});
I'm using the Facebook Send Dialog to send messages to friends. As documented here: https://developers.facebook.com/docs/reference/dialogs/send/ and am using a link like the one in Facebook's example:
https://www.facebook.com/dialog/send?app_id=123050457758183&name=People%20Argue%20Just%20to%20Win&link=http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html&redirect_uri=http://www.example.com/response
On the page I have specified as the redirect_uri I am displaying text saying: "Your message has been sent". However I've realised that you see this page even if you've clicked cancel in the Facebook dialog.
Is there any way to determine whether save or cancel has been clicked?
Update: I've found a workaround using the FB.ui method which solves the immediate issue I was having. I would still be interested to know if anyone has a better solution using a Send Dialog link like the one above.
I've found a work around by using Facebook's Javascript SDK's FB.ui method.
FB.ui({
method: 'send',
name: 'People Argue Just to Win',
link: 'http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html,
display: 'popup'
});
N.B. display must be set to popup for this to work!
As it does not require a redirect_uri, the issue of knowing whether save or cancel has been clicked is not an issue. If however you do wish to know this, you can access a response object:
FB.ui({
method: 'send',
name: 'People Argue Just to Win',
link: 'http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html,
display: 'popup'
},
function(response) {
if (response){
// save has been clicked
} else {
// cancel has been clicked
}
});
Small complement to Andy's response:
the response-object does not give much info about what has been sent, actually (returns [] in console), but the mere EXISTENCE of the reponse object indicates the "SEND" button has been pressed
FB.ui(obj, function (param) {
if (param) {
// The "SEND" button has been pressed
}
else{
// The "Cancel" button has been pressed
}