Use JavaScript code instead of classes to run your domajax calls
Domajax intends to provide common ajax features inside the dom using class and data attributes, but when you
have specific requirements, it comes to be difficult to use domajax built-in events (stored in classes, for example
domajax click), and you need to run your ajax calls manually, using JavaScript code.
The code is natural for jQuery users: $(selector).domAjax(options);
- Selector can be anything, but if you do not provide any domajax option, selected elements should contain required options.
- Options are optional (as they may be defined in the selected elements dom), and are the very same as those specified in
data- attributes, but without data-. For example, instead of giving data-input="#inputs"
you will use $(selector).domAjax({input: '#inputs'});.
$(selector).domAjax(options);$(document).domAjax({
endpoint: 'introduction-handler.php',
input: '#inputs',
lock: '#inputs',
output: '#output'
});
This form looks like this:
<div id="inputs">
<label for="name">Enter your name</label>
<input type="text" id="name" name="name" value="Mike"/>
<br/>
<input type="button" id="send" class="btn" value="Send" />
</div>
<div id="output"></div>
<script type="text/javascript">
$('#send').click(function() {
$(document).domAjax({
endpoint: 'manual-usage-classic-handler.php',
input: '#inputs',
lock: '#inputs',
output: '#output'
});
});
</script>
This form looks like this:
<div
id="myDomajax"
style="display:none;"
data-endpoint="manual-usage-config-handler.php"
data-input="#inputs"
data-lock="#inputs"
data-output="#output"
></div>
<div id="inputs">
<label for="name">Enter your name</label>
<input type="text" id="name" name="name" value="Mike"/>
<br/>
<input type="button" id="send" class="btn" value="Send" />
</div>
<div id="output"></div>
<script type="text/javascript">
$('#send').click(function() {
$('#myDomajax').domAjax();
});
</script>
This form looks like this:
<div id="test-overwrite" data-highlight-color="red"></div>
<div id="inputs">
<label for="name">Enter your name</label>
<input type="text" id="name" name="name" value="Mike"/>
<br/>
<input type="button" value="Send" id="send" class="btn" />
</div>
<div id="output"></div>
<script type="text/javascript">
$('#send').click(function() {
$('#test-overwrite').domAjax({
'endpoint': 'manual-usage-overwrite-handler.php',
'input': '#inputs',
'output': '#output',
'highlight-color': 'green',
'highlight-complete': '#output'
});
});
</script>
This form looks like this:
<div
id="output"
class="domajax doubleclick"
style="width: 200px;height:100px;border:1px solid black;background-color:#FFAAAA;"
data-endpoint="manual-usage-listener-handler.php"
data-output="#output"
>Double-click inside me
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.domajax.doubleclick').dblclick(function (e) {
$(this).domAjax();
});
});
</script>
This form looks like this:
<input id="get_weather" type="button" value="Get weather" class="btn"/>
<br/><br/>
<div
class="weather"
style="height: 50px;border:1px solid black;"
data-endpoint="manual-usage-multiple-handler.php?page=weather"
data-output=""
data-highlight-complete=""
data-highlight-color="red"
data-lock="#get_weather"
>No weather yet
</div>
<br/>
<div
class="weather"
style="height: 50px;border:1px solid black;"
data-endpoint="manual-usage-multiple-handler.php?page=temperature"
data-output=""
data-highlight-complete=""
data-highlight-color="green"
>No temperature yet
</div>
<script type="text/javascript">
$('#get_weather').click(function () {
$('.weather').domAjax();
});
</script>
All the documentation at a glance