SOW : Core Plugins

SOW = Step Of Web (Smarty author).
SOW plugins are part of Smarty Core, written from scratch!

SOW : Ajax Confirm

Overview:
  • full ajax confirmation (or regular link as submit type)
  • identifiable header color (success/warning/danger/etc)
  • uses bootstrap modal
  • callback support
  • lightweight, 6Kb minified (2.2Kb gzipped)

/* 
	:: Plugin File
	src/js/sow.core/sow.ajax_confirm.js

	:: Plugin Init
*/	$.SOW.core.ajax_confirm.init('.js-ajax-confirm');



/* 
	:: Plugin Options|Defaults

*/	$.SOW.core.ajax_confirm.init('.js-ajax-confirm' {
		method 						: 'GET',		// jQuery params (ajax mode only)
		contentType 					: '',			// jQuery params (ajax mode only)
		dataType 					: '',			// jQuery params (ajax mode only)
		headers 					: '',			// jQuery params (ajax mode only)
		crossDomain 					: '',			// jQuery params (ajax mode only)
		data_params 					: {ajax:'true'},	// jQuery params (ajax mode only)

		confirm_size 					: 'modal-md',
		confirm_centered 				: 'false',

		confirm_mode 					: 'regular', // ajax|regular
		confirm_title 					: 'Please Confirm',
		confirm_body 					: 'Are you sure?',
		confirm_type 					: '', 		// primary|secondary|success|warning|danger|info; empty = regular/clean

		btn_class_yes 					: 'btn-sm btn-primary',
		btn_class_no 					: 'btn-sm btn-light',
		btn_text_yes 					: 'Confirm',
		btn_text_no 					: 'Cancel',
		btn_icon_yes 					: 'fi fi-check',
		btn_icon_no 					: 'fi fi-close',

		/* 
			callback_example = function(el, data) {
				// el 				= link clicked 				$(this)
				// data 			= server response 			(html|string)
			}
		*/
		callback_function 				: ''
});
									

/* 
	:: Overwriting the defaults:
*/

	data-ajax-confirm-mode="ajax" 
	data-ajax-confirm-method="GET"

	data-ajax-confirm-size="modal-md" 
	data-ajax-confirm-centered="false" 

	data-ajax-confirm-title="Please Confirm" 
	data-ajax-confirm-body="Are you sure? Delete this item?" 
	data-ajax-confirm-type="primary|secondary|success|danger|warning|info"

	data-ajax-confirm-btn-yes-class="btn-sm btn-primary" 
	data-ajax-confirm-btn-yes-text="Confirm" 
	data-ajax-confirm-btn-yes-icon="fi fi-check" 

	data-ajax-confirm-btn-no-class="btn-sm btn-light" 
	data-ajax-confirm-btn-no-text="Cancel" 
	data-ajax-confirm-btn-no-icon="fi fi-close"
	
	data-ajax-confirm-callback-function=""
									

// AJAX METHOD ONLY
// On ajax confirm success:
	data-ajax-confirm-success-target="#container" 
	data-ajax-confirm-success-target-action="remove|addClass|removeClass|toggleClass" 
	data-ajax-confirm-success-target-class="someClass" 

// * remove = useful on delete action

Examples

Color Header Types
Primary Secondary Success
Danger Warning Info 
<!--
Change the layout type by adding to any confirm: 
	data-ajax-confirm-type="primary"
	data-ajax-confirm-type="secondary"
	data-ajax-confirm-type="success"
	data-ajax-confirm-type="danger"
	data-ajax-confirm-type="warning"
	data-ajax-confirm-type="info"
-->


<a 	href="#"
	data-href="/my-link/?action=delete&amp;item_id=1" 
	class="js-ajax-confirm btn btn-primary btn-soft mb-3"
	data-ajax-confirm-type="primary"
	data-ajax-confirm-mode="ajax" 
	data-ajax-confirm-body="Are you sure? Delete this item?" 
	data-ajax-confirm-btn-yes-class="btn-sm btn-primary">
		<i class="fi fi-shield-ok"></i>
		Primary
</a>
Mode : Ajax Confirm 

<!--

	data-href is the confirmation url and should contains 
	the backend required params, like in the example.

	If confirmation URL is added to href, the plugin will remove it 
	and will automatically create data-href with it!
	Reason: people should not be able to "open link in new tab"
	skipping the confirmation window.

	.js-ajax-confirm is the required selector (which can be changed)

-->
<a 	href="#"
	data-href="plugins-sow-ajax-confirm.html?action=delete&amp;item_id=1" 
	class="js-ajax-confirm btn btn-success btn-soft"

	data-ajax-confirm-mode="ajax" 
	data-ajax-confirm-method="GET" 

	data-ajax-confirm-size="modal-md" 
	data-ajax-confirm-centered="false" 

	data-ajax-confirm-title="Please Confirm" 
	data-ajax-confirm-body="Are you sure? Delete this item?" 

	data-ajax-confirm-btn-yes-class="btn-sm btn-danger" 
	data-ajax-confirm-btn-yes-text="Confirm" 
	data-ajax-confirm-btn-yes-icon="fi fi-check" 

	data-ajax-confirm-btn-no-class="btn-sm btn-light" 
	data-ajax-confirm-btn-no-text="Cancel" 
	data-ajax-confirm-btn-no-icon="fi fi-close"

	data-ajax-confirm-callback-function="">
		<i class="fi fi-shield-ok"></i>
		Mode : Ajax Confirm
</a>
Mode : Regular Confirm 

<!--

	data-href is the confirmation url and should contains 
	the backend required params, like in the example.

	If confirmation URL is added to href, the plugin will remove it 
	and will automatically create data-href with it!
	Reason: people should not be able to "open link in new tab"
	skipping the confirmation window.

	.js-ajax-confirm is the required selector
	* GET method supported only.

-->
<a 	href="#"
	data-href="plugins-sow-ajax-confirm.html?action=delete&amp;item_id=1" 
	class="js-ajax-confirm btn btn-primary btn-soft"

	data-ajax-confirm-mode="regular" 

	data-ajax-confirm-size="modal-md" 
	data-ajax-confirm-centered="false" 

	data-ajax-confirm-title="Please Confirm" 
	data-ajax-confirm-body="Are you sure? Delete this item?" 

	data-ajax-confirm-btn-yes-class="btn-sm btn-danger" 
	data-ajax-confirm-btn-yes-text="Confirm" 
	data-ajax-confirm-btn-yes-icon="fi fi-check" 

	data-ajax-confirm-btn-no-class="btn-sm btn-light" 
	data-ajax-confirm-btn-no-text="Cancel" 
	data-ajax-confirm-btn-no-icon="fi fi-close"

	data-ajax-confirm-callback-function="">
		<i class="fi fi-shield-ok"></i>
		Mode : Regular Confirm
</a>
Jump To