Отображение на основе AJAX Пожалуйста, подождите на нескольких страницах

Я делаю форму ввода данных в php/mysql. Там я добавил множество выпадающих и автозаполненных текстовых полей, которые асинхронно запрашивают базу данных и извлекают данные. Я хотел сообщить пользователю, что происходит какое-то взаимодействие между клиентом и сервером, поэтому я поместил элемент в скрытую форму

 <div id="wait" style="background-color:white;position:absolute;top:240px;left:360px;width:70px;height:50px;visibility:hidden;border: 1px solid black;padding:20px;">
 <img src="images/wait.gif" style="position:relative;top:0px;left:25px"><br /><br />Please wait...
 </div>

и в методе handleHttpResponse для компонента AJAX я сделал следующее

if (http.readyState == 4) {
  document.getElementById('wait').style.visibility = "hidden";
  alert('The server script has now completed');
} else {
  document.getElementById('wait').style.visibility = "visible";
}

Вышеуказанная функция находится в файле сценария ajax.js, который включен в текущую страницу, и на каждую страницу, где требуется ajax.

Теперь это работало хорошо для меня для одного документа, но у меня были следующие запросы

  • Если я хочу выполнить аналогичную операцию, когда всякий раз, когда на ЛЮБОЙ СТРАНИЦЕ выполняется AJAX-запрос, пользователь должен отображаться с сообщением "ПОЖАЛУЙСТА, ОЖИДАЙТЕ и воспроизводите анимацию". Как я должен переписать свои модули, чтобы мне не пришлось размещать DIV на каждой странице. Как я могу это сделать?

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

    • Скажите, что моя текущая страница использует эту функцию в 3 местах одновременно, покажет ли она 3 Пожалуйста, подождите, сообщения или нет?

Надеюсь, мой вопрос достаточно ясен. Спасибо

Источник

1 ответ

Есть способ достичь того, что вы пытаетесь сделать. Например, если вы используете PHP, вы можете поместить свой HTML в файл.inc или.php и включать его в любое место, даже на нескольких страницах.

  1. Итак, если вы используете PHP, попробуйте что-то вроде этого:

    <?php //inc_loader.php ?><div id="wait" style="background-color:white;position:absolute;top:240px;left:360px;width:70px;height:50px;visibility:hidden;border: 1px solid black;padding:20px;">
 <img src="images/wait.gif" style="position:relative;top:0px;left:25px"><br /><br />Please wait...
 </div>

Теперь просто включите вышеуказанный файл, где вы хотите, например:

<?php include("inc_loader.php"); ?>

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

2. Также не рекомендуется использовать один и тот же код в нескольких местах одного и того же документа, так как вы используете id="wait". Идентификатор должен быть уникальным в документе, поэтому его использование в нескольких местах не имеет смысла. Если вы хотите избежать дублирования, то можете попробовать использовать class т.е. class="wait", если это то, что может вам помочь.

Дайте нам знать, если это помогло вам.

Источник
Другие вопросы по тегам