My Technical Notes

Wednesday, 5 December 2012

"Add Confirm" JQuery Plugin

In Javascript, you can use the confirm dialog to warn users when they click on a delete button etc; for example:


<input type='submit' 
   value='Delete' 
   name='Delete' 
   onclick='return confirm("Are you sure you want to delete this?");' />

What this does is if the user clicks 'Ok' then confirm will return true; if the user clicked Cancel, then confirm will return false. If an onclick event returns true then the form-post will take place, otherwise it won't.

However, there are some limitations with Javascript's confirm:

  • You cannot change the Ok and Cancel button's text, to, for e.g. "Yes" and "No".
  • You cannot style the dialog.

There is one advantage of confirm though, and that is it it's modal (which prevents users from interacting with the page) and fairly simple to use.

Since I badly needed a dialog with customizable button text and something that would work on elements even if they were removed and re-added through an AJAX UpdatePanel, I wrote my own JQuery plugin called add_confirm.

To use the below plugin, You need to include both JQuery and JQuery UI before it.

The below is how you would call the script (do it in a document ready block or equivalent):


    $('#submit').add_confirm({ message: 'Are you sure?', yes_text: '100%', no_text: 'absolutely not!' });

Download Script and Sample ZIP File

No comments: