martes, 27 de abril de 2010

Ventanita cargando AJAX

Para hacer que salga la típica ventanita con un gif animado de AJAX, el código es el siguiente:

Dentro del css:

.AlertModalBackground
{
background-color: #FFFFFF;
filter: alpha(opacity=70);
opacity: 0.2;
height: 20%;
widows: 100%;
}
.modalBackground
{
background-color: white;
filter: alpha(opacity=20);
opacity: 0.2;
}

<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(initializeRequest);
prm.add_endRequest(endRequest);
function initializeRequest(sender, args) {
document.body.style.cursor =
"wait";
if (prm.get_isInAsyncPostBack()) {
//debugger
args.set_cancel(true);
}
}
function endRequest(sender, args) {
document.body.style.cursor =
"default";
}
//JavaScript code included at jsUpdateProgress.js file
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) {
// shows the Popup
$find(ModalProgress).hide();
}
var ModalProgress = '';
script>
<asp:Panel ID="pnlLoading" runat="server" CssClass="updateProgress">
<asp:UpdateProgress ID="updPrgPnl" runat="server">
<ProgressTemplate>
<div class="AlertModalBackground" runat="server" id="divBackground">
<asp:Panel ID="pnlLoadingImage" CssClass="updPrgPnl" runat="server">
<img src="~/Images/ajax-loader.gif" runat="server" id="loadingImage" alt="Cargando..." />
Cargando...asp:Panel>
div>
ProgressTemplate>
asp:UpdateProgress>
asp:Panel>
<asp:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="pnlLoading"
BackgroundCssClass="modalBackground" PopupControlID="pnlLoading" />
<
asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">asp:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">

Y debajo de esto el resto de la página, los gif animados los podeis encontrar en la pagina ajaxload.info

Con esto ya deberíamos tener la ventanita cargando en la página.

No hay comentarios:

Publicar un comentario