Language selection

Search


URL Mapping - Ajax

Execute pre-configured ajax action based on url query string.

Source code

HTML
<aside id="asidecontainer" class="col-md-5 pull-right">
	<h2>Aside container</h2>
	<p>Empty</p>
</aside>

<ul>
	<li><a href="?">Empty <code>?</code></a></li>
	<li><a href="?ajxload=1">Ajax 1 <code>?ajxload=1</code></a></li>
	<li><a href="?ajxload=2">Ajax 2 <code>?ajxload=2</code></a></li>
	<li><a href="?ajxload=3">Ajax 3 <code>?ajxload=3</code></a></li>
	<li><a href="?ajxload=4">Ajax 4 <code>?ajxload=4</code></a></li>
	<li><a href="?ajxload=5">Ajax 5 <code>?ajxload=5</code></a></li>
	<li><a href="?ajxload=5special">Trigger WET after Ajax 5 is inserted<code>?ajxload=5special</code></a></li>
	<li><a href="?special">Ajax two files (Ajax 4 and Ajax 2) <code>?special</code></a></li>
	<li><a href="?mspecial=ul">Ajax <code>ul</code> of two files (Ajax 4 and Ajax 2) <code>?mspecial=ul</code></a></li>
	<li><a href="?loadme=3">Mapping the query string, load Ajax 3<code>?loadme=3</code></a></li>
	<li><a href="?loadme=asdf">Mapping the query string, load Ajax asdf<code>?loadme=asdf</code></a> but fallback on default "1"</li>
</ul>

<div data-wb-urlmapping='{
		"ajxload=1": { "action": "ajax", "url": "ajax/ajax-1.html" },
		"ajxload=2": { "action": "ajax", "url": "ajax/ajax-2.html" },
		"ajxload=3": { "action": "ajax", "url": "ajax/ajax-{qval}.html", "match": "^\\d$", "default": "1" },
		"ajxload=4": { "action": "ajax", "url": "ajax/ajax-4.html" },
		"ajxload=5": { "action": "ajax", "url": "ajax/ajax-5.html" },
		"ajxload=5special": { "action": "ajax", "url": "ajax/ajax-5.html", "trigger": true },
		"special": [
			{ "action": "ajax", "url": "ajax/ajax-2.html", "container": "#asidecontainer" },
			{ "action": "ajax", "url": "ajax/ajax-4.html" }
		],
		"mspecial": [
			{ "action": "ajax", "url": "ajax/ajax-2.html {qval}", "container": "#asidecontainer", "match": "(^ul$)", "default": "p" },
			{ "action": "ajax", "url": "ajax/ajax-4.html {qval}", "match": "(^ul$)", "default": "p" }
		],
		"loadme": { "action": "ajax", "url": "ajax/ajax-{qval}.html", "match": "^\\d$", "default": "1" }
	}'></div>
Ajax files

Page details

Date modified: