I'm trying to use SimpleModal as a confirmation for an email disclaimer i.e. clicking on the email address pops up the modal, users who agree to the disclaimer can send email using the mailto: method, users who decline do not get the popup.
I have a couple dozen email addresses on a single page so I need to pass the address to the script
The disclaimer is used on other pages as well, so I would like to include the html copy as well, it's about 4 paragraphs.
This is what I have so far, it almost works except no mail client popup on confirmation:
user#domain.com
<div id='confirm'>
<div class='header'><span>Confirm</span></div>
<div class='message'></div>
<div class='buttons'>
<div class='no simplemodal-close'>Cancel</div>
<div class='yes'>Confirm</div>
</div>
</div>
and the javascript:
jQuery(function ($) {
$('a.confirm').click(function (e) {
e.preventDefault();
msg = 'this is the copy of the confirmation dialog I want to pop up, it goes on and on and on';
// example of calling the confirm function
// you must use a callback function to perform the "yes" action
confirm(msg, function () {
window.location.href = hrefval;
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%",],
minWidth: '660px',
minHeight: '400px',
overlayId: 'confirm-overlay',
containerId: 'confirm-container',
onShow: function (dialog) {
var modal = this;
$('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
modal.close(); // or $.modal.close();
});
}
});
}
Figured it out, I just had to explicitly grab the href value.
jQuery(function ($) {
$('a.confirm').click(function (e) {
e.preventDefault();
href = $(this).attr('href');
msg = 'this is the copy of the confirmation dialog I want to pop up, it goes on and on and on';
// example of calling the confirm function
// you must use a callback function to perform the "yes" action
confirm(msg, function () {
window.location.href = href;
});
});
});
Related
I want to display a Bootbox dialog that includes an "OK" button. When the user clicks the "OK" button, it should POST back, with the ID of the message to confirm that the user has viewed the message. The Bootbox dialog is the form. I don't see a way to make the dialog buttons a submit form with hidden fields, which is what I assume is the right way to accomplish my goals.
Thanks to the helpful comments from Isabel Inc and Mistalis, I have a working solution.
Notes specific to my implementation:
The messages contain images that need to be responsive, so I add the appropriate Bootstrap classes to each image
The messages may have links. Clicking a link is equivalent to clicking "OK" on the dialog
And the JavaScript that makes it happen...
jQuery(function($, window, bootbox, undefined) {
var accept = function(callback) {
$.ajax({
type: 'POST',
data: {message_id: 244826},
success: callback()
});
};
var $message = $('<p><img src="https://www.gravatar.com/avatar/80fa81938a6d1df92cd101d7fe997a71" alt></p><p>Here is a message from Sonny.</p>');
$message.find('img').addClass('img-responsive center-block');
$message.find('a').on('click', function(e) {
var href = $(this).attr('href');
if (0 === href.length) {
return;
}
e.preventDefault();
accept(function() { window.location.href = href; });
});
bootbox.dialog({
message: $message,
closeButton: false,
buttons: {
accept: {
label: 'OK',
callback: function() {
accept(function() { window.location.reload(); });
}
}
}
});
}(jQuery, window, bootbox));
I have problems with simpleModal confirm example. I want to wait the result as the base confirm dialog and it then take action depending on the button pressed. i do the call in other js. My js code is:
var res = confirm("Delete elements?");
if (res == true) {
mainController.deleteNode(nodeMoveMessage, url);
}
and the js that make the dialog is:
function confirm(message, callback) {
var modalWindow = document.getElementById("confirm");
console.log(modalWindow);
$(modalWindow).modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%",],
overlayId: 'confirm-overlay',
containerId: 'confirm-container',
onShow: function (dialog) {
var modal = this;
$('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
// close the dialog
modal.close(); // or $.modal.close();
// call the callback
return true;
});
}
});
}
the div in my jsp is:
<div id='confirm'>
<div class='header'><span>Confirm</span></div>
<div class='message'></div>
<div class='buttons'>
<div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
</div>
</div>
thanks a lot!
You have got to add a callback to your modal, so add it first in the confirm function:
function confirm(message, callback) {
var modalWindow = document.getElementById("confirm");
console.log(modalWindow);
$(modalWindow).modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%",],
overlayId: 'confirm-overlay',
containerId: 'confirm-container',
onShow: function (dialog) {
var modal = this;
$('.message', dialog.data[0]).append(message);
$('.yes', dialog.data[0]).click(function () {
modal.close(); $.modal.close();
callback(); // HERE IS THE CALLBACK
return true;
});
}
});
}
Then you can call the confirm function with a callback that executes when the yes button is clicked, like this:
function doSomething() {
mainController.deleteNode(nodeMoveMessage, url);
}
confirm("Delete elements?", doSomething);
Now when the user clicks the yes button the doSomething function will be called and the elements will be deleted.
I am having some issues getting the jquery ui dialog redirecting always. When I click a delete link it asks if you are sure. If you click the delete button it should be redirected. THe problem is it doesnt always redirect the first time. It usually only works after you click the dialog window delete the second time. Does anyone know why this might happen? I have tried using the redirect in multiple places including after the query happens and before and after the delete query closes.
Page where dialog redirects(at bottom);
Delete
<script>
var id = "";
//run function after jquery dialong confirm
//step 1 - the action
$(".delete").click(function(e) {
e.preventDefault();
id = $(this).parent().attr('id');
//console.log(id); // check you get it first
$('#dialog').dialog('open');
});
//step 2 - the dialog modal
$("#dialog").dialog({
resizable: true,
height: 100,
modal: true,
autoOpen: false,
buttons: {
"Delete": function() {
//console.log(id + " made it to dialog"); // make sure our id makes it this far
deleteUser(id); // run delete photo function
window.location.href = "http://www.speechvive.com/adminSLP.php";
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
//step 3 - php function
function deleteUser(user_id) {
//console.log(user_id + " made it to function"); // make sure our id makes it this far
$.ajax({
type: "POST",
url: "/adminSLP.php#delete",
data: {user_id: user_id}
}).done(function(msg) {
console.log(msg);
//no message bc we did a fadeOut
//var msg would show any errors from our php file
});
}
;
</script>
I want to show Confirmation Dialog when user saves any document from EDITForm.aspx. So I have written following JavaScript code.
function PreSaveAction() {
var _html = document.createElement();
_html.innerHTML = " <input type=\"button\" value=\"Submit\" onclick ='javascript:SubmitDlg();' /> <input type=\"button\" value=\"Cancel\" onclick =\"javascript:CloseDlg();\" /> </td> </tr> </tbody> </table>";
var options = {
title: "Confirm",
width: 400,
height: 200,
showClose: false,
allowMaximize: false,
autoSize: false,
html: _html
};
SP.UI.ModalDialog.showModalDialog(options);
}
function SubmitDlg() {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK);
}
function CloseDlg() {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Cancel);
}
Now I have following queries.
SubmitDlg and CloseDlg is not fired when clicking on Submit or
Cancel.
Is this right way to Submit form (SubmitDlg method ) and Cancel dialog (CloseDlg method) from modal dialog ?
Also this modal dialog-box should be only appeared if no validation errors while saving record, means if any field-value is required and we have not put any value then it should display in-built red colored messages.
Thanks
in the options for the modal dialog you need to pass a reference to your call back function like this:
var opt = SP.UI.$create_DialogOptions();
opt.width = 500;
opt.height = 200;
opt.url = url;
opt.dialogReturnValueCallback = MyDialogClosed;
SP.UI.ModalDialog.showModalDialog(opt);
Then in your callback function you can check the status:
function MyDialogClosed(result, value) {
if (result == SP.UI.DialogResult.Cancel) {
//Cancel. Do whatever
}
else { //SP.UI.DialogResult.OK
//User clicked OK. You can pickup whatever was sent back in 'value' }
}
If you need to send stuff back from your dialog you can use this:
function okClicked()
{
SP.UI.ModalDialog.commonModalDialogClose(1, someobject);
}
To make this work you'd need to hook-up a function to the OK button in your server side code using something like this:
protected override void OnLoad(EventArgs e)
{
if (Master is DialogMaster)
{
var dm = Master as DialogMaster;
if(dm != null) dm.OkButton.Attributes.Add(#"onclick", #"return okClicked();");
}
base.OnLoad(e);
}
add class "CloseSPPopUp" to the btn u want to click to close
Add This Script to Page which has "CloseSPPopUp" btn
$('.CloseSPPopUp').click(function(){
window.top.CloseSPUIPopoup();
});
$('.CloseSPPopUp').click(function(){
window.top.CloseSPUIPopoup();
});
Now on Main Page where u are calling popup
function CloseSPUIPopoup{
$(".ms-dlgContent").hide();
}
Reason:
ms-dlgContent class is in Parent Page & CloseSPPopUp is in Iframe which is created at runtime
I have a link to a page which invokes the 'Sexy Alert Box' script to pop a message asking if users agree to Terms and Conditions with options "I Agree" and "Cancel".
I've got that much going but now I need for the "I Agree" option to send them to a new page. ("Cancel" returns the user the current page.)
Something to do with document.location.href?
I am using the mootools framework.
Sexy Alert Box 1.2 mootools & jQuery
Here's the code:
<a href="#"
onclick="Sexy.confirm('Do you agree to the terms and conditions?', {
textBoxBtnOk: 'I Agree', // goes to www.newpage.com
textBoxBtnCancel: 'Cancel' // return to current page
});">Link</a>
The standard, built-in javascript confirm function will return true or false, depending on the button pushed (this is a synchronous action), but this Sexy.confirm plugin looks like something that is going to return its choice via callback functions (it will be an asynchronous action).
For example,
function doConfirm() {
Sexy.confirm('Do you agree to the terms and conditions?', {
textBoxBtnOk: 'I Agree',
textBoxBtnCancel: 'Cancel',
onComplete: function(returnvalue) {
// here is where you act, after user has made a choice...
if (returnvalue) {
//alert ("pressed OK");
window.location.href = '/page1/';
}
else {
//alert("pressed Cancel");
window.location.href = '/page2/';
}
}
});
return false; // this is to cancel the native click event
}
And then you can make your link tags a little nicer,
Link
Good luck!
With Mootools:
Use for HTML
<a class="confirm" href="www.google.fr">Google Fr</a>
<a class="confirm" href="www.google.be">Google Be</a>
And JavaScript
window.addEvent('domready', function () {
$$('a.confirm').each(function (el) {
el.addEvent('click', function (e) {
e.stop();
Sexy.confirm('<h1>Etes-vous sur de vouloir suivre ce lien ?</h1>',{
onComplete: function(returnvalue) {
if (returnvalue) {
window.location.href = el.get('href');
}
},
textBoxBtnOk: 'Oui',
textBoxBtnCancel: 'Non'
});
});
});
});