Data Ajax

Ajouter du contenu à la fin d'un élément (data-ajax-append)

<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>

<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.</p>
</section>

<section class="ajaxed-in">
	<h4>J'ai été affiché via Ajax - partie 2</h4>
	<p>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.</p>
</section>

Insérer le contenu avant un élément (data-ajax-before)

<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>

<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.</p>
</section>

<section class="ajaxed-in">
	<h4>J'ai été affiché via Ajax - partie 2</h4>
	<p>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.</p>
</section>

Ajouter le contenu au début d'un élément (data-ajax-prepend)

<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>

<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.</p>
</section>

<section class="ajaxed-in">
	<h4>J'ai été affiché via Ajax - partie 2</h4>
	<p>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.</p>
</section>

Remplace un élément (data-ajax-replace)

<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>

<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.</p>
</section>

<section class="ajaxed-in">
	<h4>J'ai été affiché via Ajax - partie 2</h4>
	<p>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.</p>
</section>

Filtrer le contenu par le « hash » de l'URL (ajax/data-ajax-filter-fr.html#filter-id, v4.0.12+)

<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>

<section id="filter-id" class="ajaxed-in">
	<h4>J'ai été affiché via Ajax et après filtrer par le « hash » de l'URL</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.</p>
</section>

<section class="ajaxed-in filter-selector">
	<h4>J'ai été affiché via Ajax et après filtrer par selecteur</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.</p>
</section>

Filtrer le contenu par un selecteur (ajax/data-ajax-filter-fr.html .filter-selector, v4.0.12+)

<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>

<section id="filter-id" class="ajaxed-in">
	<h4>J'ai été affiché via Ajax et après filtrer par le « hash » de l'URL</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.</p>
</section>

<section class="ajaxed-in filter-selector">
	<h4>J'ai été affiché via Ajax et après filtrer par selecteur</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.</p>
</section>

Syntaxe alternative

Veuillez consulter la documentation pour de plus ample renseignement concernant cette syntaxe alternative.

Exemple

<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>

<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.</p>
</section>

Affichage conditionelle selon la page referrenciel

Afficher contenu à condition que la page referrenciel correspond avec la valeur de httpref. Vous pouvez utiliser une expression régulière afin affiner les résultats de correspondance possible.

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.

Exemple

<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>