Develop Reference

JavaScript multipage form onbeforeunload issue

I am putting together a quiz system using the multipage form jQuery script and I would like to be able to warn the user if tries to close the page. I managed to do this just fine using the code below:
$(document).ready(function($) {
window.onbeforeunload = function(){
return 'Sure you want to close the page?';
};
});
My problem is that when I try to submit the form and post the results I get the warning asking me if I want to navigate away from this page. This is the code:
$('#quizForm').formwizard({
validationEnabled: true,
focusFirstInput : true,
formOptions: {
beforeSubmit: window.onbeforeunload = null,
resetForm: true
}
});
What am I doing wrong?
LE: I created this fiddle maybe someone can help me out, I am running out of ideas.
http://jsfiddle.net/awLYY/5/

first, you don't need to wait for the DOM to be ready in order to attach an onbeforeunload handler.
second, since the onbeforeunload is a function, you can choose wither to return a string or return nothing in case you're submitting some data to the server
var isFormBeingSubmitted = false;
window.onbeforeunload = function() {
if( isFormBeingSubmitted ) {
return;
}
return 'Sure you want to close the page?';
};
// now before you submit your form, just enable the isFormBeingSubmitted
$('#quizForm').formwizard({
validationEnabled: true,
focusFirstInput : true,
formOptions: {
beforeSubmit: function() {
isFormBeingSubmitted = true;
return true;
},
resetForm: true
}
});

To answer my own question, all I had to do was to add to the formwizard options:
formPluginEnabled: true
Now everything is working fine. Thanks

jQuery Mutltiple delegation on container

I have a buttons which should be handlad by ajax and they should be delegated on its container:
jQuery('#container').on('click', 'a', function() {
if(jQuery(this).hasClass('myButton1') {
//handle
return false;
} else if(jQuery(this).hasClass('myButton2') {
//handle
return false;
}
})
so I thought about improving this:
jQuery('#container').on('click', 'a.sharedClass', function() {
if(jQuery(this).hasClass('myButton1') {
//handle
return false;
} else if(jQuery(this).hasClass('myButton2') {
//handle
return false;
}
})
what do you think, will it improve my code IF:
I have many buttons: its a news stream and every news node have its own buttons like delete, favorite, spam, open media lightbox, vote, view votes and etc..
there are other anchors which are not handled by ajax.

This is an interesting question and how I usually approach this is by using the HTML5 data attribute. I'd use a data attribute like so data-actionFn = 'delete'.
HTML
The two below trigger ajax calls onclick
<a href="#" data-actionFn='delete' class='js-ajax'> delete </a>
<a href="#" data-actionFn='vote' class='js-ajax'> vote </a>
....
This does not trigger an ajax call
do something
JAVASCRIPT
jQuery('#container').on('click', 'a.js-ajax', function (e) {
e.preventDefault();
var actionFn = $(this).data('actionFn'); // grab function name
if (window[actionFn]) {
window[actionFn]();
} else {
// throw Error here
}
});
function detele(){
// put code here
}
function favorite(){
// put code here
}
function spam(){
// put code here
}
function open(){
// put code here
}
function media(){
// put code here
}
function lightbox(){
// put code here
}
function vote(){
// put code here
}
function view(){
// put code here
}
NB:
This is just to give you an idea of how you could implement it.

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

Creating a suitable replacement for prompt

My users may use IE7 and I want to avoid using the prompt function. I have working code using prompt but am unsure of a good way to replace it.
My usage requirement is this. User clicks an image button and then has to OK/Cancel a prompt. If OK is pressed, a Reference is requested which is assigned to RemovePalletReference for use in code behind.
<asp:imagebutton id="ibRemoveFromPallet" runat="server" ImageUrl="../Images/Icons/removefrompallet.gif" OnClientClick="return ConfirmReroute();"></asp:imagebutton>
<asp:HiddenField ID="RemovePalletReference" runat="server" value="" ></asp:HiddenField>
You can see above that I first call ConfirmReroute() which is the following js function.
function ConfirmReroute()
{
if (confirm("Confirm Remove Unit From Pallet") == true)
{
var pmt;
do {
pmt = prompt("Please Enter a Reference:", "");
}
while ( pmt == null || pmt.length < 1);
document.getElementById('<%= RemovePalletReference.ClientID %>').value = pmt;
return true;
}
else
return false;
}
I wish to replace the code where the user has pressed OK to the confirm. I tried with jquery UI modal dialog but could not work it out. I think it may be workable using callbacks but this is a new subject to me and I'm struggling.
Please in answers show some code to help me out. Grateful for any assistance.

Ex
function confirmDialog(title, message, confirm, reject) {
var dialog = $('<div />').html(message).dialog({
appendTo: 'body',
title: title,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
confirm();
},
"cancel": function () {
$(this).dialog("close");
if ($.isFunction(reject)) {
reject();
}
}
},
close: function (event, ui) {
$(this).dialog('destroy');
$(this).remove()
}
})
}
function test(notes) {
confirmDialog('Confirm', 'Confirm Something', function () {
console.log('ok');
//what ever you want to do on confirmation has to go here
}, function () {
console.log('cancelled')
});
//any code added here will get executed before the confirm box is displayed
}
Demo: Fiddle

Javascript Alertify with return from confirm

I'm trying to use alertify.js as a confirmation dialog for all my confirm scripts. But it just isn't working like regular JS confirm does. In the code below I never get a return true
function aConf ( mes ) {
alertify.confirm( mes, function (e) {
return e;
});
}
Delete
Of course if I replace aConf with JS' confirm it works. So why is alertify not sending me back it's outcome?

Because confirm is a blocking function (no javascript will run until it returns true/false), and alertify is non-blocking (JS keeps executing). Alertify does not immediately return a true/false, but instead, it probably returns undefined immediately, then it calls a callback function later, after the user clicks OK or Cancel. The return value from that callback function has no effect in your example, because the onclick code has already finished running (because it is non-blocking).
Assuming you are using this: https://github.com/fabien-d/alertify.js/
This is how it actually works with a callback function, not a return value:
alertify.confirm( message, function (e) {
if (e) {
//after clicking OK
} else {
//after clicking Cancel
}
});
For your code sample, you might try something like this:
function performDelete ( a_element ) {
// perform your delete here
// a_element is the <a> tag that was clicked
}
function confirmAction ( a_element, message, action ) {
alertify.confirm(message, function(e) {
if (e) {
// a_element is the <a> tag that was clicked
if (action) {
action(a_element);
}
}
});
}
Delete
EDIT: updated to be a generic confirm dialog that calls a callback function if the user clicks ok.