как предотвратить взаимодействие пользователей при ожидании ответа ajax - PullRequest
Новая
       9

как предотвратить взаимодействие пользователей при ожидании ответа ajax

7 голосов
/ 02 февраля 2010

Сценарий такой: я использую Jquery для реализации некоторых функций ajax. Например: когда пользователь нажимает кнопку «получить данные», Jquery вызывает функцию .ajax для получения некоторых данных с сервера. Этот процесс может занять некоторое время, поэтому я добавил функции .ajaxSend и .ajaxComplete, чтобы показать некоторую анимацию для процесса ожидания (на самом деле это gif «Загрузка данных» внутри div с z-index: 999, чтобы быть вершиной других div внутри ). Во время процесса ожидания («Загрузка данных») я хотел бы запретить пользователям нажимать другие кнопки (например: у меня есть другие вкладки, кнопки под небольшим изображением «Загрузка данных»). Я достиг этого путем: 

    $("body").ajaxSend(function()
     {
        $(this).append('<div id="loading">Data Loading<\/div>');
        $("div#error").remove();
        $(this).children().not('#loading').css({'opacity':0.22});   
     });
    $("body").ajaxComplete(function()
     {
        $("div#loading").remove();
        $(this).children().not('#loading').css({'opacity':1});
     });

Однако я не думаю, что изменение непрозрачности - лучший способ. Если вы не установите непрозрачность на 0, пользователи все равно могут нажимать на другие кнопки / вкладки. Я не знаю, как полностью избежать каких-либо взаимодействий с пользователем во время этого процесса? Спасибо !!

Ответы [ 6 ]

6 голосов
/ 02 февраля 2010

В прошлом я успешно пользовался пользовательским интерфейсом jQuery Block. Хорошо работает с Ajax:

http://malsup.com/jquery/block/

Может быть стоит использовать такой плагин, а не кодировать аналогичное решение ...

5 голосов
/ 02 февраля 2010

Используйте оверлей.

http://jqueryui.com/demos/dialog/#modal

5 голосов
/ 02 февраля 2010

Сделать видимым div с z-индексом выше всего остального.на последнем случае, скройте его.

Для IE6 рассмотрите видимость выбранных входов

1 голос
/ 02 февраля 2010
0 голосов
/ 02 марта 2015

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

Мне кажется, что лучший способ подойти к этому вопросу - это установить глобальную логическую переменную для всей страницы и просто выполнить действия на странице, когда ajax не запущен (по крайней мере, чувствительные действия), или просто включить отключить асинхронный вызов ajax, поскольку в этом сценарии он вам, по-видимому, не нужен (хотя я знаю, что некоторые люди распинают меня за это).

0 голосов
/ 02 февраля 2010

Я использую вариант на ajax-конвейере Бена Наделя .По сути, он оборачивает вызов jQuery $ .ajax объектом, который может записывать исходящие запросы ajax.

Когда выходит запрос ajax, вы записываете имя запроса.Если еще какие-либо запросы пытаются выйти с тем же именем, вы не выполняете его (необязательно, предоставляя сообщение пользователю).

...