Регистрация  |  Вход

Рецепты. Как сообщить юзеру, что выполняется Ajax-запрос.

Я обычно делаю - это так. Если у кого-то есть какие-то другие рецепты - давайте обменяемся опытом)

// стиль для моей крутилки
<style>
.oddbox {
background: rgb(0, 0, 0);
bottom: 0;
display: block;
filter: alpha(opacity = 40);
opacity: 0.4;
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
left: 0;
position: fixed;
right: 0;
text-align: center;
top: 0;
z-index: 9999;
}
</style>

/*
Фрагмент странички
*/

<apex:pageblock id="filters">
<apex:inputCheckBox value="{!value}">
<apex:actionSupport status="waiting" event="onclick" rerender="filters" />
</apex:inputCheckBox>
</apex:pageblock>

// Чуть ниже запихиваю "крутилку" со стандартными компонентами (Можешь слить с любого сайта и положить в //Resource.TransformerStyles

<apex:actionStatus id="waiting" layout="block" startStyleClass="oddbox" stopStyleClass="">
<apex:facet name="start">
<apex:image value="{!URLFOR($Resource.TransformerStyles, 'images/loading2.gif')}" alt="Loading..." style="position: absolute; z-index: 9999; top: 45%; left: 45%;"/>
</apex:facet>
</apex:actionStatus>

В итоге пока идет Ajax запрос у меня прокручивается ожидание выполнения запроса
http://gyazo.com/4c5c92e1721a13f5630f168e31a0b9f8

Я обычно делаю - это так. Если у кого-то есть какие-то другие рецепты - давайте обменяемся опытом)

 [code] 
// стиль для моей крутилки
<style>
       .oddbox {
        background: rgb(0, 0, 0);
        bottom: 0;
        display: block;
        filter: alpha(opacity = 40);
        opacity: 0.4;
        -moz-opacity: 0.4;
        -khtml-opacity: 0.4;
        left: 0;
        position: fixed;
        right: 0;
        text-align: center;
        top: 0;
        z-index: 9999;
    }
 </style>

/*
 Фрагмент странички
*/

<apex:pageblock id="filters">
         <apex:inputCheckBox value="{!value}">
                   <apex:actionSupport status="waiting" event="onclick" rerender="filters" />
          </apex:inputCheckBox>
 </apex:pageblock>

// Чуть ниже запихиваю "крутилку" со стандартными компонентами (Можешь слить с любого сайта и положить в //Resource.TransformerStyles

            <apex:actionStatus id="waiting" layout="block" startStyleClass="oddbox" stopStyleClass="">
                <apex:facet name="start">
                    <apex:image value="{!URLFOR($Resource.TransformerStyles, 'images/loading2.gif')}" alt="Loading..." style="position: absolute; z-index: 9999; top: 45%; left: 45%;"/>
                </apex:facet>
            </apex:actionStatus>
[/code]

В итоге пока идет Ajax запрос у меня прокручивается ожидание выполнения запроса
[url]http://gyazo.com/4c5c92e1721a13f5630f168e31a0b9f8[/url]

Можно и так. Но я почему-то отказался от этого способа. Не помню почему он у меня не всегда срабатывал.

Я обычно использую JS способ (вместо Visualforce) - на кнопку например на onclick вешаю обработчик чтобы показать крутилку (можно в принципе много что придумать - это ж javascript). И самое главное на onComplete ajax тега ставлю функцию отключения крутился + какой мне нужно обработчик события чтобы обработать обновленную страницу.

Можно и так. Но я почему-то отказался от этого способа. Не помню почему он у меня не всегда срабатывал.

Я обычно использую JS способ (вместо Visualforce) - на кнопку например на onclick вешаю обработчик чтобы показать крутилку (можно в принципе много что придумать - это ж javascript). И самое главное на onComplete ajax тега ставлю функцию отключения крутился + какой мне нужно обработчик события чтобы обработать обновленную страницу.