---
{
	"title": "Data Ajax",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Un enveloppeur simple pour AjaxLoader qui insère de contenu télécharger via AJAX.",
	"tag": "data-ajax",
	"parentdir": "data-ajax",
	"altLangPrefix": "data-ajax",
	"css": ["demo/data-ajax"],
	"dateModified": "2015-03-09"
}
---
<p>Un enveloppeur simple pour AjaxLoader qui insère de contenu télécharger via AJAX.</p>

<section class="wb-prettify all-pre">
	<h2>Insérer du contenu après un élément (<code>data-ajax-after</code>)</h2>
	<section>
		<h3>Exemple</h3>
		<section data-ajax-after="ajax/data-ajax-extra-fr.html" class="original">
			<h4>Bonjour tout le monde</h4>
			<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
		</section>
		<section data-ajax-after="ajax/data-ajax-extra-2-fr.html" class="original">
			<h4>Bonjour tout le monde - partie 2</h4>
			<p>Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
		</section>
		<details>
			<summary>Visualiser le code</summary>
			<section>
				<h4>HTML dans la page</h4>
				<pre><code>&lt;section data-ajax-after="ajax/data-ajax-extra-fr.html" class="original"&gt;
	&lt;h4&gt;Bonjour tout le monde&lt;/h4&gt;
	&lt;p&gt;Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.&lt;/p&gt;
&lt;/section&gt;
&lt;section data-ajax-after="ajax/data-ajax-extra-2-fr.html" class="original"&gt;
	&lt;h4&gt;Bonjour tout le monde - partie 2&lt;/h4&gt;
	&lt;p&gt;Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-extra-fr.html</h4>
				<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;J'ai été affiché via Ajax&lt;/h4&gt;
	&lt;p&gt;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.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-extra-2-fr.html</h4>
				<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;J'ai été affiché via Ajax - partie 2&lt;/h4&gt;
	&lt;p&gt;J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>
		</details>
	</section>
</section>

<section>
	<h2>Ajouter du contenu à la fin d'un élément (<code>data-ajax-append</code>)</h2>
	<section>
		<h3>Exemple</h3>
		<div data-ajax-append="ajax/data-ajax-extra-fr.html" class="original">
			<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
		</div>
		<div data-ajax-append="ajax/data-ajax-extra-2-fr.html" class="original">
			<p>Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
		</div>
		<details>
			<summary>Visualiser le code</summary>
			<section>
				<h4>HTML dans la page</h4>
				<pre><code>&lt;div data-ajax-append="ajax/data-ajax-extra-fr.html" class="original"&gt;
	&lt;p&gt;Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.&lt;/p&gt;
&lt;/div&gt;
&lt;div data-ajax-append="ajax/data-ajax-extra-2-fr.html" class="original"&gt;
	&lt;p&gt;Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.&lt;/p&gt;
&lt;/div&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-extra-fr.html</h4>
				<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;J'ai été affiché via Ajax&lt;/h4&gt;
	&lt;p&gt;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.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-extra-2-fr.html</h4>
				<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;J'ai été affiché via Ajax - partie 2&lt;/h4&gt;
	&lt;p&gt;J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>
		</details>
	</section>
</section>

<section>
	<h2>Insérer le contenu avant un élément (<code>data-ajax-before</code>)</h2>
	<section>
		<h3>Exemple</h3>
		<section data-ajax-before="ajax/data-ajax-extra-fr.html" class="original">
			<h4>Bonjour tout le monde</h4>
			<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
		</section>
		<section data-ajax-before="ajax/data-ajax-extra-2-fr.html" class="original">
			<h4>Bonjour tout le monde - partie 2</h4>
			<p>Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
		</section>
		<details>
			<summary>Visualiser le code</summary>
			<section>
				<h4>HTML dans la page</h4>
				<pre><code>&lt;section data-ajax-before="ajax/data-ajax-extra-fr.html" class="original"&gt;
	&lt;h4&gt;Bonjour tout le monde&lt;/h4&gt;
	&lt;p&gt;Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.&lt;/p&gt;
&lt;/section&gt;
&lt;section data-ajax-before="ajax/data-ajax-extra-2-fr.html" class="original"&gt;
	&lt;h4&gt;Bonjour tout le monde - partie 2&lt;/h4&gt;
	&lt;p&gt;Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-extra-fr.html</h4>
				<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;J'ai été affiché via Ajax&lt;/h4&gt;
	&lt;p&gt;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.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-extra-2-fr.html</h4>
				<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;J'ai été affiché via Ajax - partie 2&lt;/h4&gt;
	&lt;p&gt;J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>
		</details>
	</section>
</section>

<section>
	<h2>Ajouter le contenu au début d'un élément (<code>data-ajax-prepend</code>)</h2>
	<section>
		<h3>Exemple</h3>
		<div data-ajax-prepend="ajax/data-ajax-extra-fr.html" class="original">
			<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
		</div>
		<div data-ajax-prepend="ajax/data-ajax-extra-2-fr.html" class="original">
			<p>Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
		</div>
		<details>
			<summary>Visualiser le code</summary>
			<section>
				<h4>HTML dans la page</h4>
				<pre><code>&lt;div data-ajax-prepend="ajax/data-ajax-extra-fr.html" class="original"&gt;
	&lt;p&gt;Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.&lt;/p&gt;
&lt;/div&gt;
&lt;div data-ajax-prepend="ajax/data-ajax-extra-2-fr.html" class="original"&gt;
	&lt;p&gt;Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.&lt;/p&gt;
&lt;/div&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-extra-fr.html</h4>
				<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;J'ai été affiché via Ajax&lt;/h4&gt;
	&lt;p&gt;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.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-extra-2-fr.html</h4>
				<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;J'ai été affiché via Ajax - partie 2&lt;/h4&gt;
	&lt;p&gt;J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>
		</details>
	</section>
</section>

<section>
	<h2>Remplace un élément (<code>data-ajax-replace</code>)</h2>
	<section>
		<h3>Exemple</h3>
		<div data-ajax-replace="ajax/data-ajax-extra-fr.html" class="original">
			<section>
				<h4>Bonjour tout le monde</h4>
				<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
			</section>
		</div>
		<div data-ajax-replace="ajax/data-ajax-extra-2-fr.html" class="original">
			<section>
				<h4>Bonjour tout le monde - partie 2</h4>
				<p>Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
			</section>
		</div>
		<details>
			<summary>Visualiser le code</summary>
			<section>
				<h4>HTML dans la page</h4>
				<pre><code>&lt;div data-ajax-replace="ajax/data-ajax-extra-fr.html" class="original"&gt;
	&lt;section&gt;
		&lt;h4&gt;Bonjour tout le monde&lt;/h4&gt;
		&lt;p&gt;Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.&lt;/p&gt;
	&lt;/section&gt;
&lt;/div&gt;
&lt;div data-ajax-replace="ajax/data-ajax-extra-2-fr.html" class="original"&gt;
	&lt;section&gt;
		&lt;h4&gt;Bonjour tout le monde - partie 2&lt;/h4&gt;
		&lt;p&gt;Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.&lt;/p&gt;
	&lt;/section&gt;
&lt;/div&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-extra-fr.html</h4>
				<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;J'ai été affiché via Ajax&lt;/h4&gt;
	&lt;p&gt;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.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-extra-2-fr.html</h4>
				<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;J'ai été affiché via Ajax - partie 2&lt;/h4&gt;
	&lt;p&gt;J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2. J'ai été affiché via Ajax - partie 2.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>
		</details>
	</section>
</section>

<section>
	<h2>Filtrer le contenu par le &#171;&#160;hash&#160;&#187; de l'URL (<code>ajax/data-ajax-filter-fr.html#filter-id</code>, v4.0.12+)</h2>
	<section>
		<h3>Exemple</h3>
		<div data-ajax-append="ajax/data-ajax-filter-fr.html#filter-id" class="original">
			<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
		</div>
		<details>
			<summary>Visualiser le code</summary>
			<section>
				<h4>HTML dans la page</h4>
				<pre><code>&lt;div data-ajax-append="ajax/data-ajax-filter-fr.html#filter-id" class="original"&gt;
	&lt;p&gt;Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.&lt;/p&gt;
&lt;/div&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-filter-fr.html</h4>
				<pre><code>&lt;section id=&quot;filter-id&quot; class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;J'ai été affiché via Ajax et après filtrer par le &#171;&#160;hash&#160;&#187; de l'URL&lt;/h4&gt;
	&lt;p&gt;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.&lt;/p&gt;
&lt;/section&gt;

&lt;section class=&quot;ajaxed-in filter-selector&quot;&gt;
	&lt;h4&gt;J'ai été affiché via Ajax et après filtrer par selecteur&lt;/h4&gt;
	&lt;p&gt;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.&lt;/p&gt;
&lt;/section&gt;</code></pre>
			</section>
		</details>
	</section>
</section>

<section>
	<h2>Filtrer le contenu par un selecteur (<code>ajax/data-ajax-filter-fr.html .filter-selector</code>, v4.0.12+)</h2>
	<section>
		<h3>Exemple</h3>
		<div data-ajax-append="ajax/data-ajax-filter-fr.html .filter-selector" class="original">
			<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
		</div>
		<details>
			<summary>Visualiser le code</summary>
			<section>
				<h4>HTML dans la page</h4>
				<pre><code>&lt;div data-ajax-append="ajax/data-ajax-filter-fr.html .filter-selector" class="original"&gt;
	&lt;p&gt;Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.&lt;/p&gt;
&lt;/div&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-filter-fr.html</h4>
				<pre><code>&lt;section id=&quot;filter-id&quot; class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;J'ai été affiché via Ajax et après filtrer par le &#171;&#160;hash&#160;&#187; de l'URL&lt;/h4&gt;
	&lt;p&gt;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.&lt;/p&gt;
&lt;/section&gt;

&lt;section class=&quot;filter-selector&quot;&gt;&div class="ajaxed-in">
	&lt;h4&gt;J'ai été affiché via Ajax et après filtrer par selecteur&lt;/h4&gt;
	&lt;p&gt;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.&lt;/p&gt;
&lt;!-- Pour illustrer le retrait de contenu par selecteur -->
&lt;ul class="filter-out-selector">
	&lt;li>Item 1&lt;/li>
	&lt;li>Item 2&lt;/li>
	&lt;li>Item 3&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/section&gt;</code></pre>
			</section>
		</details>
	</section>
</section>

<section>
	<h2>Retirer du contenu via un sélecteur</h2>
	<section>
		<h3>Retrait d'un élément</h3>
		<p>Attribut data ajax: <code>data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector)"</code></p>
		<div data-ajax-replace="ajax/data-ajax-filter-fr.html .filter-selector > div > *:not(.filter-out-selector)" class="original">
			<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
		</div>
	</section>
	<section>
		<h3>Retrait de plusieurs éléments</h3>
		<p>Attribut data ajax: <code>data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector, p)"</code></p>
		<div data-ajax-replace="ajax/data-ajax-filter-fr.html .filter-selector > div > *:not(.filter-out-selector, p)" class="original">
			<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
		</div>
	</section>
	<section>
		<h3>Retrait d'un élément et encoder le rendement</h3>
		<p>Attribut data ajax: <code>data-wb-ajax='{ "encode": true, "url": "ajax/data-ajax-filter-fr.html .filter-selector > div > *:not(.filter-out-selector)", "type": "replace" }'</code></p>
		<pre><code data-wb-ajax='{ "encode": true, "url": "ajax/data-ajax-filter-fr.html .filter-selector > div > *:not(.filter-out-selector)", "type": "replace" }'>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</code></pre>
	</section>
	<section>
		<h3>Code source</h3>
		<details>
			<summary>Visualiser le code</summary>
			<p>Retrait d'un élément, HTML dans la page</p>
			<pre><code>&lt;div data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *<strong>:not(.filter-out-selector)</strong>" class="original"&gt;
	&lt;p&gt;Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.&lt;/p&gt;
&lt;/div&gt;</code></pre>
			<p>Retrait de plusieurs éléments, HTML dans la page</p>
			<pre><code>&lt;div data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *<strong>:not(.filter-out-selector, p)</strong>" class="original"&gt;
	&lt;p&gt;Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.&lt;/p&gt;
&lt;/div&gt;</code></pre>
			<p>Retrait d'un élément et encoder le rendement</p>
			<pre><code>&lt;pre>&lt;code data-wb-ajax='{ "encode": true, "url": "ajax/data-ajax-filter-fr.html .filter-selector > div > *:not(.filter-out-selector)", "type": "replace" }'>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.&lt;/code>&lt;/pre></code></pre>
			<p>data-ajax-filter-fr.html</p>
			<pre><code>&lt;section id=&quot;filter-id&quot; class=&quot;ajaxed-in&quot;&gt;
	&lt;h4&gt;J'ai été affiché via Ajax et après filtrer par le &amp;#171;&amp;#160;hash&amp;#160;&amp;#187; de l'URL&lt;/h4&gt;
	&lt;p&gt;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.&lt;/p&gt;
