Как установить таймер выхода / интервал для проверки onblur равным fini sh до начала операции нажатия кнопки? - PullRequest
Новая
       35

Как установить таймер выхода / интервал для проверки onblur равным fini sh до начала операции нажатия кнопки?

0 голосов
/ 30 апреля 2020

У меня есть текстовое поле и кнопка, которая выполняет желаемую операцию, которая требует много времени. Ajax звонки на сервер, если быть точным. В событии onblur текстового поля я выбираю имя человека из источника данных, используя уникальный идентификатор, который включает в себя открытие транзакции для источника данных, выполняя желаемую команду, выбирая выходные данные и показывая их в тексте.

При нажатии кнопки я отправляю обновление, используя аналогичный подход. Теперь, потому что ajax вызов занимает некоторое время, чтобы опубликовать обновление и получить выходные данные. Когда я ввожу идентификатор в текстовое поле, а затем нажимаю кнопку, когда фокус находится на текстовом поле. Вызов на кнопке выполняется до того, как произойдет валидация. Есть идеи, как сделать валидацию до нажатия кнопки «Отправить вызов»?

Вот какой-то псевдокод: 

@Html.TextBox("myTextbox", null, new { @class = "textbox"})
<button id="btnSubmit"> submit </button>

Мой Ajax Вызовы события размытия (проверки) выглядят примерно так: 

 $(document).on('blur', '#myTextbox', function () {
        if ($.trim($(this).val()) != '') {
            $.ajax({
                async: true,
                type: "POST",
                url: "/Index/ValidateUser",
                data: {
                    CAI: $('#myTextbox').val()
                },
                dataType: 'json',
                success: function (response) {
                      $('#myTextbox').val(response.username);
                    }
                }
            });
        }
    });

My Ajax Вызовы события клика (отправки) выглядят примерно так: 

$(document).on('click', '#btnSubmit', function() {
   if ($.trim($('#myTextbox').val()) != '') {
      $.ajax({
            async: true,
            type: "POST",
            url: "/Index/Submit",
            data: {
               CAI: $('#myTextbox').val()
            },
            dataType: 'json',
            success: function(response) {
               alert(response.successMessage);
            }
         }
      });
    }
});

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

1 Ответ

0 голосов
/ 30 апреля 2020

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

Чтобы убедиться, что вы выполняете проверку перед обновлением, используйте переменную в качестве флага. установить флаг в проверочном вызове ajax при успехе 

$(document).on('blur', '#myTextbox', function () {
    if ($.trim($(this).val()) != '') {
        $.ajax({
            async: true,
            type: "POST",
            url: "/Index/ValidateUser",
            data: {
                CAI: $('#myTextbox').val()
            },
            dataType: 'json',
            success: function (response) {
                  $('#myTextbox').val(response.username);
                  validateFlag = 1
                }
            }
        });
    }
});

проверить флаг в обновлении ajax вызов и обновление только в случае проверки 

$(document).on('click', '#btnSubmit', function() {
   if ($.trim($('#myTextbox').val()) != '' && validateFlag == 1) {
      $.ajax({
            async: true,
            type: "POST",
            url: "/Index/Submit",
            data: {
               CAI: $('#myTextbox').val()
            },
            dataType: 'json',
            success: function(response) {
               alert(response.successMessage);
            }
         }
      });
    }
});

также обязательно сбросить Отметьте событие onchange текстового поля, чтобы при каждом его изменении вам приходилось проверять снова 

$(document).on('change', '#myTextbox', function () {
     validateFlag = 0
});
...