Develop Reference

Redirect not always working with JQuery UI Dialog

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>

JavaScript dialog pop up event wait for OK to be pressed

I got a delete (input submit) button which pops up a dialog (Alloy UI dialog, html) when clicked:
A.all("#RFB input.ConfirmDelete").each(function(node){
node.on('click', function(event) {
if(confirmed) {
showUserWaitDialog();
return true;
}
else {
deactivateKeyboardNav();
deleteConfirm(node, confirmDeleteMessage, function () { //Runs the function rendering the pop up
confirmed = true;
event.target.click();
showUserWaitDialog();
});
}
});
});
The problem is that the event is running async and thus performs the deletion, and not waiting for the user to click OK (calling the callback).
The deleteConfirm takes the following arguments
function deleteConfirm(link, pText, callback) {
The content in the pop up consists of:
var bodyContent = '<div class="vl-info vl-message"><h2>'+titleText+'</h2>'+
'<p>'+pText+'</p>' +
'<p class="more button-area">'+confirmButtonText+''+discardButtonText+'</p></div>';
And the button functions:
A.one('.deleteOK').on('click', function(e){
(jQuery.isFunction(callback)) && callback.apply();
confirmDialog.close();
confirmDialogOpen = false;
});
A.one('.deleteNotOK').on('click', function(e){
confirmDialog.close();
confirmDialogOpen = false;
return false;
});
How should I approach this?

Alloy UI provides a nice Dialog box API. It may be worth to see this example and apply for your requirement.
var dialog = new A.Dialog({
title : '<your dialog box title here>',
centered: true,
modal: false,
width: 600,
height: 250,
bodyContent: <You can keep the message to display here>,
buttons: [
{
label: 'Delete',
id: 'deleteBtn',
handler: function() {
//Place code to delete here. It get executed when user click on Delete button.
}
},
{
label: 'Cancel',
id: 'cancelActionItemBtn',
handler: function() {
this.close();
}
}
]
}).render();

SimpleModal - How do I pass an email address to confirmation modal?

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;
});
});
});

jQuery function in javascript loop

I got some DIV's I'm editing with 'jeditable' which works perfectly!
Now I want to give my users an alert to ask them if they really want to edit this post.
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.jeditable.js"></script>
<script type="text/javascript">
$(document).ready(function jeditable() {
$("div[title='Article']").click (function() {
var Edit;
Edit = confirm("Editing article?");
if (Edit == true) {
$('.edit').editable('x2.php', {
cancel : 'Cancel',
submit : 'OK',
onblur: 'ignore',
});
} else {
alert("Canceling edit..");
}
});
});
</script>
1)When the alert pops and I cancel it, nothing happens (intended).
2)When I click "OK" in the alert nothing happens as well.
3)When I clicked "OK" once, the function in my 'if' works no matter if I check "OK" or "Cancel" in a second click in the alert.
I would like to only make my text editable after the user clicks "OK" once.
(Later on I want to make an image clickable instead of the text itself, but because that throws same error I try to solve this way first)
Please help me.
Thanks in advance
Problem still alive!
I changed to not make the article itself clickable fo the "confirm" but some img instead. That way it works perfectly, even with another element so trigger the confirm to make '.edit' editable. Workaround found, but still would be interested in a solution for the other way :)

I looked at the jeditable library , therefore here is what I would do to achieve your requirement
$(document).ready(function()
$("div[title='Article']").click (function() {
if (confirm("Editing article?")) {
$('.edit').editable('x2.php', {
cancel : 'Cancel',
submit : 'OK',
onblur: 'ignore',
});
}
});
});

It looks like you are missing a "}" after the end of the else clause. If you look at the error console in the browser I think you will have an error indicating this.
if (Edit == true) {
$(document).ready(function () {
$('.edit').editable('x2.php', {
cancel : 'Cancel',
submit : 'OK',
onblur: 'ignore',
});
});
} else {
alert("Canceling edit..");
}
} // <-- add this in
});

$(document).ready(function jeditable() {
$("div[title='Article']").click (function() {
var Edit;
Edit = confirm("Editing article?");
if (Edit == true) {
$('.edit').editable('x2.php', {
cancel : 'Cancel',
submit : 'OK',
onblur: 'ignore',
});
} else {
alert("Canceling edit..");
}
}); //<<< this was closing out the function BEFORE the else.
});

You dont need "$(document).ready(function" after if
$(document).ready(function jeditable() {
$("div[title='Article']").click (function() {
var Edit;
Edit = confirm("Editing article?");
if (Edit == true) {
$('.edit').editable('x2.php', {
cancel : 'Cancel',
submit : 'OK',
onblur: 'ignore',
});
} else {
alert("Canceling edit..");
}
});
});

JQuery confirmation dialog after pressing the submit button but before POSTing with .ajax()

I have a very simple scenario where I want to POST the form using JQuery's ajax() method but perform request some confirmation from the user before actually performing the post.
I have a JQuery UI dialog with localized buttons in place in case you wonder what all the code with buttons below is about.
This is my code so far:
var i18n_deleteButtons = {};
i18n_deleteButtons[i18n.dialogs_continue] = function () {
return true;
$(this).dialog('close');
};
i18n_deleteButtons[i18n.dialogs_cancel] = function () {
return false;
$(this).dialog('close');
};
$('#delete-dialog').dialog({
open: function () {
$(this).parents('.ui-dialog-buttonpane button:eq(1)').focus();
},
autoOpen: false,
width: 400,
resizable: false,
modal: true,
buttons: i18n_deleteButtons
});
$("form#form_attachments").submit(function (event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $(this), url = $form.attr('action');
// build array of IDs to delete (from checked rows)
var jdata = { 'attachmentIdsToDelete': [] };
$('input:checked').each(function () {
jdata['attachmentIdsToDelete'].push($(this).val());
})
$.ajax({
beforeSend: function (request) {
// Return false if you don't want the form submit.
$('#delete-dialog').dialog('open');
},
url: url,
type: "POST",
dataType: "json",
data: jdata,
traditional: true,
success: function (msg) {
$('#msg').html(msg);
}
});
});
The dialog actually opens up fine but clicking at any of the buttons results in nothing happening. The post doesn't happen and the dialog does not close regardless of which button was clicked.
How can I make this work?

Why not move the actual ajax call from the submit handler and trigger it when pushing a button in the delete dialog?
You could store you ajax call in a separat function and pass this functions and the url as parameters to the confirmation routine.
[pseudo code]
function callAjax() {
...
}
function submitHandler() {
confirmDialog({callback:callAjax,param:you_url});
}
function confirmDialog(obj) {
$('#yes_btn').click(function() {
// call the callback
obj.callback(obj.param);
});
$('#no_btn').click(function() {
// just close the dialog
});
}
This way the confirmDialog don't have to know anything about the ajax call, it will just execute the callback with the given parameter when the user clicks ok.

Because the default jquery UI dialog is a bit cumbersome for regular use and trouble to configure in some custom scenarios I looked around and found this Easy Confirm plugin which is based upon jquery&jquery UI default stuff. It also allows for very simple internationalization.
https://github.com/wiggin/jQuery-Easy-Confirm-Dialog-plugin