Skeleton v2

data-ajax-success-fn,
data-ajax-fail-fn Sikeres (data-ajax-ok-fn) / sikertelen (data-ajax-fail-fn) válasz esetén megfuttatandó javascript függvény neve. Sikeres minden 2xx status kóddal visszatérő válasz. A függvénynek két argumentuma kell hogy legyen. Az elsőben a válaszból a header-t (status és statusText-et), a másodikból pedig a response-t kapja meg a függvény. Amennyiben a response json a függvény strutkturáltan, ellenekző esetben string-ként kapja meg.

Sikertelen válasz esetén, ha response json és tartalmaz message vagy messages kulcsot, megjelenítésre kerül a hozzájuk tartozó érték alfi_alert (toaster) segítségével.

data-submit-fn A form postolása esetén az ajax hívás előtt megfuttatható függvény neve. Argumentumokat nem kap!

Szám Ide csak számot lehet írni

E-mail cím

Válasz kiválasztása

Select 2 Select2-vel szépítve!

Ide jön majd a válasz

<form class="form ajax-form" method="POST" action="/documentation/ajax_form_test" data-ajax-success-fn="form_ajax_success" data-ajax-fail-fn="form_ajax_fail" data-submit-fn="form_ajax_on_submit">
    <div class="form-group">
        <label>Szám</label>
        <input type="text" name="numeric" placeholder="Szám" class="form-control"/>
        <small class="form-text text-muted" id="numericHelp">Ide csak számot lehet írni</small>
    </div>

    <div class="form-group">
        <label>E-mail cím</label>
        <input type="text" name="email" placeholder="E-mail cím" class="form-control"/>
    </div>

    <div class="form-group">
        <label>Válasz kiválasztása</label>
        <select class="form-control" name="select1">
            <option selected value=""></option>
            <option value="ok">Sikeres ;-)</option>
            <option value="fail">Sikertelen :-(</option>
        </select>
    </div>

    <div class="form-group">
        <label>Select 2</label>
        <select class="form-control" name="select2">
            <option value="option A">option A</option>
            <option value="option B">option B</option>
            <option value="option C">option C</option>
        </select>
        <small class="form-text text-muted" id="input1Help">Select2-vel szépítve!</small>

        <script>
            $(document).ready( function() {
                $('[name=select2]').select2({
                    allowClear: true
                });
            });
        </script>
    </div>

    <div class="form-group">
        <label>Ide jön majd a válasz</label>
        <textarea name="response" class="form-control" readonly></textarea>
    </div>

    <button type="submit" class="btn btn-primary"><i class="fa fa-fw fa-save"></i> Küldés</button>

    <script>
        function form_ajax_on_submit() {
            // POST
        }
        function form_ajax_success(header, data) {
            // SUCCESS
            $('[name=response]').val(JSON.stringify(data));
        }

        function form_ajax_fail(header, data) {
            // FAIL
            $('[name=response]').val(JSON.stringify(data));
        }
    </script>
</form>

ajax-form

Attribútumok

Minta