Песочные часы, пока форма отправляет - PullRequest
Новая
       14

Песочные часы, пока форма отправляет

3 голосов
/ 24 мая 2011

У меня есть приложение Grails, которое анализирует файл CSV.Я работаю с формой, и когда люди загружают форму, может потребоваться 30 с лишним секунд, чтобы получить следующую страницу, в течение которой только проницательный или лишний наблюдатель может заметить, что страница «ждет ответа от…»*

Есть ли быстрый способ поставить какое-то всплывающее окно или песочные часы или что-то с помощью javascript (может быть, jQuery), не изменяя при этом механику формы?Я ищу быстрое решение БЕЗ миграции всей отправки формы в JQuery или что-то в этом роде.

В моих первоначальных попытках ответ вроде бы был "нет".При щелчке обычной отправки формы браузер, похоже, забрасывает страницу, отключая JavaScript.Тем не менее, если ответ такой же страницы, тогда будет выполняться javascript, но это мне не поможет.

Примерно так: 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">jQuery(function(){
  alert("jquery aint buggeed");  //this happens
  $("#submitHandle4JQ").click(function(){alert("BE PATIENT!!");})  //this does not
}); </script>

...

<form action="/path/mySweetGrailsController/parseStuff" method="post" enctype="multipart/form-data" >
<input type="hidden" name="longNumber" value="935762708000464097" id="longNumber" /> 
<input type="file" name="bigFile" />
<input type="submit" text="Upload My File" name="submitHandle4JQ"/><br/>
</form>

Ответы [ 2 ]

7 голосов
/ 24 мая 2011

Попробуй это. Когда ваша форма обрабатывается, добавьте в тело класс с именем «wait», а затем: 

<style type="text/css">
.waiting { cursor: wait; }
</style>

Поддержка браузером свойства курсора не идеальна, но большинство его недостатков связано с использованием пользовательских изображений для вашего курсора, а не с ключевыми словами по умолчанию (например, «ждать»), которые отображаются на значки по умолчанию в зависимости от того, какая ОС вы используете (песочные часы в XP и ниже, вращающийся круг в Windows 7, вращающийся пляжный мяч в старой Mac OS и т. д.). См:

http://reference.sitepoint.com/css/cursor

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

РЕДАКТИРОВАТЬ: О, и снова снять класс .waiting с тела, когда вы закончите, чтобы курсор ожидания исчез.

2 голосов
/ 24 мая 2011

Если вы уже используете jQuery, то я думаю, что плагин BlockUI будет вам полезен.Вы можете использовать его, чтобы заблокировать элемент или всю страницу и наложить сообщение поверх.Сообщение представляет собой HTML-разметку, поэтому оно может содержать все, что вы обычно можете включить в HTML.Текстовое сообщение, изображение песочных часов или что-нибудь еще, о чем вы можете подумать.Просто присоедините активацию BlockUI к вашему событию form.submit.

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

...