Learn and share. The simplest harmony.

 

jQuery Plugin : jConfirmAction

Posted on March 29, 2010 and got 51 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.

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 :

Delete Me

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! :)

 

This Post Tags :

Bookmark Post :

Pin It
  • COOL ..

  • Great way for displaying confirm box !
    Thanks.

  • Thanks Fellas!

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

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

  • 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!

  • 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

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

  • 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

  • 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!
    }

  • @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();

  • 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.

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

  • 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.

  • 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.

  • @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.

  • nice plugin

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

  • 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 ! :)

  • 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

  • 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! :)

  • ooohhh… pretty!

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

  • 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

  • @max.me check my reply, above.

  • 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?’); });

  • 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

  • @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! :)

  • great plugin…
    thank you for sharing…

  • Great plugin :) Tnx!

  • 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?

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

  • @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.

  • @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

  • Hello, congratulations on creating a wonderful plugin. A small question, Would you know how to make only one box is active? because when you click on two objects two boxes are opened and ideally the first to be opened will be closed.

    Thank you very much again and sorry for my bad English.

  • Nice plugin, Thanks for sharing.

  • How would you go about only displaying one confirmation message at a time?

    As it is now when one is opened it remains open even when others are clicked.

  • jquery confirm box not working

  • Can any one help to get the complete code for a sample something like when user cancel the download jconfirmaction should restrict the user with yes and no options. Actully i got the jquery code above but i am unable to implement it. thanks in advance…

  • I passed the target back to the function in this example:
    http://jsfiddle.net/wDadW/6/
    Now in my callback I can grab attribute values.

  • Mantab gan… Implemented in my apps :D

  • gracias

  • I’ve been created similiar plugin but with better option, you can use it as a Message box, Confirmation Box or Input Box.
    Just visit http://aku.salimag.us/jconf-confirmation-plugin-1-2-0.html and give it a try . . .

    Hope this help other’s who need

  • You know, I am all for sharing knowledge. But what gets me is when other people hijack something and claim it as there own.. Which clearly is the case here.. well not here but at this web address below:

    http://aku.salimag.us/demo/jconf-confirmation-plugin-1-2-0.html

    Very minor alterations to your code here. And Styling was changed a bit, but in the end, the code, the demo page even exact replica of yours. Minus tribute to you.. Hate to be a snitch but I dislike it when others stake a claim on someone Else’s work

  • Can this be used / integrated with “Enter your RSVP code” on a wedding website?

  • I want to use in form input[type="text"] like that.
    but if ı click yes link change undefined

    forexample

    $(document).ready(function() {
    $(‘input[type="submit"]‘).jConfirmAction({question : “Silme İşlemini Onaylıyor musunuz?”, yesAnswer : “Evet”, cancelAnswer : “İptal”});
    });

    click to button.

    http://www.siteurl.com/undefined

    How can I fix it..??

  • necesito ayuda con loes efectos para formularios web

  • Great work. Thank you for posting this.

  • Don’t work well under chrome (20.0.1132.57 m)

  • simple, fast, beauty and useful..
    thanks for sharing a nice plugin, bangga menjadi indonesia :)

  • it sucks because of GPL