Plugin written to load ajax content to any container just by passing few params.
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"
<!--
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>