domajax.fuz.org

data-output

This is the easiest way to add new data in the current page after an ajax request.

Available events: data-output-success (default), data-output-failure, data-output-empty, data-output-not-empty


There is several ways to use this option.

  • With an empty string, this option will assign received contents to itself. If the domajax container is an input field, this may be useful for autocompletions for example. If the domajax container is a div (or another html container) called using $('#myDiv').domAjax(), ajax response will be inserted as inner HTML of that element.
  • With a selector, this option will insert the ajax response on all the matching elements, without regarding their type (input fields or containers).

Usages


  • data-output=""
  • data-output="selector"

Examples


  • data-output=""
  • data-output="#my_div"
  • data-output=".some_class"

Live examples

If the result is not displayed correctly, click here to resize iframe above.

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"
            value="Send"
            class="btn domajax click"
            data-endpoint="output-sent-div-handler.php"
            data-input="#inputs"
            data-output="#output"
            />
</div>

<!-- here is the selected div -->
<div id="output"></div>

If the result is not displayed correctly, click here to resize iframe above.

This form looks like this:


<input
        id="sample"
        type="button"
        value="Click me!"
        class="btn domajax click"
        data-endpoint="output-sent-self-handler.php"
        data-input=""
        data-output=""
        />

If the result is not displayed correctly, click here to resize iframe above.

This form looks like this:


<div
        id="sample"
        class="btn domajax click"
        data-endpoint="output-sent-self-container-handler.php"
        data-input=""
        data-output=""
        >Click me!
</div>

If the result is not displayed correctly, click here to resize iframe above.

This form looks like this:


<label for="firstname">Enter your first name</label>
<input class="input" type="text" id="firstname" name="firstname" value="Mike"/>

<br/>

<label for="lastname">Enter your last name</label>
<input class="input" type="text" id="lastname" name="lastname" value="Steller"/>

<br/>

<input
        type="button"
        value="Send"
        class="btn domajax click"
        data-endpoint="output-multiple-target-handler.php"
        data-input=".input"
        data-output=".output"
        />

<br/><br/>

<label>HTML container output :</label>
<div class="output">&nbsp;</div>

<br/>

<label>Input field container output :</label>
<input type="text" class="output" readonly/>

See also    data-output-json   data-callback   data-script 

Table of contents

All the documentation at a glance

Domajax options

And more with domajax