Data Ajax

Looking for WET v3.1?

As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.

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>
Date modified: