domajax.fuz.org

data-unlock

Enable form fields when ajax calls are given back.

Available events: data-unlock-before, data-unlock-complete (default), data-unlock-success, data-unlock-failure, data-unlock-empty, data-unlock-not-empty

data-unlock will remove disabled attribute on form fields. This option is automatically set when using data-lock, so fields are locked before the ajax call and unlocked after, avoiding multiple posts. Sometimes, it is required to control manually lock and unlock states according to the call's success or the response's content, so you are able to use this option independantly.

Usage


  • data-unlock="container-to-unlock"
  • data-unlock="(empty)"
  • data-unlock-(event)="container-to-unlock"

Example


  • data-unlock="#clear-output"
  • data-unlock=""
  • data-unlock-if-not-empty="#clear-output"

Live examples

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

This form looks like this:


<input
        type="button"
        value="Test it!"
        class="btn domajax click"
        data-endpoint="unlock-button-handler.php"
        data-unlock=".field"
        />

<br/><br/>

<input type="text" disabled class="field" value="I am a text field"/>
<input type="button" disabled id="lock" class="btn field" value="Disable again"/>

<script type="text/javascript">

    $('#lock').click(function () {
        $('.field').attr('disabled', 'disabled');
    });

</script>

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

This form looks like this:


<label for="number">Enter a number between 1 and 100...</label>
<input type="text" id="number" name="number" value="50"/>

<br/>

<input
        type="button"
        value="Send"
        class="btn domajax click"
        data-endpoint="unlock-more-less-handler.php"
        data-input="#number"
        data-lock-before=".everything"
        data-unlock-failure="#thats-less"
        data-unlock-empty="#thats-more"
        data-unlock-not-empty="#thats-it"
        />

<br/><br/>

<input type="button" id="thats-less" class="btn everything" value="That's Less!" disabled/>
<input type="button" id="thats-it" class="btn everything" value="That's it!" disabled/>
<input type="button" id="thats-more" class="btn everything" value="That's More!" disabled/>

See also    data-lock   data-replace   data-callback   data-script 

Table of contents

All the documentation at a glance

Domajax options

And more with domajax