jQuery Confirm Plugin

If you attach the confirm plugin to a regular a link, which has the link in the traditional way (in the HTML rather than attached via a jQuery function), can you make sure that link is followed if you click yes on your inline confirm message? It looks like both the yes and no have the "wrapper" default value on them, which means the original link is never followed, and as the original link target link is provided in the HTML, rather than via jquery, I don't see how this will work. I don't want to attach any link targets via jquery, as they are dynamically generated on the page.

The above code works great. I apply a class=delete to my links and style them .delete {background-color:red;color:#fff}

Sorry, I'm a bit lame... How is it suppossed to work? I'm using jquery 1.2.6 and confirmation-plugin 1.2
I have a link:

Delete...

and finally the code:

jQuery('.confirm').confirm();

But it doesn't do anything, and firebug console complains:

jQuery(".confirm").confirm is not a function
[Break on this error] jQuery('.confirm').confirm();


Ok, here it goes a real challenge. I am trying to use your code to trap the unLoad event, bc I want to add a Confirm window when someone is leaving a website. Beware that leaving a website means type it another url on the browser, press the back button, whatever makes abandon the page. So far, only a pretty raw works exactly as expected. any other jQuery plugin I've been trying out there is not catching the event and the page is just leaving the browser.
Gabriel

I need confirm dialog with yes/no buttons :(

Great plugin. It's very well designed and versatile.

I've been reading tutorials on JQuery, but this was my frist trial. It worked for my application wonderfully. This plugin saved me an hour coding a form confirmation processing page. A talented and beautiful developer, bookmarked!

I really like and will include in my new website

wanted support for confirming regular links, so I wrapped the href inside click event if no events available but the href is set.
Great plugin, thanks!

line 46 to 49 becomes:
if (!events && target.href) // No handlers but we have href
{
$target.bind('click',function(){document.location = target.href});
events = jQuery.data(target, 'events');
}
else if (!events)// There are no handlers to save.
return;

Great plugin! I like it! I will use it! Thank you very much! ;)

I saw it was possible to set button texts. However is it also possible to change the
yes/no link texts. I am using your plugin in DotNetNuke 4 in a multi lingual environment. So Yes/No must be translated.

I am from China,I am a Chinese. My name is HuangShuzhen '黄树振'. Thank you very much!

First of all, great plugin, thanks for that. I've only got one question - how can I get the following as output for the wrapper?

I have configured the following variables in the button section:


wrapper: '',
cls: 'submit',


With this I get buttons without text in it... :S Any ideas?

Im struggling to make this work so that the link actually works after the link.button is clicked and confirmed, any help?

Thanks

If I have a small icon that users push to launch the confirm plugin when trying to delete something, the icon takes up very little space in my design. I would like the "Are you sure? yes/no" to show up in another place. Is there a way I can specify a target div where this will appear?

Thought I'd share this. I wanted to be able to specify what element the confirm dialog was inserted before in the DOM, mostly because I'm using this to display a full page confirmation check (like Lightbox, Thickbox, etc...). I added an option "replaceTarget" and then use the existence of this target to specify there the confirm dialog is added.

Here is the replacement code, very little bit adjusted.

jQuery.fn.confirm = function(options) {
options = jQuery.extend({
msg: 'Are you sure?',
stopAfter: 'never',
wrapper: '',
eventType: 'click',
dialogShow: 'show',
dialogSpeed: '',
timeout: 0,
replaceTarget: false,
}, options);
options.stopAfter = options.stopAfter.toLowerCase();
if (!options.stopAfter in ['never', 'once', 'ok', 'cancel']) {
options.stopAfter = 'never';
}
options.buttons = jQuery.extend({
ok: 'Yes',
cancel: 'No',
wrapper:'',
separator: '/'
}, options.buttons);

// Shortcut to eventType.
var type = options.eventType;

return this.each(function() {
var target = this;
var $target = jQuery(target);
var timer;
var saveHandlers = function() {
var events = jQuery.data(target, 'events');
if (!events) {
// There are no handlers to save.
return;
}
target._handlers = new Array();
for (var i in events[type]) {
target._handlers.push(events[type][i]);
}
}

// Create ok button, and bind in to a click handler.
var $ok = jQuery(options.buttons.wrapper)
.append(options.buttons.ok)
.click(function() {
// Check if timeout is set.
if (options.timeout != 0) {
clearTimeout(timer);
}
$target.unbind(type, handler);
$target.show();
$dialog.hide();
// Rebind the saved handlers.
if (target._handlers != undefined) {
jQuery.each(target._handlers, function() {
$target.click(this);
});
}
// Trigger click event.
$target.click();
if (options.stopAfter != 'ok' && options.stopAfter != 'once') {
$target.unbind(type);
// Rebind the confirmation handler.
$target.one(type, handler);
}
return false;
})

var $cancel = jQuery(options.buttons.wrapper).append(options.buttons.cancel).click(function() {
// Check if timeout is set.
if (options.timeout != 0) {
clearTimeout(timer);
}
if (options.stopAfter != 'cancel' && options.stopAfter != 'once') {
$target.one(type, handler);
}
$target.show();
$dialog.hide();
return false;
});

if (options.buttons.cls) {
$ok.addClass(options.buttons.cls);
$cancel.addClass(options.buttons.cls);
}

var $dialog = jQuery(options.wrapper)
.append(options.msg)
.append($ok)
.append(options.buttons.separator)
.append($cancel);

var handler = function() {
//jQuery(this).hide();

// Do this check because of a jQuery bug
if (options.dialogShow != 'show') {
$dialog.hide();
}

if (options.replaceTarget) {
$dialog.insertBefore($('#wrapper'));
}
else {
$dialog.insertBefore(this);
}

// Display the dialog.
$dialog[options.dialogShow](options.dialogSpeed);
if (options.timeout != 0) {
// Set timeout
clearTimeout(timer);
timer = setTimeout(function() {$cancel.click(); $target.one(type, handler);}, options.timeout);
}

return false;
};

saveHandlers();
$target.unbind(type);
target._confirm = handler
target._confirmEvent = type;
$target.one(type, handler);
});
}

Example of use:


// bind a handler to the delete button
$('#delete-group').click(function(){
// enter your click handler here
});

$("#delete-group").confirm({
wrapper: '',
msg:'Do you really want to delete this group?',
// note: the replaceTarget is a jQuery selector, probably best
// if it ends up with a unique result set
replaceTarget: '#wrapper'
});

Hope this helps someone else.

Noticed it doesn't work with input buttons when you do the below:

$('input[type=button]').confirm({
msg: 'Confirm: ',
timeout: 3000,
dialogShow: 'fadeIn',
dialogSpeed: 'slow',
buttons: {
wrapper: '',
ok: 'Yes',
cancel: 'No ',
separator: ' / '
}
});

Any change of a fix?

Great plugin good job.

..html

nice