jQuery Plugin : jConfirmAction

March 29

34 shouts so far

In previous tutorial i was explained how to replace a boring confirmation box into a cute one. You’ll no longer see a pop up confirmation box but a flying bubble confirmation box upside your link. Then I was thinking it will be very usefull for future application development to use this script and that’s why i decided to create it as a jQuery plugin.

So here is the line, jConfirmAction is a jQuery plugin that aims to replace a plain confirmation box with a cute one. This plugin will help you to create a flying bubble confirmation box upside your link. Basically this plugin will create a DIV element that contains confirmation box after your clicked element, then it will appear with fading in and dissappear with fading out. See the example on the demonstration page.

Show Implementation

Download Source

To create that one you just need to include jConfirmation plugin to your page, create a link, specify a class name, ask jConfirmAction to create a confirmation box and that’s it you have a cute confirmation box.

Prepare the link :

<a class="ask" href="somepage.html">Delete Me</a>
<a class="ask" href="anotherpage.html"><img src="images/trash.png" border="0" alt="" /></a>

Ask jConfirmAction to create a confirmation box :

//Default
$('.ask').jConfirmAction();
 
//Customized Language (Indonesian)
$('.ask-custom').jConfirmAction({question : "Anda Yakin?", yesAnswer : "Ya", cancelAnswer : "Tidak"});

jConfirmAction has three arguments that aims to customize language for the confirmation box :
question : A text for your question (default : Are You Sure?).
yesAnswer : A text for Yes answer (default : Yes).
cancelAnswer : a text for Cancel/No answer (default : No).

Since jConfirmAction using css to display the confirmation box’s style, we can modify the box’s style based on our needs. For next release, i want to support various animation style to display and remove the confirmation box. Thanks and spread the world!

Tags : CSS Forms Free Stuff jQuery

Share : jQuery Plugin : jConfirmAction (via @hdytsgt)

Similar Stuffs

bot4x

March 29, 2010 at 12:50 pm

COOL ..

Behind The Web Design

March 29, 2010 at 11:53 pm

Great way for displaying confirm box !
Thanks.

Hidayat Sagita

March 30, 2010 at 10:18 pm

Thanks Fellas!

Beben

April 2, 2010 at 6:34 pm

adeuh…gaya kieu euy, di blog kangge naon nyak…kikikiii

Mahbub

April 5, 2010 at 9:58 am

It’s nice. Btw, how it the callback handled ?

Hidayat Sagita

April 5, 2010 at 10:17 pm

Thanks for the comments folks!
@Mahbub I’m not yet add a callback for this plugin, but i’ll add to the next release list, thanks for noticing!

Vivekanand

April 20, 2010 at 1:32 am

Hi Hidayat,

This is awesome, but it would be great if you could give some indexing since this might not work when coming to Usability perspective.

If you look at default confirmation box, the tab swaps between “ok” and “cancel”, how about the one which you have created I could not see the same. I mean if you want to access the same with keyboard instead of Mouse?

It would be great if you could add this functionality as well, really it helps us a lot since I am also a developer too…

