Data Ajax

Questions or comments?

Purpose

A basic AjaxLoader wrapper that inserts AJAXed-in content.

Working example

How to implement

  1. Add one of the following data-ajax attributes to an element, with the attribute value being the URL of the content to AJAX in:

    • data-ajax-after: Insert content after the element

      <section data-ajax-after="ajax/data-ajax-extra-en.html">
	...
</section>

    • data-ajax-append: Insert content at the end of the element

      <section data-ajax-append="ajax/data-ajax-extra-en.html">
	...
</section>

    • data-ajax-before: Insert content before the element

      <section data-ajax-before="ajax/data-ajax-extra-en.html">
	...
</section>

    • data-ajax-before: Insert content at the start of the element

      <section data-ajax-prepend="ajax/data-ajax-extra-en.html">
	...
</section>

    • data-ajax-before: Replace the element with the content

      <section data-ajax-replace="ajax/data-ajax-extra-en.html">
	...
</section>
  2. Optional (v4.0.12+): Filter the content using the URL hash (ajax/data-ajax-filter-en.html#filter-id) or a selector (ajax/data-ajax-filter-en.html .filter-selector).

Configuration options

Option Description How to configure Values
Overlay type Configure the origin and destination of the content to AJAX in. Add the configuration attribute to the affected element with the value being the URL of the content to AJAX in.
data-ajax-after:
Insert the content after the element.
data-ajax-append:
Insert the content at the end of the element.
data-ajax-before:
Insert the content before the element.
data-ajax-prepend:
Insert the content at the start of the element.
data-ajax-replace:
Replace the element with the content.

Events

Event Trigger What it does
wb-init.wb-data-ajax Triggered manually (e.g., $( "[data-ajax-after], [data-ajax-append], [data-ajax-before], [data-ajax-prepend], [data-ajax-replace]" ).trigger( "wb-init.wb-data-ajax" );). Used to manually initialize the Data Ajax plugin. Note: The Data Ajax plugin will be initialized automatically unless the required markup is added after the page has already loaded.
wb-ready.wb-data-ajax (v4.0.5+) Triggered automatically after the content has been AJAXed in. Used to identify where content has been AJAXed in by the plugin (target of the event) and to pass along how the content was included ("after", "append", "before", "prepend" or "replace"). 
$( document ).on( "wb-ready.wb-data-ajax", "[data-ajax-after], [data-ajax-append], [data-ajax-before], [data-ajax-prepend], [data-ajax-replace]", function( event, ajaxType ) {
});
$( "[data-ajax-after], [data-ajax-append], [data-ajax-before], [data-ajax-prepend], [data-ajax-replace]" ).on( "wb-ready.wb-data-ajax", function( event, ajaxType ) {
});
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});

Source code

Data Ajax plugin source code on GitHub

Date modified: