---
{
	"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;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>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><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>
		</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>