Как предотвратить отрисовку модала более одного раза?

Question

Как предотвратить отрисовку модала более одного раза?

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

Вот в чем проблема. У нас есть довольно сложное веб-приложение, написанное на PHP. Цель относительно неважна, но проще говоря: мы используем Comet/AJAX/JSON/JavaScript/PHP/MySQL (БЕЗ jQuery, однако, только собственный JavaScript) для визуализации элементов управления, отображающих данные в реальном времени. Через в этом приложении мы визуализируем всплывающие модалы, используя собственный JavaScript. Это довольно сложная логика, которая проверяет наличие модала с тем же именем на странице и предотвращает создание новых версий того же самого, и, конечно, после создания создается слой, предотвращающий взаимодействие со ссылками ниже.

Проблема в том, что у нас есть по крайней мере один модал, который можно вызвать несколько раз, прежде чем он будет отображен на странице, из-за времени, которое требуется вызову AJAX для сбора данных из базы данных и соберите ее для презентации. Если бы пользователь "дважды щелкнул" по указанной ссылке, ему были бы представлены два модала, один поверх другого. Я действительно смог сделать 8-10 из них. Взаимодействие с самым верхним модальным, по-видимому, нарушено, потому что пользователь фактически создает складные заголовки на самом нижнем модальном. Как только вы начнете закрывать диалоговые окна и дойдете до самого низа, вы сможете увидеть, куда вы нажали.

Итак, мой вопрос заключается в следующем: что такое лучший способ предотвратить такое поведение?

Я рассматривал возможность простого добавления функции к событию onClick, которая удаляла бы атрибут onClick из ссылки после первого щелчка с небольшим таймаутом (скажем, 500 мс). Я также рассматривал возможность реализации логики тестирования битов, которая будет подсчитывать клики и только на самом деле сначала регистрировать событие после первого щелчка и сбрасывать его, когда модальный режим закрыт.

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

Большое вам спасибо.

5

php javascript ajax modal-dialog

Author: fskirschbaum, 2013-05-03

Source

2 answers

Вы можете отменить регистрацию обработчика щелчков после его запуска:

var element = ...,
myClickHandler = function(event) {
    // ...
    element.removeEventListener('click', myClickHandler, false);
    // ...
}

element.addEventListener('click', myClickHandler, false);

4

Author: Ja͢ck, 2013-05-03 14:59:35

score 0 · Accepted Answer

В этом случае я нашел самое простое решение, которое было бы лучшим, но я все равно хотел бы услышать другие отзывы, если они есть.

В этом случае я обнаружил, что проблема заключалась в порядке операций. Я ожидал ответа AJAX, чтобы сгенерировать html-код тела для этого модала. Я изменил порядок, чтобы вместо этого немедленно создать модальный, используя <p>Loading...</p> в теле модального. Затем, когда AJAX был завершен и у меня появился новый основной текст, я просто ввел его в содержимое модала область с аккуратным кусочком кода и твоим дядей Бобом, у нас был джекпот.