jquery .post или пользовательский интерфейс имеют «пожалуйста, подождите.» вариант значка? - PullRequest
Новая
       14

jquery .post или пользовательский интерфейс имеют «пожалуйста, подождите.» вариант значка?

0 голосов
/ 30 ноября 2009

Когда я нажимаю на ссылку, у меня есть вызов jquery .post в функции JavaScript. Это вызывает действие контроллера, которое возвращает частичный результат в диалог пользовательского интерфейса jquery.

этот процесс может занять несколько секунд, так как контроллер вызывает модель для некоторых вычислений и т. Д. .

в любом случае, есть ли в любом случае отображать "Пожалуйста, подождите." или анимированный значок с момента нажатия ссылки до отображения диалогового окна?

Ответы [ 4 ]

2 голосов
/ 30 ноября 2009

Получить изображение загрузки ajax из ajaxload.info . Поместите это в скрытый div на своей странице, а затем покажите div, когда происходит Ajax. Спрячьте снова, когда вызов ajax завершен.

1 голос
/ 30 ноября 2009

Я реализовал это путем создания тайм-аута javascript, который затем показывает div подождать, который будет скрыт, когда jquery вернется.

Мой JS выглядит так ;; 

function ClearTimeoutError(timeoutId) {
    clearTimeout(timeoutId);
    if ($('.timeout').is(':visible')) { $('.timeout').fadeOut(100); };
}

Это в моем методе, который выполняет обратную передачу jQuery. Извлек весь ненужный код. 

var timeoutId = setTimeout(function() { $('.timeout').center(); $('.timeout').fadeIn(250); }, 2000);

    $.ajax({
        type: "POST",
        .
        .
        .
        success: function(msg) {
            ClearTimeoutError(timeoutId);

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

0 голосов
/ 30 ноября 2009

Если вы хотите, чтобы глобальный обработчик «jquery делает ajax», jQuery имеет несколько глобальных событий ajax , которые вы можете прослушивать. Это хорошее место для запуска чего-то вроде того, что предлагает Крис .

edit И если вы ищете хороший способ сделать экран серым, я имел успех с SimpleModal в прошлом. Не забудьте передать close: false в ваших настройках, хотя, вероятно, вы не хотите, чтобы пользователь закрывал ваше сообщение Please Wait: -)

0 голосов
/ 30 ноября 2009

При использовании библиотеки ASP.NET AJAX я мог зарегистрировать модальный асинхронный индикатор, зарегистрировав метод show и метод hide в PageRequestManager.

Например, я бы разместил следующий код на своей главной странице 

<%@ Register Assembly="AjaxControlToolkit" 
    Namespace="AjaxControlToolkit" 
    TagPrefix="cc1" %>
...
<style>
.modalBackground {
    background-color: #efefef;
    filter: alpha(opacity=70);
    MozOpacity: 0.7;
    opacity: 0.7; 
}  
.updateProgress div {
    border-width: 1px;
    border-style: solid;     
    background-color: #ffffff;
    position: relative; 
    top: 30%; 
    text-align: center;
    padding: 5px 5px 5px 5px;
}
</style>
...
<asp:Panel ID="pnlUpdateProgress" runat="server" 
    CssClass="updateProgress" 
    style="display: none; height: 0;">
<div>
    <asp:Image ID="commentViewThrobber" runat="server" 
            ImageAlign="AbsMiddle" 
            AlternateText="Please Wait..." 
            ImageUrl="~/images/throbber-slow.gif" 
            EnableViewState="false" />
    Please wait...
</div>
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalProgress" runat="server"
    TargetControlID="pnlUpdateProgress" 
    BackgroundCssClass="modalBackground" 
    PopupControlID="pnlUpdateProgress" />

И зарегистрируйте следующее в качестве сценария запуска: 

<script language='JavaScript' type='text/javascript'>

var ModalProgress ='<%= ModalProgress.ClientID %>'
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq); 
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);    

function beginReq(sender, args) {
// shows the Popup     
$find(ModalProgress).show();        
}  

function endReq(sender, args) {
//  hides the Popup     
$find(ModalProgress).hide(); 
}

</script>
...