Temporarily replaces element contents during an ajax call.
When an ajax call is processing, this is common to see a wait gif to tell the final user his request is processing. data-replace let you
replace contents from a selector by contents of another selector during the ajax call. Whatever if the ajax call fails or succeed, old contents will be
restaured to the container.
If data-replace is empty, the element containing the ajax call will be replaced itself. If data-replace-by is empty, the element
containing the ajax call will replace contents of the data-replace's selector.
This form looks like this:
<label for="criteria">Search a country</label>
<input
type="text"
id="criteria"
name="criteria"
class="domajax keyup"
data-endpoint="replace-search-handler.php"
data-input=""
data-output="#output"
data-replace="#status"
data-replace-by="#wait"
data-lock=""
/>
<span id="status">Ready.</span>
<div id="wait" style="display:none;">
<img src="../img/wait.gif" alt="Please wait"/>
</div>
<div id="output"></div>
This form looks like this:
<div id="gif" style="display:none;">
<img src="../img/wait.gif" alt="Please wait"/>
</div>
<div id="input">
<input
type="button"
value="Click here!"
class="btn domajax click"
data-endpoint="replace-multi-handler.php"
data-replace=".wait"
data-replace-by="#gif"
data-output="#output"
/>
</div>
<br/>
<div class="wait" style="border:1px solid red;margin-bottom:5px;">Some content</div>
<div class="wait" style="border:1px solid blue;margin-bottom:5px;">Some other content</div>
<div class="wait" style="border:1px solid green;margin-bottom:5px;">Some more content</div>
<div id="output"></div>
This form looks like this:
<div id="wait" style="display:none;">
<img src="../img/wait.gif" alt="Please wait"/>
</div>
<div id="input">
<input
type="button"
value="Click here!"
class="btn domajax click"
data-endpoint="replace-itself-handler.php"
data-replace="#input"
data-replace-by="#wait"
data-output="#output"
/>
</div>
<div id="output"></div>
All the documentation at a glance