Thanks,
Vivek [Founder of http://www.developersnippets.com

Hidayat Sagita

April 20, 2010 at 10:35 am

Hi Vivekanand, thanks for your great advice! It would be nice to put them in to next release

Vivekanand

April 24, 2010 at 9:31 pm

Hi Hidayat,

I have raised this since as I am a Software Developer, I used to work on most of the web projects and most of the clients request for Accessibility and Usability.

I will be waiting for your next release on this.

Thanks,
Vivek [Founder of http://www.developersnippets.com

Scott

April 25, 2010 at 11:48 pm

Is there a way to add it into a function, like this:

function ProcessClick() {
$(’.ask’).click(function(e) {
if(confirm(’Are you sure’)) {
//User Confirmed, do stuff.
} else {
//User DID NOT Confirm, Don’t do anything
}
});
} //end function.

Thanks!
}

Hidayat Sagita

April 28, 2010 at 2:44 pm

@Vivekanand : Thank you!

@Scott : Basically this plugin allow you to intercept user link and displaying confirmation box, if you want to use this plugin you don’t need to create another function for calling jconfirmaction(), just put any link name (or its classname or its id) while calling jconfirmaction, example :

$(’.ask, elementName, #someID’).jConfirmAction();

Corey Ballou

May 10, 2010 at 8:42 pm

Although the idea is great, I believe you could extend upon this a bit more by adding functionality for more than anchored links. Some might find this useful in the event of pressing a button (and subsequently submitting a form) as well.

Hidayat Sagita

May 10, 2010 at 11:11 pm

@Corey Ballou : Hi Corey, thank you for your suggestion, I’ll add them to the next release list features.

Martin Labuschin

May 10, 2010 at 11:41 pm

Great plugin! But it doesn’t work for future elements. I’ve tried to change the plugin in line 25 to

$(this).live(’click’, function(e) {

but then it breaks completely.

Tom

May 11, 2010 at 1:52 am

Great for Links. Thanks! But how i can use it on a submit button in a form? You use the “href”. I need a “return true” like the original confirm() box on the “Yes” button.

Hidayat Sagita

May 11, 2010 at 8:31 am

@Martin Labuschin :
Thanks for noticing Martin
I think that was a bug. If you’re using live() you can disable following line :
line 23 : return this.each(function() {
line 47 : });

@Tom :
Thanks Tom!
The plugin was originally intended for anchor element, but it’s not impossible to extend them into the button. As I said on previous comment, I’ll try to extend them to the next release.

wespai

May 11, 2010 at 9:47 am

nice plugin

Adriano Meira

May 12, 2010 at 9:01 am

Puxa muito bacana era o toque final que precisava em um sistema meu, valeu!

pomeh

May 13, 2010 at 5:09 pm

This is a nice plugin. But like it was said on previous comment, it could be very nice if we could use it just like the confirm() method. For example you can create a $.jConfirmAction() method that shows up your confirm box, and returns true or false depending on which button the user clicks. You can ever add the 2 callback for the confirm event and the cancel event. I think that level of customization would be very nice and very useful.

Then, to give more controls to plugin’s users, you could also add a callback when the box is being displayed, when the box is displayed, when the box is being destroyed (after the user click a button so) and when the box is destroyed. With that callback the user could customize the animation or whatever he wants.
You could also provide an option to customize the css class it uses (useful if you have two kinds of box for example), add and option to be able to reverse the buttons’ positions (”ok” button on the right or on the left of the “cancel” button). Then you can add a title to the box. And the last one, you could provide an option/a method to enable/disable the overriding of the original confirm() method. With that, we just have to said something like $.jConfirmAction(’overhidde’, true); or $.jConfirmAction.enableOverhidde(); or whatever you want, and >all< calls to confirm() method would be now use your plugin !

Manuel Silva

May 14, 2010 at 12:12 am

Hey there,

I’ve made some changes (hope you don’t mind) to fit needs, I’ve added a callback so I can attach this to any element.

Here is the code: http://pastebin.com/QcKEPqfG

Usage: http://pastebin.com/yZA1RS4m

Tested, and everything looks fine, be gentle this was the first time I’ve done something like this.

cheers

Hidayat Sagita

May 14, 2010 at 12:41 am

Wow I got impressed feedback!

@pomeh & @Manuel Silva
Thank you so much for your tremendous feedback! I really appreciate it. This week is bussiest week for me, I am very difficult to arrange schedule for releasing next version for this plugin but all of you have doing it, my bad and thank you so much!

Callback is one of the next feature release, I’ll try my best for releasing it soon. Again, thank you so much for all of your feedback and awesome credit for Manuel Silva!

Tulsi Dharmarajan

May 15, 2010 at 4:08 am

ooohhh… pretty!

jesus mata

May 15, 2010 at 6:16 am

Thanks! it´s great! but have problem with IE

max.me

May 16, 2010 at 9:51 pm

Great plugin.
But I have a little poblem. This plugin can only promt for changing location, but not default onclick event.
It will be great if u’ll add this functianality too

Manuel Silva

May 17, 2010 at 4:41 pm

@max.me check my reply, above.

James Moberg

May 17, 2010 at 11:10 pm

I wrote a simple script that creates confirmation prompts based on class and uses the HREF title parameter as the prompt message. Are you able to add a feature like as it would make it easier to integrate custom per-link messages without having to perform multiple function calls on different link classes.

$(’.confirmLink’).click(function(){ return confirm($(this).attr(’title’).length ? $(this).attr(’title’) : ‘Are you sure?’); });

Andrew Ellis

May 18, 2010 at 2:56 am

Hello,

Awesome plugin! I’ll be using this on my current project for a client. However, this plugin does not support a callback method. In my case I needed to fire an AJAX call once the user clicks “Yes”.

Here is the modified plugin to support adding a callback: http://1three.pastebin.com/YjWydVtf

Example:

$(”.delete”).jConfirmAction({
callback: function() {
alert(”callback!”);
}
});

Best regards,
Andrew

Hidayat Sagita

May 18, 2010 at 6:18 am

@jesus mata :
Please put the detailed problem.

@max.me :
I’m not yet add these functionality, but for a while you can use modified plugin from Manuel Silva and Andrew Ellis, and please wait for the next release

@James Moberg :
jConfirmAction has ‘question’ option for custom message, but still it can’t get current clicked link, thanks for noticing

@Andrew Ellis :
Hi Andrew, thanks for awesome feedback! I’ll put credits for your and Manuel Silva great work!

Biju Subhash

May 19, 2010 at 2:24 am

great plugin…
thank you for sharing…

Bob

May 30, 2010 at 3:15 am

Great plugin Tnx!

andrew

July 26, 2010 at 3:36 pm

hi there.. very nice plugin.
but i have one problem with it.
I want to put it on a link without href
the link would look like: blah blah

I have test it and although the alert box appears, it is being ignored and the ajax action is procceesed.

Is there a way to block onclick events untill after the user confirm his actions?

andrew

July 27, 2010 at 12:55 pm

sorry i must correct my prev post
the links are without href
blah blah

Hidayat Sagita

July 27, 2010 at 1:03 pm

@andrew : Until now jConfirmAction still in development for supporting callback, Yours need a callback. However You can still modify the jConfirmAction core for blocking onclick events.

Pomeh

August 28, 2010 at 8:15 pm

@Andrew Ellis & @Hidayat Sagita
take a look at this little test I’ve made http://jsfiddle.net/Pe5VG/
There are some issues with the callback feature.

I’ve made some fixes for that problem and also some optimization, look at this http://jsfiddle.net/hpkE9/1/
Changes are fully documented so I hope this will help you

Regards,
Romain