The WebApp Wizard Web development made magical

Documentation

Usage

JS

The jQuery object to which you apply the plugin will be the trigger of the confirmation box. This trigger will be passed along in the parameters for the callback functions.

$('#try').fastConfirm(options);

What else?
You can also call methods, the jQueryUI way:

$('#try').fastConfirm('close');

HTML

Just any valid HTML element:

<button id="try">Try it!</button>

CSS

A CSS file is included in the downloadable package. But you might want to add some custom CSS to make the integration more seamless.

You'll see in the included CSS file that there are two sections, the first one shouldn't be edited, it is a part of the plugin behaviour, and the second part contains what is relative to the look & feel, so you can customize it (if you want a red background for your confirmation box for example).

Options

There are a few options to make Fast Confirm more flexible. Here they are, with their default values:

  • position: ['top', 'right', 'bottom', 'left']
    Defines where to put the confirmation box, realtively to the trigger element.
  • offset: {top: 0, left: 0}
    Allows precise positioning. Top and left offsets will be added to the computed default absolute position of the confirmation box. If you set the top offset to -5 for example, the confirmation box will be 5 pixels above its default position.
  • zIndex: 10000
    Allows you to fine tune the z-index if you're facing z-index issues causing the confirm box not to appear
  • eventToBind: [eventName, false]
    An event name (submit, click...) or false. If an event name is provided, Fast Confirm will take care of event management. This is really useful when you want to deal with form submission.
  • questionText: "Are you sure?"
    The question asked by the confirm box.
  • proceedText: "Yes"
    The text of the button designated to confirm the action
  • cancelText: "No"
    The text of the button designated to cancelthe action
  • targetElement: null
    A selector to specify on which element, inside the binded element, the confirm box should be opened. Mostly useful to open the box on the submit button of a form.
  • unique: [true, false]
    If set to true, only one confirm box can remain opened. Any new confirm box will close opened boxes, triggering the "cancel" action on each one.

  • fastConfirmClass: 'fast_confirm'
    The CSS class prefix used in all Fast Confirm elements. If you want to change classes names for any reason, you have to use this parameter
  • onProceed: function(trigger, clicked) {$.fastConfirm.close(trigger);}
    The function called when the user hits the confirmation button
  • onCancel: function(trigger, clicked) {$.fastConfirm.close(trigger);}
    The function called when the user hits the cancellation button

Methods

  • .fastConfirm('close'): close the confirm box that is binded to the selected element.
