Government of Canada / Gouvernement du Canada

Search

Data Ajax

A basic AjaxLoader wrapper that inserts AJAXed in content.

Insert content after an element (data-ajax-after)

Example

Hello World

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Hello World - Part 2

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

View code

In-page HTML

<section data-ajax-after="ajax/data-ajax-extra-en.html" class="original">
	<h4>Hello World</h4>
	<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
</section>
<section data-ajax-after="ajax/data-ajax-extra-2-en.html" class="original">
	<h4>Hello World - Part 2</h4>
	<p>Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
</section>

data-ajax-extra-en.html

<section class="ajaxed-in">
	<h4>J'ai été affiché via Ajax</h4>
	<p>J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax.</p>
</section>

data-ajax-extra-2-en.html

<section class="ajaxed-in">
	<h4>I was ajaxed in - Part 2</h4>
	<p>I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2.</p>
</section>

Append content to an element (data-ajax-append)

Example

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

View code

In-page HTML

<div data-ajax-append="ajax/data-ajax-extra-en.html" class="original">
	<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
</div>
<div data-ajax-append="ajax/data-ajax-extra-2-en.html" class="original">
	<p>Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
</div>

data-ajax-extra-en.html

<section class="ajaxed-in">
	<h4>I was ajaxed in</h4>
	<p>I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.</p>
</section>

data-ajax-extra-2-en.html

<section class="ajaxed-in">
	<h4>I was ajaxed in - Part 2</h4>
	<p>I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2.</p>
</section>

Insert content before an element (data-ajax-before)

Example

Hello World

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Hello World - Part 2

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

View code

In-page HTML

<section data-ajax-before="ajax/data-ajax-extra-en.html" class="original">
	<h4>Hello World</h4>
	<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
</section>
<section data-ajax-before="ajax/data-ajax-extra-2-en.html" class="original">
	<h4>Hello World - Part 2</h4>
	<p>Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
</section>

data-ajax-extra-en.html

<section class="ajaxed-in">
	<h4>I was ajaxed in</h4>
	<p>I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.</p>
</section>

data-ajax-extra-2-en.html

<section class="ajaxed-in">
	<h4>I was ajaxed in - Part 2</h4>
	<p>I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2.</p>
</section>

Prepend content to an element (data-ajax-prepend)

Example

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

View code

In-page HTML

<div data-ajax-prepend="ajax/data-ajax-extra-en.html" class="original">
	<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
</div>
<div data-ajax-prepend="ajax/data-ajax-extra-2-en.html" class="original">
	<p>Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
</div>

data-ajax-extra-en.html

<section class="ajaxed-in">
	<h4>I was ajaxed in</h4>
	<p>I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.</p>
</section>

data-ajax-extra-2-en.html

<section class="ajaxed-in">
	<h4>I was ajaxed in - Part 2</h4>
	<p>I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2.</p>
</section>

Replaces an element (data-ajax-replace)

Example

Hello World

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Hello World - Part 2

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

View code

In-page HTML

<div data-ajax-replace="ajax/data-ajax-extra-en.html" class="original">
	<section>
		<h4>Hello World</h4>
		<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
	</section>
</div>
<div data-ajax-replace="ajax/data-ajax-extra-2-en.html" class="original">
	<section>
		<h4>Hello World - Part 2</h4>
		<p>Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
	</section>
</div>

data-ajax-extra-en.html

<section class="ajaxed-in">
	<h4>I was ajaxed in</h4>
	<p>I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.</p>
</section>

data-ajax-extra-2-en.html

<section class="ajaxed-in">
	<h4>I was ajaxed in - Part 2</h4>
	<p>I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2. I was ajaxed in - Part 2.</p>
</section>

Filtering the content by the URL hash (ajax/data-ajax-filter-en.html#filter-id, v4.0.12+)

Example

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

View code

In-page HTML

<div data-ajax-append="ajax/data-ajax-filter-en.html#filter-id" class="original">
	<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
</div>

data-ajax-filter-en.html

<section id="filter-id" class="ajaxed-in">
	<h4>I was ajaxed in and filtered by the URL hash</h4>
	<p>I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.</p>
</section>

<section class="ajaxed-in filter-selector">
	<h4>I was ajaxed in and filtered by a selector</h4>
	<p>I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.</p>
</section>

Filtering the content by a selector (ajax/data-ajax-filter-en.html .filter-selector, v4.0.12+)

Example

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

View code

In-page HTML

<div data-ajax-append="ajax/data-ajax-filter-en.html .filter-selector" class="original">
	<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
</div>

data-ajax-filter-en.html

<section id="filter-id" class="ajaxed-in">
	<h4>I was ajaxed in and filtered by the URL hash</h4>
	<p>I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.</p>
</section>

<section class="filter-selector"><div class="ajaxed-in">
	<h4>I was ajaxed in and filtered by a selector</h4>
	<p>I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.</p>
<!-- to illustrate filter out -->
<ul class="filter-out-selector">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>
</div>
</section>

Filtering out the content by a selector

Removing one element

Data ajax attribute: data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector)"

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Removing multiple elements

Data ajax attribute: data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector, p)

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Removing an element and encoding the output

Data ajax attribute: data-wb-ajax='{ "encode": true, "url": "ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector)", "type": "replace" }'

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Source code

View code

Filering out one element, in-page HTML

<div data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector)" class="original">
	<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
</div>

Filering out multiple elements, in-page HTML

<div data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector, p)" class="original">
	<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
</div>

Filering out one element and encoding the output

<pre><code data-wb-ajax='{ "encode": true, "url": "ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector)", "type": "replace" }'>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</code></pre>

data-ajax-filter-en.html

<section class="ajaxed-in">
	<h4>I was ajaxed in and filtered by the URL hash</h4>
	<p>I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.</p>
</section>

<section class="filter-selector"><div class="ajaxed-in">
<h4>I was ajaxed in and filtered by a selector</h4>
<p>I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.</p>
<!-- to illustrate filter out -->
<ul class="filter-out-selector">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>
</div></section>

Alternative syntax

Consult the documentation for more information regarding the following alternative syntaxt.

Example

Hello World

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

View code

In-page HTML

<div data-wb-ajax='{
		"url": "ajax/data-ajax-extra-en.html",
		"type": "append"
	}' class="original">
	<section>
		<h4>Hello World</h4>
		<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
	</section>
</div>

data-ajax-extra-en.html

Source code of this code sample

It demo the use of the configuration encode

Conditional filtering using HTTP Referrer

AJAX-in content on the condition that the HTTP Referrer matches the httpref value. Use regular expression to refine your HTTP referrer to a broader range of pages.

To be used for promotional content that is not pertinent to task completion. If you have multiple httpref, see documentation for advanced usage.

Example

This content will be replaced if you browse to this page from the French version of this page

View code 

<div data-wb-ajax='{
				"url": "ajax/httpref.html#enlang",
				"type": "replace",
				"httpref": "data-ajax-fr.html"
				}'>
	<p>This content will be replaced if you browse to this page from the <a href="../data-ajax-en.html">French version of this page</a> page</p>
</div>

Code sample

AJAX-in any type of code for a code sample

View code 
<pre><code data-wb-ajax='{
		"url": "ajax/data-ajax-template-en.html",
		"type": "replace",
		"encode": true
	}'></code></pre>

Page details

Date modified: