Глобальный поиск с возможностью обработки данных иногда выдает ошибку ajax

Question

Глобальный поиск с возможностью обработки данных иногда выдает ошибку ajax

У меня есть 2 страницы с 3 и 4 таблицами данных на них соответственно.

У меня есть требование заменить поле поиска по умолчанию для каждого объекта данных одним глобальным полем поиска.

До сих пор я реализовал это просто отлично, у меня есть набор глобальных полей поиска и скрываю отдельные поля поиска следующим образом:

//Other JS to initialise datatables with Ajax serverside processing

$(".dataTables_filter").hide();

$("#datatable-search").keyup(function() {
    $(".dataTable").DataTable().search($(this).val()).draw();
});

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

Когда это был только один объект данных, у меня не было этой проблемы, но с глобальным поиск всех таблиц данных Я получаю случайную ошибку ajax, вызванную ошибкой 500 на стороне сервера. Используя консоль инструментов разработчика, я могу видеть, какие вызовы завершаются неудачно, но затем я могу открыть/запустить их позже.

Проект использует Laravel, и поэтому, проверяя журнал Laravel, я вижу следующее:

[2017-11-06 00:03:50] производство.ОШИБКА: Ключ шифрования приложения не указан.

Это будет означать, что я не установил ключ приложения в своем файле .env - однако у меня есть. Остальная часть моего приложения работает нормально, черт возьми, даже медленный ввод текста работает нормально - похоже, что это происходит из-за большого количества звонков, но я не могу понять, почему...

Я могу легко воссоздать проблему, просто быстро нажав несколько раз назад.

Я мог бы просто перенаправить ошибку на консоль, но сначала я хотел бы попытаться устранить ошибку. Ошибка в настоящее время находится только в моей локальной среде, и я еще не пробовал ее в производстве, хотя я предполагаю, что я столкнетесь с аналогичной проблемой.

Я рассматривал возможность отключения ввода текста до завершения поиска текущего keyup, но это довольно агрессивно и не очень удобно для UX.

Каков был бы наилучший способ сделать это? Может ли быть способ "поставить в очередь" вызовы ajax?

4

php laravel jquery laravel-5.5 datatable

Author: James, 2017-11-06

Source

1 answers

score 3 · Accepted Answer

Дайте пользователю некоторое время для ввода.

// Typing timeout
var typingTimeout = null;
// On keyup
$("#datatable-search").keyup(function() {
    // Clear previous timer
    clearTimeout(typingTimeout);
    // Set a new timer
    var that = this;
    typingTimeout = setTimeout(function(){
        $(".dataTable").DataTable().search($(that).val()).draw();
    }, 200); // Execute the search if user paused for 200 ms
});

Редактировать: Исправлена небольшая ошибка.