---
{
	"title": "Data Ajax",
	"language": "en",
	"category": "Plugins",
	"categoryfile": "plugins",
	"description": "A basic AjaxLoader wrapper that inserts AJAXed-in content.",
	"altLangPrefix": "data-ajax",
	"dateModified": "2017-06-07"
}
---
<div class="wb-prettify all-pre hide"></div>

<section>
	<h2>Purpose</h2>
	<p>A basic AjaxLoader wrapper that inserts AJAXed-in content.</p>
</section>

<section>
	<h2>Executing WET plugin on AJAXed-in content</h2>

	<pre><code>/**
 * @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 ) {
	&quot;use strict&quot;;
	$('#mycontainer').on( &quot;wb-contentupdated&quot;, function( event, data ){
		// &quot;data.ajax-type&quot; contains the insersion method [after, append, before, prepend, replace]
		// &quot;data.content&quot; contains the
		var $elm = $(event.currentTarget);
		$elm
			.find( wb.allSelectors )
				.addClass( &quot;wb-init&quot; )
				.filter( &quot;:not(#&quot; + $elm.attr( &quot;id&quot; ) + &quot; .wb-init .wb-init)&quot; )
					.trigger( &quot;timerpoke.wb&quot; );
		/*
		 * 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 );
</code></pre>
<p>Be careful to not execute it on every data-ajax container to avoid a possible recursive self calling situation.</p>
</section>

<!--
<section>
	<h2>Use when</h2>
	<ul>
		<li>Use case 1</li>
		<li>Use case 2</li>
		<li>Use case 3</li>
	</ul>
</section>

<section>
	<h2>Do not use when</h2>
	<ul>
		<li>Use case 1</li>
		<li>Use case 2</li>
		<li>Use case 3</li>
	</ul>
</section>
-->

<section>
	<h2>Working example</h2>
	<ul>
		<li><a href="../../../demos/data-ajax/data-ajax-en.html">English example</a></li>
		<li><a href="../../../demos/data-ajax/data-ajax-fr.html">French example</a></li>
	</ul>
	<div lang="en">
		<h2>Evaluation and report</h2>
		<ul>
			<li>Accessibility pre-assessment #1
				<ul>
					<li><a href="../../../demos/data-ajax/reports/a11y-1-en.html" hreflang="en"><span class="wb-inv">Pre-assessment #1</span> English report</a></li>
					<li><a href="../../../demos/data-ajax/reports/a11y-1-fr.html" hreflang="fr"><span class="wb-inv">Pre-assessment #1</span> French report</a></li>
				</ul>
			</li>
			<li>Accessibility assessment #1
				<ul>
					<li><a href="../../../demos/data-ajax/reports/a11y-2-en.html" hreflang="en"><span class="wb-inv">Assessment #1</span> English report</a></li>
					<li><a href="../../../demos/data-ajax/reports/a11y-2-fr.html" hreflang="fr"><span class="wb-inv">Assessment #1</span> French report</a></li>
				</ul>
			</li>
		</ul>
	</div>
</section>

<section>
	<h2>How to implement</h2>
	<ol>
		<li>
			<p>Add one of the following data-ajax attributes to an element, with the attribute value being the URL of the content to AJAX in:</p>
			<ul>
				<li>
					<p><code>data-ajax-after</code>: Insert content after the element</p>
					<pre><code>&lt;section data-ajax-after=&quot;ajax/data-ajax-extra-en.html&quot;&gt;
	...
&lt;/section&gt;</code></pre>
				</li>
				<li>
					<p><code>data-ajax-append</code>: Insert content at the end of the element</p>
					<pre><code>&lt;section data-ajax-append=&quot;ajax/data-ajax-extra-en.html&quot;&gt;
	...
&lt;/section&gt;</code></pre>
				</li>
				<li>
					<p><code>data-ajax-before</code>: Insert content before the element</p>
					<pre><code>&lt;section data-ajax-before=&quot;ajax/data-ajax-extra-en.html&quot;&gt;
	...
&lt;/section&gt;</code></pre>
				</li>
				<li>
					<p><code>data-ajax-prepend</code>: Insert content at the start of the element</p>
					<pre><code>&lt;section data-ajax-prepend=&quot;ajax/data-ajax-extra-en.html&quot;&gt;
	...
&lt;/section&gt;</code></pre>
				</li>
				<li>
					<p><code>data-ajax-replace</code>: Replace the element with the content</p>
					<pre><code>&lt;section data-ajax-replace=&quot;ajax/data-ajax-extra-en.html&quot;&gt;
	...
&lt;/section&gt;</code></pre>
				</li>
			</ul>
		</li>
		<li><strong>Optional (v4.0.12+):</strong> Filter the content using the URL hash (<code>ajax/data-ajax-filter-en.html#filter-id</code>) or a selector (<code>ajax/data-ajax-filter-en.html .filter-selector</code>).</li>
	</ol>
</section>
<section>
	<h2>Cache busting</h2>
	<p>Before to use the cache busting mechanism with your data json instance, it's highly recommended to configure your server properly instead.</p>
	<p>Various strategy can be set on the server side and those are communicated to the browser through an http header as defined in <a href="https://tools.ietf.org/html/rfc7234#section-5">section 5 of RFC7234</a>.</p>
</section>
<section>
	<h2>Configuration options</h2>
	<table class="table">
		<thead>
			<tr>
				<th>Option</th>
				<th>Description</th>
				<th>How to configure</th>
				<th>Values</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Overlay type</td>
				<td>Configure the origin and destination of the content to AJAX in.</td>
				<td>Add the configuration attribute to the affected element with the value being the URL of the content to AJAX in.</td>
				<td>
					<dl>
						<dt><code>data-ajax-after</code>:</dt>
						<dd>Insert the content after the element.</dd>
						<dt><code>data-ajax-append</code>:</dt>
						<dd>Insert the content at the end of the element.</dd>
						<dt><code>data-ajax-before</code>:</dt>
						<dd>Insert the content before the element.</dd>
						<dt><code>data-ajax-prepend</code>:</dt>
						<dd>Insert the content at the start of the element.</dd>
						<dt><code>data-ajax-replace</code>:</dt>
						<dd>Replace the element with the content.</dd>
					</dl>
				</td>
			</tr>
			<tr>
				<td><code>url</code></td>
				<td>Configure the origin of the content to AJAX in.</td>
				<td><code>data-wb-ajax='{ "url": "location/of/ajax/fragment/file.html", "type": "replace" }'</code></td>
				<td>
					<dl>
						<dt>Default</dt>
						<dd>The value being the URL of the content to AJAX in.</dd>
						<dt>Array</dt>
						<dd>To be used in conjunction with <code>httpref</code> configuration. Array length must match the array length of <code>httpref</code>.</dd>
					</dl>
				</td>
			</tr>
			<tr>
				<td><code>type</code></td>
				<td>Configure how the destination of the content will be inserted.</td>
				<td><code>data-wb-ajax='{ "url": "location/of/ajax/fragment/file.html", "type": "replace" }'</code></td>
				<td>Be one of the valid value listed.
					<dl>
						<dt><code>after</code></dt>
						<dd>Insert content after the element</dd>
						<dt><code>append</code></dt>
						<dd>Insert content at the end of the element</dd>
						<dt><code>before</code></dt>
						<dd>Insert content before the element</dd>
						<dt><code>replace</code></dt>
						<dd>Replace content inside the element</dd>
						<dt><code>prepend</code></dt>
						<dd>Insert content at the start of the element</dd>
					</dl>
				</td>
			</tr>
			<tr>
				<td><code>encode</code></td>
				<td>Flag to encode the HTML file being ajaxed in.</td>
				<td><code>data-wb-ajax='{ "url": "location/of/ajax/fragment/file.html", "encode": true }'</code></td>
				<td>
					<dl>
						<dt>Default</dt>
						<dd>False, the ajaxed file are not encoded</dd>
						<dt><code>true</code></dt>
						<dd>Will encode the characted <code>&lt;</code> into the character <code>&amp;lt;</code> which allow to show the code source of the ajaxed content.</dd>
					</dl>
				</td>
			</tr>
			<tr>
				<td><code>nocache</code></td>
				<td>Prevent caching. Prior using the functionality, use the various caching strategies that can be set and communicated through http header from your server, as defined in <a href="https://tools.ietf.org/html/rfc7234#section-5">section 5 of RFC7234</a>. Also, please note that some server may not like to have an query appended to his url and you may get an HTTP error like "400 Bad Request" or "404 Not Found". Like a page served by a domino server will return 404 error if the query string do not start with "<code>?open</code>", "<code>?openDocument</code>" or "<code>?readForm</code>".</td>
				<td><code>data-wb-ajax='{ "url": "location/of/ajax/fragment/file.html", "type": "replace", "nocache": true }'</code> or <code>data-wb-ajax='{ "url": "location/of/ajax/fragment/file.html", "type": "replace", "nocache": "nocache" }'</code>
				<td>
					<dl>
						<dt>Default</dt>
						<dd>The browser will manage the cache based on how the server has sent the file.</dd>
						<dt><code>true</code></dt>
						<dd>Boolean, Use the same cache buster id for the user session. Clossing and opening the tab should generate a new cache busting id.</dd>
						<dt><code>nocache</code></dt>
						<dd>String, A new id is generated everytime the file is fetched</dd>
					</dl>
				</td>
			</tr>
			<tr>
				<td><code>nocachekey</code></td>
				<td>Prevent caching. Optional, it defined what query parameter name to use for the cache busting.</td>
				<td><code>data-wb-ajax='{ "url": "location/of/ajax/fragment/file.html", "type": "replace", "nocache": true, "nocachekey": "wbCacheBust" }'</code></td>
				<td>
					<dl>
						<dt>Default</dt>
						<dd>Will use "<code>wbCacheBust</code>" for the parameter name.</dd>
						<dt>String</dt>
						<dd>URL pre-encoded string</dd>
					</dl>
				</td>
			</tr>
			<tr>
				<td><code>httpref</code></td>
				<td>AJAX-in content on the condition that HTTP Referrer matches <code>httpref</code> value(s). Optional.</td>
				<td><code>data-wb-ajax='{ "url": "ajax/httpref.html", "type": "replace", "httpref": "data-ajax-en.html" }'</code></td>
				<td>
					<dl>
						<dt>Default</dt>
						<dd>No impact.</dd>
						<dt>String</dt>
						<dd>HTTP Referrer URL or a regular expression matching the referrer URL</dd>
						<dt>Array</dt>
						<dd>Array of strings containing target HTTP Referrer URLs</dd>
					</dl>
				</td>
			</tr>
		</tbody>
	</table>
</section>
<section>
	<h2>Using httpref</h2>
	<p>You can use multiple <code>httpref</code> using an array to action a single <code>url</code> call.</p>
	<pre><code>
	&lt;div data-wb-ajax='{
						"url": "ajx-fragment.html",
						"type": "replace",
						"httpref": [
							"temp/index.html",
							"temp/example.html",
							"lorem/ipsum/index.html",
							"test.html"
						]
						}'&gt;
		&lt;p&gt;Default content&lt;/p&gt;
	&lt;/div&gt;
	</code></pre>
	<p>You can use multiple <code>httpref</code> using an array with a matching length array of <code>url</code> values. Each <code>httpref</code> value will be checked until true and action the <code>url</code> value that has the matching array index.</p>
	<pre><code>
	&lt;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"
						],
						}'&gt;
		&lt;p&gt;Default content&lt;/p&gt;
	&lt;/div&gt;
</code></pre>
</section>
<section>
	<h2>Events</h2>
	<table class="table">
		<thead>
			<tr>
				<th>Event</th>
				<th>Trigger</th>
				<th>What it does</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>wb-init.wb-data-ajax</code></td>
				<td>Triggered manually (e.g., <code>$( "[data-ajax-after], [data-ajax-append], [data-ajax-before], [data-ajax-prepend], [data-ajax-replace]" ).trigger( "wb-init.wb-data-ajax" );</code>).</td>
				<td>Used to manually initialize the Data Ajax plugin. <strong>Note:</strong> The Data Ajax plugin will be initialized automatically unless the required markup is added after the page has already loaded.</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb-data-ajax</code> (v4.0.5+)</td>
				<td>Triggered automatically after the content has been AJAXed in.</td>
				<td>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").
					<pre><code>$( 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 ) {
});</code></pre>
					<pre><code>$( "[data-ajax-after], [data-ajax-append], [data-ajax-before], [data-ajax-prepend], [data-ajax-replace]" ).on( "wb-ready.wb-data-ajax", function( event, ajaxType ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb</code> (v4.0.5+)</td>
				<td>Triggered automatically when WET has finished loading and executing.</td>
				<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
					<pre><code>$( document ).on( "wb-ready.wb", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-contentupdated</code></td>
				<td>Triggered automatically when data-ajax has finished to load the response.</td>
				<td>Use to perform a secondary action upon ajax content is loaded
					<pre><code>$('#mycontainer').on( "wb-contentupdated", function( event, data ){
});</code></pre>
				</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Source code</h2>
	<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/data-ajax">Data Ajax plugin source code on GitHub</a></p>
</section>
