jQuery confirmation plugin
Simple confirmation plugin for jQuery.
Installation
To make the plugin work you need to include jQuery and styles from within ssd-confirm.css
file as well as either minified or src version of the plugin.
You also need to add the following html towards the bottom of your page structure (all data
attributes are configurable):
Confirmation dialog
YES NO
Example list of records
Name Remove row after confirming Reload after confirming Reload after confirming
Considering the above, here's how the data attributes from the two code blocks are referring to each other
data-ssd-confirm-trigger
: Associated value (in this caseremove
) corresponds to thedata-ssd-confirm-block
. You can have number of different purpose blocks.data-ssd-confirm-message
: Message that will be injected into thedata-ssd-confirm-content
.data-ssd-confirm-url
: End point to be called when theYes
button within the confirmation dialog is triggered.data-ssd-confirm-behaviour
: Method that will be executed after successful call.
Instantiating plugin
Call plugin on the instance of the trigger you wish to apply it to.
$('[data-ssd-confirm-trigger]').ssdConfirm();
Options
dataType: 'ssd-confirm-trigger', // trigger 'data-*' attribute - corresponds to the 'dataConfirmBlock'.
dataMessage: 'ssd-confirm-message', // trigger 'data-*' attribute - corresponds to the 'dataConfirmContent'.
dataUrl: 'ssd-confirm-url', // trigger 'data-*' attribute that stores the url / uri to be called when 'Yes' button is triggered.
dataBehaviour: 'ssd-confirm-behaviour', // trigger 'data-*' attribute that indicates what method should be executed after successful call.
dataConfirmWrapper: 'ssd-confirm', // dialog wrapper 'data-*' attribute.
dataConfirmBlock: 'ssd-confirm-block', // dialog block type 'data-*' attribute - corresponds to 'dataType'.
dataConfirmContent: 'ssd-confirm-content', // dialog content 'data-*' attribute - corresponds to 'dataMessage'.
dataButtonWrapper: 'button-wrapper', // dialog button wrapper 'data-*' attribute - used when you want to show 'pending' button when ajax call is being made.
dataButtonTrigger: 'trigger', // dialog trigger 'data-*' attribute - to be used with 'Yes' button.
dataButtonProcessing: 'processing', // dialog processing 'data-*' attribute - to be used with button that swaps 'Yes' button when ajax call is being made.
dataButtonYes: 'ssd-confirm-yes', // dialog 'yes' button 'data-*' attribute.
dataButtonNo: 'ssd-confirm-no', // dialog 'no' button 'data-*' attribute.
dataRecordWrapper: 'row', // list record wrapper 'data-*' attribute.
dataOverlay: 'ssd-confirm-overlay', // overlay 'data-*' attribute.
classActive: 'active', // dialog css class used to reveal the confirmation dialog (by default it slides it down).
classShow: 'show', // dialog / overlay css class to reveal given block of the confirmation dialog and overlay.
classHide: 'hide', // dialog css class to hide 'yes' / 'processing' buttons.
extendBlocks: {}, // object that can extend blocks (currently only 'remove').
extendBehaviours: {} // object that can extend behaviours (currently only 'reload' and 'removeRow').
actionProperties: function(trigger, properties) { return properties; }
// allows you to modify properties before the call is made.
Behaviours
Currently there are only 2 behaviours, but you can add more by adding them to the extendBehaviours
option.
reload: Reloads page.
removeRow: Removes the container of the record. This option requires `dataRecordWrapper` to be applied to the container of your record (default `data-row`), which should contain the trigger button.
Example of removeRow
:
Record name
Behaviour methods take 3 arguments:
* data: // data returned from ajax call
* trigger: // instance of the 'yes' button
* properties: // object containing:
* url: // url / uri to be called
* behaviour: // behaviour name
* originator: // instance of the button that triggered the dialog
* processing: // instance of the 'processing' button if exists - otherwise 'null'