is there any suggestion for doing a loading image when selecting a RadioButtonList & DropDwonList ?? Or maybe put some message like "Please Wait.. The Page is Loading" while the page is loading. Loading image for AutoPostBack. I have a Masterpage.
This is webform
<td class="auto-style177">
<asp:Panel ID="Panel101" runat="server" Visible="False">
<asp:RadioButtonList ID="rbPembeli2" runat="server" CellPadding="0" CellSpacing="0"
Font-Size="X-Small" Height="20px" RepeatDirection="Horizontal" Width="277px"
AutoPostBack="True" OnSelectedIndexChanged="rbPembeli2_SelectedIndexChanged">
<asp:ListItem Value="9">HQ ANA EDAR</asp:ListItem>
<asp:ListItem Text="PDA/PPN" Value="0"></asp:ListItem>
<asp:ListItem Text="PPP/PPW" Value="5"></asp:ListItem>
</asp:RadioButtonList></asp:Panel>
</td>
This is Js
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
$('form').live("submit", function () {
ShowProgress();
});
Change as below,
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel101" runat="server" Visible="False">
<asp:RadioButtonList ID="rbPembeli2" runat="server" CellPadding="0" CellSpacing="0"
Font-Size="X-Small" Height="20px" RepeatDirection="Horizontal" Width="277px"
AutoPostBack="True" OnSelectedIndexChanged="rbPembeli2_SelectedIndexChanged">
<asp:ListItem Value="9">HQ ANA EDAR</asp:ListItem>
<asp:ListItem Text="PDA/PPN" Value="0"></asp:ListItem>
<asp:ListItem Text="PPP/PPW" Value="5"></asp:ListItem>
</asp:RadioButtonList></asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div id="Background">
</div>
<div id="Progress">
<img src="images/loading.gif" alt="" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
loading.gif, you can download any gif file from google.
Include below CSS,
#Background
{
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: Gray;
filter: alpha(opacity=40);
opacity: 0.4;
z-index: 1006;
}
#Progress
{
position: fixed;
top: 30%;
left: 48%;
z-index: 1006;
}
Do not use any JS.