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

Question

На моей странице есть форма, которая генерирует большой файл PDF (это может занять до 20 секунд). Есть ли способ показать пульсатор во время создания загружаемого файла и скрыть его при появлении запроса на загрузку?

Я сделал некоторые проверки, изначально думал, что смогу использовать прогрессивный дисплей, но решил, что это не его цель.

Я подумал, что мог бы добавить функцию JS, которая будет вызывать показ моего пульсатора при нажатии кнопки "Загрузить", но я не совсем уверен, как скрыть его, когда появляется окно загрузки.

Есть ли способ сделать это в гобелене?

Answer 1

Возможно, лучшим решением будет НЕ отправить форму. Вы можете использовать JavaScript для создания URL-адреса GET и использовать iframe.

например:

<form>
    <input id="someText" />
    <button onclick="downloadPdf()">Click Me</button>
</form>

<script>
   function downloadPdf() {
      var url = "/path/to/pdf?someText=" + encodeURIComponent($("#someText").val());
      startThrobber();
      $('<iframe src="' + url + '" onLoad="stopThrobbber()">').appendTo('body');
   }
</script>

Answer 2

У HTTP есть ограничение: нельзя возвращать ни одного ответа, содержащего PDF и немного json.

Что вы можете сделать, это:

1. Отправьте форму (в которой есть параметр зоны)
2. Запустите асинхронную работу, которая генерирует PDF
3. Возврат немедленно из отправки (до создания PDF)
4. Запустите некоторый JavaScript, который опрашивает работу, пока она не будет завершена
5. После того, как работа будет завершена, загрузите PDF с помощью javascript (document.location.href = /path/to/pdf)

Вы можете увидеть ссылку прогресса для примера опроса асинхронной задачи. Вам нужно будет сохранить PDF где-нибудь в асинхронной задаче (например, сеанс, база данных или файловая система).