SOW : Core Plugins

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

SOW : Ajax Content

Plugin written to load ajax content to any container just by passing few params.

Overview:
  • load content via ajax request
  • callback support for each request/container
  • option to reload content
  • lightweight, 4Kb minified (1.7Kb gzipped)

Note: .js-ajax is also used as a default selector by different plugins:
form.js-ajax used by default by SOW : Ajax Forms
a.js-ajax used by default by SOW : Ajax Navigation
This plugin is using by default div.js-ajax and section.js-ajax.
Please pay attention where you plan to use it to avoid conflicts in case all ajax plugins are active.


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

	:: Plugin Init
*/	$.SOW.core.ajax_content.init('div.js-ajax, section.js-ajax');



/* 
	:: Plugin Options|Defaults

*/	$.SOW.core.ajax_content.init('div.js-ajax, section.js-ajax' {
		method 					: 'GET',
		contentType 				: '', 	// jQuery params
		dataType 				: '', 	// jQuery params
		headers 				: '', 	// jQuery params
		crossDomain 				: '', 	// jQuery params
		data_params 				: {ajax:'true'}, // jQuery extra request optional params for your backend

		/* 
			callback_example = function(el, data, target_container) {
				// el 				= element 				$(this)
				// data 			= server response 			(html|string)
				// target_container = container to push data  	(string:#middle)
			}
		*/
		callback_function 			: '',

		// content (server response) is sent to your callback function only.
		callback_before_push			: false,
});
									

/* 
	:: Overwriting the defaults:

		* data-ajax-target-container=""		empty = self 
*/

	data-ajax-method="GET" 
	data-ajax-target-container=""
	data-ajax-callback-function="" 
	data-ajax-callback-before-push="false" 
									

Examples


<!-- 

	Ajax Content 

	.js-ajax 					selector, required
	data-ajax-url="_ajax/dummy_text.html" 		required - ajax content url
	data-ajax-btn-reload="#btn_ajax_reload" 	optional, reload button selector (id or class)

-->
<div class="js-ajax" data-ajax-url="_ajax/dummy_text.html" data-ajax-btn-reload="#btn_ajax_reload">
	<!-- ajax content -->
</div>




<!-- Reload Button -->
<a id="btn_ajax_reload" href="#" class="btn btn-sm btn-light">
	<span class="group-icon">
		<i class="fi fi-circle-spin"></i>
		<i class="fi fi-circle-spin fi-spin"></i>
	</span>
	<span>Reload</span>
</a>