Comments (65) Trackbacks (1)
  1. I like it. Small, smart and nice :)

  2. Hi ! Yep, just what is needed for asking confirmation.
    And a CSS3 – compliant version is coming soon ! :-)

  3. Hi

    A very nice plugin, but how to make it work on a class selector where I have many selectors with same class and only one of them should be open.

    I have a table rows that have delete options and now it opens like 50 requesters at once as I select ‘input.delete’ not by id as I can not write 50 times ‘id1′ ‘id2′ etc…

    Is there a way to make it bind to several confirmation requestors at once?

  4. Hi Jerry,

    That’s a good comment. You will probably have to do the following:

    $('.your_class').each(function() {
       $(this).fastConfirm(yourOptions);
    });
    

    That should do the trick: instead of applying the plugin on a big set of elements, you iterate through this big set and apply the plugin to each of these elements.

    I agree this doesn’t seem optimal, but that should work, as I use a similar solution for a case that is similar to yours.

    I will look deeper into that problem as soon as I can and I’ll let you know if I release a bugfix.

    Thanks for experiencing Fast Confirm! :-)

  5. Hi, It’s really a good work. I did some little trick when using it.
    I plus these code at the end of the js file:

    $(function(){
        $('.fast-confirm').click(function(){
            var ques = $(this).attr('ques');
            var href = $(this).attr('href')
            $(this).fastConfirm({
                              position: "right",
                              questionText: ques,
                              onProceed: function(trigger) {
                                      window.location.href=href;
                              },
                              onCancel: function(trigger) {
                              }
                         });
             return false;
    
        });
    });
    

    by doing this, I could simply add confirmation to an existing <a> element, I think this is the most common scenario:
    <a href=”http://some.url” rel=”nofollow”>delete</a>

  6. Hi,

    You’re right, that is probably a frequent use case.

    I think there might be a slightly simpler way, though. You could use the trigger parameter in the onProceed() callback, rather than using a previously set to get the href attribute. The trigger parameter is the element that was clicked by the user and triggered the confirmation box. So something like this should work fine too:

    $(function(){
       $(‘.fast-confirm’).click(function() {
          var ques = $(this).attr(‘ques’);
          $(this).fastConfirm({
             position: “right”,
             questionText: ques,
             onProceed: function(trigger) {
                window.location.href=$(trigger).attr('href');
             },
             onCancel: function(trigger) {
             }
          });
          return false;
       });
    });
    

    But that’s really a tiny detail. :-)

  7. close fastConfirm programmatically?

  8. Yes, of course. But you just pointed out the fact that I didn’t document it well enough. Gotta fix that.

    You can close it by calling $.fastConfirm.close(trigger).

    This is what is done by default in the callbacks.

  9. Hi, PJP
    How to handle the postback. I have a . When the button click it pop up the confirm dialog, but it postback and refresh the page. How to disable the post back and do it once the “Yes” button click?

  10. Hi,

    Could you please join the piece of code, because I can’t really figure out how you’re using the plugin to make it behave this way.

    You can look at the exemple given by bigeyex just a few comment above to check if you’re using it properly. I’ll be glad to help you nonetheless.

  11. Thank you for your reply. Here is what I have:

    $(function () {
        $('#MainContent_btn').click(function () {
            $(this).fastConfirm({
                position: "right",
                questionText: "Are you sure you want to try Fast Confirm?",
                onProceed: function (trigger) {
                    //Can I do post back (call button server click event) here?
                },
                onCancel: function (trigger) {
                }
            });
        });
    });

    When the btn click, the fast confirm dialog pop up, but the post back event fire then the page refresh.

  12. I figured out. add “OnClientClick=“return false;” to the button. and put $(‘#MainContent_btn’).trigger(‘click’) one the “onProceed” function. the server click event called. Thanks for you help!

  13. OK, nice you figured it out. :-) Moreover, I wouldn’t have been able to help you as I don’t know much about ASP.

    Thanks for your interest and your contribution.

  14. I am working on a project where I really want to utilize fastconfirm. However, I have a problem with having multiple items. I have put in the each loop but there’s a problem there. I realized that doing the loop without binding to the click action was a bit of an issue too I believe. Here is my code (inside the jquery ready call):

    $("a.fast_confirm").each( function() {
    	$(this).click(function() {
    		alert($(this).attr('title'));
    		$(this).fastConfirm({
    			position: "top",
    			questionText: $(this).attr('title'),
    			onProceed: function(trigger) {
    				document.location = $(this).attr('href');
    			},
    			onCancel: function(trigger) {
    				return false;
    			}
    		});
    	});
    });
    

    The html of a page would look something like this:

    User Joe <a href='/user/delete/1' title='Are you sure you want to delete this user?' rel="nofollow">Delete</a>
    User Carl <a href='/user/delete/2' title='Are you sure you want to delete this user?' rel="nofollow">Delete</a>
    

    With the above code, it never even runs the alert I added (for debug purposes). But if I take out the click action line (and it’s closing function line) I get the alert twice (one for each user) but then neither of the users even show up! It’s really strange.

    If there’s something I am doing wrong, I’d love to know.

    Thank you!

  15. Definitely what I’ve been searching for!! Flexible enough to strip the css and use background images for the buttons and the popup itself. Easily positionable as well :)

    One question, I have 3 elements on one page I need to apply this to. Each element needs a different style… I am guessing I just copy the CSS and rename the classes, and then rename the class in the js file. Is there a simple way of doing this, as in my mind I am guessing I will need 3 fast-confirm js files, each modified to use a different css class?

    Either way, thank you for providing this!

  16. Hi Anthony!

    You don’t need to create 3 js files and rename the class in the JS files, as you can provide a different base class name with the fastConfirmClass parameter when you call $.fastConfirm(). So you can have different class names for each instance of Fast Confirm. For example:

    $('#element1').fastConfirm({fastConfirmClass: 'class-one'});
    $('#element2').fastConfirm({fastConfirmClass: 'class-two'});
    $('#element3').fastConfirm({fastConfirmClass: 'class-three'});
    
  17. thank you for the quick reply! It took me hours to find this script after trying other ones which were less flexible and hard to theme. I was easily able to remove your css formatting and apply my own, change the location and style of the buttons and text and properly position the tooltip where I wanted and it worked perfectly in various browsers!

    So for anyone reading this, with css knowledge you can easily make the tooltip look 100% different than the demo with ease!

    Two suggestions that I believe would make this appealing to more people are:
    1. On your website you docs, demo, and download should all link together. I kept having to browse back to the jquery website to find the proper links on your site. All these pages should also make the plugin name prominent so people know exactly which plugin they are looking at.

    2. simple optional tooltip transitions like fade and slide.

    Cheers! and thanks again! I will vote for this plugin

  18. Thanks for your suggestions, they really make sense. As I rarely browse my own website, I didn’t figure this out. But putting some links between the different pages for a plugin is a good idea, as well as putting more explicitly the plugin’s name on the page. I will add these when I’ll have a few minutes.

    I will try some things with the transitions, but my original goal was to make something really lightweight. If I can keep it small and with no dependencies, maybe I will add these too.

    Thanks a lot for your time and suggestions. :-)

  19. @Andrew: sorry for the delay, but your comment has been moved to spam…

    That’s really strange. I use this plugin exactly your way on one of my projects, and it works fine. I guess you did, but did you try to have a look at the Firebug console? Are there any javascript errors?

    The HTML code you posted here contains two links without the ‘fast_confirm’ class. So your selector is not working. But if it works when you remove the click binding, I guess that’s just a mistyping error here.

    I wonder… Maybe using the ‘fast_confirm’ class causes a conflict, because it is the default class name used by this plugin. Maybe you could try giving your links another class, like ‘confirm’.

    Please keep us posted about your issue.

  20. Just wanted to say this plugin has been working like a charm and is so flexible! I have one question which may seem simple, how would I go about making the popup appear when someone clicks inside of a form textfield?

  21. I think you can achieve it the same way. Just bind your callback function on the click event of your textfield.

  22. Would love to see an option to make this modal so other elements are blocked until a response is acquired from the user. I tried combining it with http://jquery.malsup.com/block, but it didn’t want to play nicely (style becomes screwy…) Couldnt figure out if it was yours or blockui that was causing the issue.

    Basically, I want to overlay the UI outside of the fastConfirm so that nothing can be done while the confirm is displayed..

  23. I’m really sorry, but I didn’t have much time to work on this blog lately… Maybe you could try to find what’s wrong between these two plugins? Then I would try to fix this if that’s possible.
    Event if it could be nice to use BlockUI with FastConfirm, FC was originally designed to be non intrusive. I would prefer to use another more traditional dialog plugin to make modal dialogs.

  24. Hi,

    i use your plugin for a list.there was a delete icon inside list.so when click icon i can open confirm.

    my problem is , i want to close all opened confirm and just show one confirm.i added a screnshot for my issue.

    http://yfrog.com/e6adszxlaj

  25. Hi Serhat, you can use $.fastConfirm.close(trigger);
    Where trigger is the element you binded to Fast Confirm. So you have to find the selector that suits your needs to select all your FC triggers and then iterate on the resulting set, and vall this method to close all of your opened confirmation boxes.
    I know that’s not really convenient, and I should realease un update on most of my plugins quite soon to have a different approach.

  26. Pierre-Jean,

    There doesn’t seem to be a $.fastComfirm.close() method – when I look in your source, the buttons call their proceed/cancel function and then:

    $(trigger).removeData(‘fastconfirm_binded’);
    $(this).closest(‘div.’ + params.fastConfirmClass).remove();

    In the meantime I’m simulating a “cancel” button click to programmatically close the confirm box.

    Cheers,
    Hunter

  27. Is there a way to call Fast Confirm from a form action, such as:

    Basically, the submit button on my form needs to call Fast Confirm, and I’m not sure how to do this.

    Thanks!

  28. OK…having trouble showing my code here, but I’ve discovered how to trigger Fast Confirm when submitting a form, but the only problem is that the form submits instantly as soon as the Fast Confirm dialogue box comes up. How do I make the form submission conditional upon the Fast Confirm response from the user? Here is what I have which doesn’t seem to be working:

    
                    $('.delConfirm').submit(function() {
                            $(this).fastConfirm({
                                    position: "left",
                                    questionText: "Are you sure you want to delete this item?",
                                    onProceed: function(trigger) {
                                            return true;
                                    },
                                    onCancel: function(trigger) {
                                            return false;
                                    }
                            });
                    });
    
    
  29. Hi BHall,

    That may seem strange, but I probably didn’t try to use FastConfirm on any form submit.

    I have some work to do on this plugin, to make method calls more normalized and solve some event managing issues, like the one you noticed.

    But in the meantime, let’s take a look at your code. What do we have here? Your submit callback does one single thing: it initializes FastConfirm. Then it exits. As you don’t do anything special, it will return true. As a result, your form will be submitted immediately, no matter what code you wrote in the FC callbacks, since they are not executed.

    I would recommend the following: instead of a submit, put a simple button. You would then bind the click event instead of the submit event. In the onProceed callback, you would then submit the form programatically. The onCancel callback doesn’t need to do anything, unless you want to achieve a particular task when the user says “no”.

    I agree that’s not the most elegant solution in the world (a user with no JS won’t be able to submit your form), but it should work fine, nevertheless.

    I really have to implement a better event handling for FC.

    @Hunter: you’re right… I was pretty sure this method existed, but it doesn’t. I don’t know what happened, I think I must have mixed up with another plugin I was working on at that time.
    I think the most elegant solution for the moment is to simulate a click on the cancel button, as you told.

    I’m sorry for the confusion…

    The next version of my plugins (including FC) will adopt a more “normalized” way to call methods, as I realize that I under-evaluated the need to manipulate programmatically these plugins.

    Thanks to everyone for your interest, I really mean it.

  30. I figured out how to prevent the form from submitting right away (by adding another “return false;” in there). The only thing that remains is to figure out some way to programatically submit the form:

    $(‘.delConfirm’).submit(function() {
    $(this).fastConfirm({
    position: “left”,
    questionText: “Are you sure you want to delete this item?”,
    onProceed: function(trigger) {
    // submit the form here–any ideas?
    },
    onCancel: function(trigger) {
    return false;
    }
    });
    return false;
    });

  31. I just gave the solution one comment above ;-)

    Just replace your submit button by a simple button. Your code should look like this then:

    ('.delButton').click(function() {
                            $(this).fastConfirm({
                                    position: "left",
                                    questionText: "Are you sure you want to delete this item?",
                                    onProceed: function(trigger) {
                                            $('.delButton').closest('form').submit();
                                    }
                            });
                    });
    

    That should work fine, even if it’s clearly not the best solution. However, for the moment, I think this is the only one regarding how FC works.

  32. Pierre-Jean,

    Just FYI…there are multiple delete buttons on a list of items. When I tried the above code, upon clicking yes, all of the instances of the .delButton class are activated and all show their own FC prompts. I would have thought that the $('.delButton').closest('form').submit(); would have isolated the triggering to just a single button (the closest button), but instead it triggered FC prompts on all instances of the delete button. Weird.

  33. OK, so you can try something like this:

    $('.delButton').each(function() {
       $(this).fastConfirm(
          // Same code as on the previous example
       });
    });
    

    That should work just fine :-)

  34. Thank you so much for the quick replies. Unfortunately, it’s not working for me. I’ll be anxiously waiting for an official update to handle such situations (specifically, to work with form submissions). For the time being, a simple JavaScript confirm (via ‘form onClick’) will have to do. :-) Thanks!

  35. I was able to get Fast Confirm to work with a form submission using a jQuery AJAX call:


    $('.delConfirm').submit(function() {
    var postData=$(this).serializeArray();
    $(this).fastConfirm({
    position: "left",
    questionText: "Are you sure you want to delete this item?",
    onProceed: function(trigger) {
    $.ajax({
    type : "POST",
    cache : false,
    url : "./del.php",
    data : postData,
    success: function(data) {
    window.location = './';
    }
    });
    return false;
    },
    onCancel: function(trigger) {
    return false;
    }
    });
    return false;
    });

    Hope it helps anyone else out there trying to get Fast Confirm to work with form submissions.

  36. Welcome back, BHall.

    I had some time to work on my plugins recently, so I should release a new version of Fast Confirm (among others) very soon which allows to deal with form submissions (and any other event) in a much cleaner and elegant way.

    Anyway, I am glad you finally succeeded to make it work for you.

  37. Great! Looking forward to an update!

  38. The new version is here! I updated the demos and documentation, so it should be quite easy to update.

  39. Is there a way to tell FastConfirm to only open one instance of FastConfirm? For example, if I have a list of items with a “delete” button which calls FastConfirm, if I click on multiple delete buttons, I get multiple FastConfirm dialog boxes. Is there a way to only allow one to be open at a time?

  40. Welcome back!

    Yes, you can use the “unique” option. If set to true, opening another confirm box will automatically close previously opened ones. It does the same as clicking on the “No” button.

  41. Oops… I just figured out that I didn’t release this feature… I was convinced I did. I’ll release that tomorrow, it should be quite fast as I’m pretty sure I have written this feature in a previous version (maybe not released though)

  42. Well, that’s fixed.
    You can now have unique confirm boxes.

    I also added a new “targetElement” parameter to allow smarter positioning, especially useful with form confirmations.

    Have a look at the demos! ;-)

  43. Pierre-Jean,

    Great! The targetElement and unique settings are exactly what I needed. There’s only one problem, now. How do I read in the data submitted in the form for use in an .ajax() call in the onProceed: section? With the new version, it broke the functionality of the ajax call (see my comment above: http://blog.pierrejeanparra.com/jquery-plugins/fast-confirm/documentation/comment-page-1/#comment-639)

  44. The new version was aimed at changing the way you use it. For a form submission, you can simply do (assuming that ‘.delConfirm’ will select a form):

    $('.delConfirm').fastConfirm({
       eventToBind: "submit",
       position: "left",
       targetElement: ":submit",
       unique: true,
       questionText: "Are you sure you want to delete this item?"
    });
    

    as Fast Confirm now takes care of the event handling (and thus, form submission) if you use the “eventToBind” parameter.

    However, I don’t understand why your old code doesn’t work anymore. If you stick with the old style usage, it should work as it was before. I’ll have a look tomorrow. Could you try the above code in the meantime ? It should fit your needs, I think.

  45. Thanks Pierre-Jean. I’m using the old style usage for now


    ($('.delConfirm').submit(function() {
    var postData=$(this).serializeArray();
    $(this).fastConfirm({
    ...

    What happens is that I need to do an .ajax() call using the data from the form. With the new usage style, I don’t see any way to capture the form data to use in an “onProceed:” call.

  46. OK, sorry, I’m a bit tired, so I thought you wanted to access the form data in order to submit the form like we had to do before version 2. I didn’t understand why you would want to do that.

    You can still access the form data, as the onProceed callback takes an argument, which is a jQuery object containing the element on which you have bound FC. For example, you could do that:

    onProceed: function($trigger) {
       // $trigger is the element on which you called fastConfirm(), so it is equivalent to $(this) in your previous example
       var postData = $trigger.serializeArray();
    
       // Your ajax call comes here...
    }
    

    That should do the job :-)

  47. After searching for MANY hours for a jQuery confirmation box that was light weight, easy to use, and would allow me to select my button labels, I came across fastConfirm. This program is a Godsend. Bless you for all of your hard work!

    After using it for a few hours, I came across an interesting scenario. I have a page which contains a button to remove a section from the page. When I press the “Remove” button, I get the expected fastConfirm dialog box. Once the section has been deleted, the subsequent sections move up the page. When I press my “Remove” button for one of the subsequent sections, the fastConfirm dialog box appears where that section was ORIGINALLY placed, not where it is currently placed. I have demonstrated this behavior here.

    Is there a way I can tell fastConfirm to calculate positions when the confirmation dialog box is displayed instead of when fastConfirm is attached to the button?

    Thanks in advance.

  48. I have a work-around for those who may be interested. I modified my code to create the fastConfirm dialog as part of the “Remove” button click event instead of when the document was ready. Now my fastConfirm shows up in the right spot every time. You can see the corrected demo here.

    Original code:

    $(document).ready( function() {
    	$('.remove').fastConfirm( {  position: 'right'
    		,eventToBind: 'click'
    		,unique: 'true'
    		,questionText: 'Are you sure you want toremove this section?'
    		,onProceed: function(trigger) { $(trigger).fastConfirm('close'); $(trigger).parent().remove(); return true; }
    	} );
    } );
    

    Corrected code:

    $(document).ready( function() {
    	$('.remove').click( function() {
    		$(this).fastConfirm( {  position: 'right'
    			,unique: 'true'
    			,questionText: 'Are you sure you want toremove this section?'
    			,onProceed: function(trigger) { $(trigger).fastConfirm('close'); $(trigger).parent().remove(); return true; }
    		} );
    	} )
    } );
    

    Thanks again for this great little script.

  49. Wow… I just saw your 2 messages. It really pleases me that you enjoy this plugin that much! :D

    I wouldn’t have came up with a better solution than yours.

    Maybe I should redesign it a bit to make calculations later on. For the moment, positioning is determined on plugin initialization, and not when the box pops. Which is a bit stupid when I think about it. But at the time I designed it, there was no way to use it the way you did at first place. In some way, I screwed up the 2.0 redesign… I’ll look at it!

    Thanks for your great report and enthusiasm. :-)

  50. Doesn’t seem to work with ie9, is there a work around for this?

    Cheers,
    Tom


Leave a comment

(required)

You can use basic HTML to enlighten your comments. If you want to post some code, please use the <pre> tag. You can also use syntax coloring by adding class="syntax [language]". <pre class="syntax js"> will color your code as if it was JS code for instance.