Data Ajax

Vous cherchez la BOEW v3.1?

À partir du 23 septembre 2014, la version 3.1 de la Boîte à outils de l'expérience Web n'est plus supportée. Le code source et la documentation ont été déplacés vers le dépôt wet-boew-legacy.

Un enveloppeur simple pour AjaxLoader qui insère de contenu télécharger via AJAX.

Insérer du contenu après un élément (data-ajax-after)

Exemple

Bonjour tout le monde

Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.

Bonjour tout le monde - partie 2

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.

Visualiser le code

HTML dans la page

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

data-ajax-extra-fr.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-fr.html

<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 du contenu à la fin d'un élément (data-ajax-append)

Exemple

Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.

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.

Visualiser le code

HTML dans la page

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

data-ajax-extra-fr.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-fr.html

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

Exemple

Bonjour tout le monde

Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.

Bonjour tout le monde - partie 2

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.

Visualiser le code

HTML dans la page

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

data-ajax-extra-fr.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-fr.html

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

Exemple

Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.

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.

Visualiser le code

HTML dans la page

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

data-ajax-extra-fr.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-fr.html

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

Exemple

Bonjour tout le monde

Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.

Bonjour tout le monde - partie 2

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.

Visualiser le code

HTML dans la page

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

data-ajax-extra-fr.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-fr.html

<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>
Date de modification :