jQuery проверяет SubmitHandler с отправкой Ajax не ударил - PullRequest
Новая
       35

jQuery проверяет SubmitHandler с отправкой Ajax не ударил

0 голосов
/ 06 сентября 2018

На мой взгляд, я хочу отправить форму на контроллер с помощью ajax. У меня есть это: 

@section scripts{
    @Scripts.Render("~/bundles/jqueryval")

    <script>
        $(document).ready(function() {

            // Mask
            $("#Teu_Rate").mask("####.##", { reverse: true });
            $("#Mcsap_Rate").mask("####.##", { reverse: true });

            // Submission
            var redirectUrl = '@Url.Action("Index", "tblPersonnels")';
            var settings = {};
            settings.baseUri = '@Request.ApplicationPath';
            var infoGetUrl = "";
            if (settings.baseUri === "/Scalehouse") {
                infoGetUrl = settings.baseUri + "/tblPersonnels/Create/";
            } else {
                infoGetUrl = settings.baseUri + "tblPersonnels/Create/";
            }

            // ajax portion
            $("form").validate({
                submitHandler: function(form) {
                    $.ajax({
                        url: infoGetUrl,
                        method: "POST",
                        data: $("form").serialize(),
                        beforeSend: disableCreateBtn(),
                        success: function() {
                            console.log("success");
                            toastr.options = {
                                positionClass: "toast-top-full-width",
                                onHidden: function() {
                                    window.location.href = redirectUrl;
                                },
                                timeOut: 3000
                            }
                            toastr.success("Personnel successfully created")
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            toastr.options = {
                                positionClass: "toast-top-full-width",
                                onHidden: function() {
                                    enableCreateBtn();
                                },
                                timeOut: 3000
                            }
                            var status = capitalizeFirstLetter(textStatus);
                            var error = $.parseJSON(jqXHR.responseText);
                            console.log(error);
                        }
                    })
                }
            });

            function capitalizeFirstLetter(string) {
                return string.charAt(0).toUpperCase() + string.slice(1);
            }

            function disableCreateBtn() {
                $('#Personnel-Create-Btn').prop('disabled', true);
            }

            function enableCreateBtn() {
                $('#Personnel-Create-Btn').prop('disabled', false);
            }
        });
    </script>
}

Когда запрос выполнен и успешно завершен, я должен получить сообщение в своей консоли и уведомление toastr, но я не получаю ни одного, и я не получаю никаких ошибок консоли, но вводимая мной запись находится в процессе введен успешно, что означает, что форма отправляется в соответствии с обычными соглашениями MVC.

Как мне заставить мою работу с ajax работать?

Обновление

После комментариев ниже со Sparky я изменил свой код на: 

$("form").submit(function (t) {

    t.preventDefault();

        $.ajax({
            url: infoGetUrl,
            method: "POST",
            data: $("form").serialize(),
            beforeSend: disableCreateBtn(),
            success: function() {
                console.log("success");
                toastr.options = {
                    positionClass: "toast-top-full-width",
                    onHidden: function() {
                        window.location.href = redirectUrl;
                    },
                    timeOut: 3000
                }
                toastr.success("Personnel successfully created");
            },
            error: function(jqXHR, textStatus, errorThrown) {
                toastr.options = {
                    positionClass: "toast-top-full-width",
                    onHidden: function() {
                        enableCreateBtn();
                    },
                    timeOut: 3000
                }
                var status = capitalizeFirstLetter(textStatus);
                //var error = $.parseJSON(jqXHR.responseText);
                console.log(jqXHR);
            }
        });

    });

Теперь, если форма пуста ... и я нажимаю кнопку создания ... каким-то образом ajax входит в функцию успеха, в то же время давая мне ошибки проверки некоторых полей, которые требуются ... затем перенаправляется на другую страницу, как будто запрос был успешным .. есть идеи?

Обновление 2

Я получил его с помощью этого синтаксиса: 

$("form").data("validator").settings.submitHandler =
    function(form) {
        $.ajax({
            url: infoGetUrl,
            method: "POST",
            data: $("form").serialize(),
            beforeSend: disableCreateBtn(),
            success: function () {
                console.log("success");
                toastr.options = {
                    positionClass: "toast-top-full-width",
                    onHidden: function () {
                        window.location.href = redirectUrl;
                    },
                    timeOut: 3000
                }
                toastr.success("Personnel successfully created.");
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(jqXHR);
                toastr.options = {
                    positionClass: "toast-top-full-width",
                    onHidden: function () {
                        enableCreateBtn();
                    },
                    timeOut: 3000
                }
                var status = capitalizeFirstLetter(textStatus);
                var error = $.parseJSON(jqXHR.responseText);
                console.log(error);

                var modelState = error.modelState;
                //console.log(modelState);
                $.each(modelState,
                    function (key, value) {
                        var id = "";
                        if (key === "$id") {
                            id = "#" + key.replace('$', '').substr(0, 1).toUpperCase() + key.substr(2);
                        } else {
                            //console.log(key);
                            var status = capitalizeFirstLetter(textStatus);
                            toastr.error(status + " - " + modelState[key]);
                        }
                        var input = $(id);
                        //console.log(id); // result is #id
                        if (input) { // if element exists
                            console.log(id);
                            input.addClass('input-validation-error');
                        }
                    });
            }
        });
    }

Не знаю почему, но это работает .. Мне интересно услышать почему, хотя

1 Ответ

0 голосов
/ 06 сентября 2018

Я понял, как это работает, и обновил мой вопрос о том, как ... но не могли бы вы объяснить, почему этот синтаксис работает над остальными?

Ваш обработчик .submit() - плохая идея, потому что он будет мешать тому, как плагин jQuery Validate обрабатывает событие отправки формы. (По сути, вы запретили отправку по умолчанию, а затем никогда не возвращали ее плагину Validate.) ASP или нет, это абсолютно не тот способ, которым можно это сделать. Плагин Validate предоставляет функцию submitHandler для любых целей, где вам нужно захватить это событие.

Ваш .settings.submitHandler работает, потому что это единственный способ определить функцию submitHandler, когда у вас нет доступа для написания собственного метода .validate() (благодаря плагину Unobtrusive Validation). Согласно документации , submitHandler является "правильным местом для отправки формы через Ajax после ее проверки" .

так что если бы я не использовал ненавязчивый, то я мог бы использовать свой оригинальный код?

Плагин jQuery Validate инициализируется методом .validate(), обычно при загрузке страницы. Этот метод может быть вызван только один раз, и все последующие вызовы будут игнорироваться. Когда вы используете ASP и плагин Unobtrusive Validation, он создает и вызывает для вас метод .validate(), поэтому вы больше не можете устанавливать какие-либо параметры или правила, вызывая .validate() самостоятельно.

...