jQuery Inline Confirm

I have been using Delicious social bookmarking service ever since Blinklist degraded and finally lost the plot with their new design. When I first started using Delicious, a feature of their interface really leapt out at me and I could not wait to include it into a project.
The feature I am talking about is their inline confirmation. That is, when you, for instance, delete a bookmark by clicking on the delete link, the link is replaced with an ‘Are You Sure? Yes/Cancel’ message.

Inline Confirm - Before

Inline Confirm - After

I really liked this as there was no page refresh for the confirmation message and it was not a modal popup, which is a little obtrusive at best. It also occurred to me that something like that would not require a huge amount of code either. This is what I came up with:

1
2
3
4
5
6
7
8
9
$.inlineconfirm = function(el, callback, parentSel) {
        var hideEl = parentSel ? $(el).parents(parentSel) : $(el);
        hideEl.hide()
        $('<div class="confirm">Are you sure? <a class="confirmyes" href="#">Yes</a> <span>|</span> <a class="confirmcancel" href="#">Cancel</a></div>')
            .find('a.confirmyes').click(function() { callback(); hideEl.show();  $(this).parents('div.confirm:first').remove(); return false; }).end()
            .find('a.confirmcancel').click(function() { hideEl.show(); $(this).parents('div.confirm:first').remove(); return false; }).end()
            .insertAfter(hideEl);
        return false;
    }

I decided on using just a function rather than a plugin, as I wanted asp.net control compatibility (see later). The function just swaps out the element(s) for the confirmation message and puts them back if cancel is pressed, otherwise it runs the callback. It utilises three parameters:

  • el – The element which initiates the inline confirm. i.e. The link
  • callback – A function to run if the answer is Yes
  • parentSel – (optional) This is a jquery selector that identifies a parent element of el that will be replaced with the prompt. This is so that you could for instance hide an entire section of html with the ‘are you sure?’ prompt. Particularly useful to keep layouts consistent.

This is a nice easy function to use in most web development language, however, if you are using asp.net, it becomes difficult to use it with the asp controls like <asp:Button /> or <asp:LinkButton />. This is because ASP.NET likes to take control of the click events of these so that it can create its event model at the server. There is the onClientClick property which allows us to have some control over the click event but we need to pass a callback function. After a little investigating, I discovered the GetPostBackEventReference function:

mylinkbutton.OnClientClick = "$.inlineconfirm(this,function() {" & ClientScript.GetPostBackEventReference(mylinkbutton, "") & ";});return false;"

The GetPostBackEventReference returns a string of the function that will be used to invoke the postback. Just what we needed.

 

4 thoughts on “jQuery Inline Confirm

  1. Although I agree with Edgar Friendly in the usability point I have to disagree with Bren. ASP.NET is not rigid, you should just know what to do with its server controls and what don’t. Server side controls generate HTML for the web client. jQuery is a library for the client side, combining those two is the tricky thing, so if you want to do it you have to work with the ASP.NET produced output in the client side not with the server side control names.

  2. Confirmation is usually the wrong way to handle this kind of user interaction – Undo is really what people need. I admit that this is a nice way to do confirmation, but just like UAC, people will quickly learn to ignore the Yes/No and just click yes.

Leave a Reply

Your email address will not be published. Required fields are marked *