Data Ajax

Purpose

A basic AjaxLoader wrapper that inserts AJAXed-in content.

Executing WET plugin on AJAXed-in content

/**
 * @title Execute any WET plugin on AJAXed-in content
 * @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
 * @author @duboisp (Github)
 * @version 1.0.0+2016-10-14
 */
(function( $, document, wb ) {
	"use strict";
	$('#mycontainer').on( "wb-contentupdated", function( event, data ){
		// "data.ajax-type" contains the insersion method [after, append, before, prepend, replace]
		// "data.content" contains the
		var $elm = $(event.currentTarget);
		$elm
			.find( wb.allSelectors )
				.addClass( "wb-init" )
				.filter( ":not(#" + $elm.attr( "id" ) + " .wb-init .wb-init)" )
					.trigger( "timerpoke.wb" );
		/*
		 * Since we are working with events we want to ensure that we are being
		 * passive about our control, so returning true allows for events to always
		 * continue
		 */
		return true;
	});
})( jQuery, document, wb );

Be careful to not execute it on every data-ajax container to avoid a possible recursive self calling situation.

Working example

• English example
• French 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-prepend: Insert content at the start of the element

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

   • data-ajax-replace: 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).

Cache busting

Before to use the cache busting mechanism with your data json instance, it's highly recommended to configure your server properly instead.

Various strategy can be set on the server side and those are communicated to the browser through an http header as defined in section 5 of RFC7234.

Configuration options

Using httpref

You can use multiple httpref using an array to action a single url call.

	<div data-wb-ajax='{
						"url": "ajx-fragment.html",
						"type": "replace",
						"httpref": [
							"temp/index.html",
							"temp/example.html",
							"lorem/ipsum/index.html",
							"test.html"
						]
						}'>
		<p>Default content</p>
	</div>
	

You can use multiple httpref using an array with a matching length array of url values. Each httpref value will be checked until true and action the url value that has the matching array index.

	<div data-wb-ajax='{
						"url": [
							"ajx-content1-en.html",
							"ajx-content2-en.html",
							"ajx-example-en.html",
							"ajx-questionnaire-en.html"
						],
						"type": "replace",
						"httpref": [
							"temp/index.html",
							"temp/example.html",
							"lorem/ipsum/index.html",
							"test.html"
						],
						}'>
		<p>Default content</p>
	</div>

Events

$( 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 ) {
});

$( document ).on( "wb-ready.wb", function( event ) {
});

$('#mycontainer').on( "wb-contentupdated", function( event, data ){
});

Source code

Data Ajax plugin source code on GitHub