&lt;/section&gt;

&lt;section class=&quot;filter-selector&quot;&gt;&lt;div class="ajaxed-in">
	&lt;h4&gt;J'ai été affiché via Ajax et après filtrer par selecteur&lt;/h4&gt;
	&lt;p&gt;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.&lt;/p&gt;
	&lt;!-- Pour illustrer le retrait de contenu par selecteur -->
	&lt;ul class="filter-out-selector">
		&lt;li>Item 1&lt;/li>
		&lt;li>Item 2&lt;/li>
		&lt;li>Item 3&lt;/li>
	&lt;/ul>
&lt;/div&gt;&lt;/section></code></pre>
		</details>
	</section>
</section>

<section>
	<h2>Syntaxe alternative</h2>
	<p>Veuillez consulter la <a href="../../docs/ref/data-ajax/data-ajax-fr.html">documentation</a> pour de plus ample renseignement concernant cette syntaxe alternative.</p>
	<h3>Exemple</h3>
	<div data-wb-ajax='{
			"url": "ajax/data-ajax-extra-fr.html",
			"type": "append"
		}' class="original">
		<section>
			<h4>Bonjour tout le monde</h4>
			<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
		</section>
	</div>
	<details>
			<summary>Visualiser le code</summary>
			<section>
				<h4>HTML dans la page</h4>
				<pre><code>&lt;div data-wb-ajax='{
		"url": "ajax/data-ajax-extra-fr.html",
		"type": "append"
	}' class="original"&gt;
	&lt;section&gt;
		&lt;h4&gt;Bonjour tout le monde&lt;/h4&gt;
		&lt;p&gt;Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.&lt;/p&gt;
	&lt;/section&gt;
&lt;/div&gt;</code></pre>
			</section>

			<section>
				<h4>data-ajax-extra-fr.html</h4>
				<pre id="encodeme"><code data-wb-ajax='{ "encode": true, "url": "ajax/data-ajax-extra-fr.html", "type": "replace" }'></code></pre>

				<h5>Code source de cet exemple</h5>
				<p>Ceci est une démo qui illustre l'utilisation de la configuration <code>encode</code></p>
				<pre><code data-wb-ajax='{ "encode": true, "url": "data-ajax-fr.html #encodeme", "type": "replace" }'></code></pre>
			</section>
		</details>
</section>

<section>
	<h2>Affichage conditionelle selon la page referrenciel</h2>
	<p>Afficher contenu à condition que la page referrenciel correspond avec la valeur de <code>httpref</code>. Vous pouvez utiliser une expression régulière afin affiner les résultats de correspondance possible.</p>

	<p>Ceci est utilse pour afficher du contenu promotionnel qui n'est pas nécessaire pour l'achèvement de la tâches principal. Si vous avez plusieurs httpref, consultez la documentation pour une utilisation avancée.</p>
	<h3>Exemple</h3>
	<div data-wb-ajax='{
					"url": "ajax/httpref.html#frlang",
					"type": "replace",
					"httpref": "data-ajax-en.html"
					}'>
		<p>Ce contenu sera remplacé si vous parcourez cette page à partir de la <a href="data-ajax-en.html">version anglaise</a>.</p>
	</div>
			<details>
			<summary>Visualiser le code</summary>
<pre><code>
&lt;div data-wb-ajax='{
		"url": "ajax/httpref.html#frlang,
		"type": "replace",
		"httpref": "data-ajax-en.html"
		}'&gt;
	&lt;p&gt;Ce contenu sera remplacé si vous parcourez cette page à partir de la &lt;a href="data-ajax-en.html"&gt;version anglaise&lt;/a&gt;.&lt;/p&gt;
&lt;/div&gt;</code></pre>
		</details>
</section>

<section>
	<h2>Extrait de code</h2>
	<p>Afficher un extrait de code.</p>
	<pre><code data-wb-ajax='{
		"url": "ajax/data-ajax-template-fr.html",
		"type": "replace",
		"encode": true
	}'></code></pre>
	<details>
		<summary>View code</summary>
		<pre><code>&lt;pre>&lt;code data-wb-ajax='{
		"url": "ajax/data-ajax-template-fr.html",
		"type": "replace",
		"encode": true
	}'>&lt;/code>&lt;/pre></code></pre>
	</details>
</section>
