Data Ajax
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>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>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>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>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>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>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>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>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>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>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>Filtrer le contenu par le « hash » de l'URL (ajax/data-ajax-filter-fr.html#filter-id, v4.0.12+)
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.
Visualiser le code
HTML dans la page
<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>data-ajax-filter-fr.html
<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+)
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.
Visualiser le code
HTML dans la page
<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>data-ajax-filter-fr.html
<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="filter-selector">&div class="ajaxed-in">
<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>
<!-- Pour illustrer le retrait de contenu par selecteur -->
<ul class="filter-out-selector">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>Retirer du contenu via un sélecteur
Retrait d'un élément
Attribut data ajax: data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector)"
Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.
Retrait de plusieurs éléments
Attribut data ajax: data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector, 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.
Retrait d'un élément et encoder le rendement
Attribut data ajax: 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 source
Visualiser le code
Retrait d'un élément, HTML dans la page
<div data-ajax-replace="ajax/data-ajax-filter-en.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>Retrait de plusieurs éléments, HTML dans la page
<div data-ajax-replace="ajax/data-ajax-filter-en.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>Retrait d'un élément et encoder le rendement
<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>data-ajax-filter-fr.html
<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="filter-selector"><div class="ajaxed-in">
<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>
<!-- Pour illustrer le retrait de contenu par selecteur -->
<ul class="filter-out-selector">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div></section>Syntaxe alternative
Veuillez consulter la documentation pour de plus ample renseignement concernant cette syntaxe alternative.
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.
Visualiser le code
HTML dans la page
<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>data-ajax-extra-fr.html
Code source de cet exemple
Ceci est une démo qui illustre l'utilisation de la configuration encode
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
Ce contenu sera remplacé si vous parcourez cette page à partir de la version anglaise.
Visualiser le code
<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>Extrait de code
Afficher un extrait de code.
View code
<pre><code data-wb-ajax='{
"url": "ajax/data-ajax-template-fr.html",
"type": "replace",
"encode": true
}'></code></pre>Détails de la page
- Date de modification :