2 заметки с тегом

jquery

Реализовать ajax форму с помощью ActiveForm в Yii2

Саму форму необходимо обернуть в ActiveForm:

$form = ActiveForm::begin([
        'id' => 'form',
        'enableClientValidation' => true,
        'enableAjaxValidation'   => false,
        'method' => 'post',
    ]);
    // сама форма, инпуты, селекты и т.д...
    ...
ActiveForm::end();

Также необходимо написать небольшой кусок кода в виде jquery функции:

$(document).on("beforeSubmit", "#form", function (e) {
    var form = $(this);
    var formData = form.serialize();
    $.ajax({
        url: form.attr("action"),
        type: form.attr("method"),
        data: formData,
        success: function (response) {
            alert(response.message)
        },
        error: function () {
            // действие на случай ошибки
        }
    });

}).on('submit', function(e){
    e.preventDefault();
});

UPD
Если в форме есть input[type=file], т. е. в форме должны передаваться файлы, тогда добавим глобальную функцию для сериализации всех полей формы, в том числе и приложенных файлов.

(function($) {
    // сериализация данных формы с учетом передачи файлов
    $.fn.serializefiles = function() {
        var obj = $(this);
        var formData = new FormData();
        $.each($(obj).find("input[type='file']"), function(i, tag) {
            $.each($(tag)[0].files, function(i, file) {
                formData.append(tag.name, file);
            });
        });
        var params = $(obj).serializeArray();
        $.each(params, function (i, val) {
            formData.append(val.name, val.value);
        });
        return formData;
    };
})(jQuery);

И соответственно, новый метод $.ajax будет выглядеть так:

$(document).on("beforeSubmit", "#form", function (e) {
    var form = $(this);
    // вот здесь собираем поля формы
    var formData = form.serializefiles();
    $.ajax({
        url: form.attr("action"),
        type: form.attr("method"),
        data: formData,
        success: function (response) {
            alert(response.message)
        },
        error: function () {
            // действие на случай ошибки
        }
    });

}).on('submit', function(e){
    e.preventDefault();
});
2017   activeform   ajax   jquery   yii2

Yii2 и автокомплит (autocomplete)

Для тех, кто хочет современный и быстрый и с больших количеством «фишек» автокомплит, то советую обратить внимание на https://github.com/devbridge/jQuery-Autocomplete

Хороший подробный мануал поможет быстро прикрутить в «нужное место». Большие возможности по настройке.
Я напишу лишь о том, как я его прикрутил к yii2.

Файл jquery.autocomplete.js размещаю в директории @web/js.
Сам файл я подключаю не через глобальный assets/AppAsset.php, а локально в конкретном представлении:

$this->registerJsFile( '@web/js/jquery.autocomplete.js', ['depends' => 'yii\web\JqueryAsset'] );

Причем, устанавливаю зависимость загрузки от JqueryAsset (т. е. после загрузки основного файла jquery.js).
В том же представлении, немного ниже уже размещаю сам код:

$this->registerJs( "
    $(function () {
        $('#city_name').autocomplete({
            serviceUrl: '/site/city',
            minLength: 2,
            lookupLimit: 10,
            type: 'POST',
            paramName: 'city_name',
            dataType: 'json',
            transformResult: function (response) {
                return {
                    suggestions: $.map(response, function (value, key) {
                        return {value: value.value + ', ' + value.tvalue, valueCity: value.value};
                    })
                };
            },
            onSelect: function (suggestion) {
                $('#city_name').val(suggestion.valueCity);
            }
        });

    });
" );

Суть запроса в том, что я в поле ввода в представлении начинаю вводить название какого-нибудь населенного пункта, а в ответ получаю список совпадений (см. скриншот).

Размещение в базе данных городов и их интеграцию с Yii я описывать не буду — это не является темой данного поста.
Но что важно, на выходе мы можем с помощью этого плагина манипулировать данными. А именно:
«minLength» — минимальное количество символов, после ввода которых, запрос «идет в Контроллер» SiteComntroller;
«paramName» — поле, аттрибутом которого является name=«city_name». Так плагин понимает значение какого поля отправлять в Контроллер;
«transformResult» — параметр, который позволяет полученный response преобразовать в том формате, который нам необходим. Например, я получаю в ответе массив данных Город, Регион и Страна, а в представлении данный массив раскладываю в строку, разделяя значения запятыми.
«onSelect» позволяет задать логику после того, как Пользователь выбрал предложенный вариант из списка.

Со стилями тоже можно поиграться, по умолчанию рекомендуют подгрузить в основной css-файл следующее:

.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }

Остальные возможности плагина изучайте в документации.

2016   autocomplete   jquery   yii2