See URL "https://code.msdn.microsoft.com/VBASPNETShowSpinnerImage-53ce1d10"
This project works find standalone but when I add it to my website it fails.
I have solved one issue by changing the javascript in the user control as follows :-
Was
var img = document.getElementById("PopupProgressUserControl_imgProgress");
Changed to
var img = document.getElementById('<%=imgProgress.ClientID %>');
In the sample project the aspx page containing the user control "PopupProgressUserControl" there is a button called btnRefresh with attribute OnClientClick="document.getElementById('PopupProgressUserControl_btnLink').click();"
This works fine in the standalone project.
In my Website the relevent button is btnUpdateDeliveryDates. This button does nothing related to the website. It initiates a long running database update process.
My desire is to lock the webpage and put up a wait symbol while the process is running.
On this button I have tried:-
OnClientClick="document.getElementById('PopupProgressUserControl_btnLink').click();"
OnClientClick="document.getElementById('<%=PopupProgressUserControl_btnLink.ClientID %>').click();"
OnClientClick="document.getElementById('btnLink.ClientID').click();"
In all cases I get :-
JavaScript runtime error: Unable to get property 'click' of undefined or null reference
How can I raise btnLink's click event ?
My aspx page is as per below:
<%@ Page Language="VB" AutoEventWireup="false" MasterPageFile="~/MasterPage.master" CodeFile="ForkliftBatteryRegister.aspx.vb" Inherits="ForkliftBatteryRegister" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%@ Register src="UserControl/PopupProgress.ascx" tagname="PopupProgress" tagprefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:Label ID="lblPageHeading" runat="server" CssClass="HeadingText"
Text="Forklift Battery Register" style="height: 16px;top: 130px; width: 262px"></asp:Label>
<asp:Label ID="lblUpdateProgress" runat="server" CssClass="FieldLabel" style="z-index: 1; left: 1039px; top: 348px; position: absolute; width: 291px; height: 17px"></asp:Label>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:SqlDataSource ID="SqlDataSourceForkliftMake" runat="server"
ConnectionString="<%$ ConnectionStrings:ExideConnectionString %>"
SelectCommand="SELECT DISTINCT Make FROM [FL Make and Model] ORDER BY Make"
OldValuesParameterFormatString="Original_{0}"
ViewStateMode="Enabled">
</asp:SqlDataSource>
<asp:Button ID="btnAddNewBattery" runat="server" Style="z-index: 1; left: 1037px; top: 367px;
position: absolute; height: 30px; width: 156px"
Text="Add New Item" Height="30px" />
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:GridView ID="grdForkliftBatteryRegister" runat="server" Style="z-index: 1;
left: 286px; top: 414px; position: absolute; width: 910px; "
AllowPaging="True" AutoGenerateColumns="False" DataKeyNames="FL_Battery_Serial_Number"
ViewStateMode="Enabled" CaptionAlign="Left" BorderStyle="Dotted"
AutoGenerateSelectButton="True" PageSize="20">
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" Wrap="False" />
<Columns>
<asp:BoundField DataField="FL_Battery_Serial_Number" HeaderText="Serial Number"
ReadOnly="True" SortExpression="FL_Battery_Serial_Number" />
<asp:BoundField DataField="FL_State" HeaderText="State" ReadOnly="True"
SortExpression="FL_State" />
<asp:BoundField DataField="FL_Customer_Number" HeaderText="Customer No"
ReadOnly="True" SortExpression="FL_Customer_Number" />
<asp:BoundField DataField="FL_Customer_Name" HeaderText="Customer Name" />
<asp:BoundField DataField="FL_Date_Promised" DataFormatString="{0:dd-MMM-yy }"
HeaderText="Date Promised" ReadOnly="True" SortExpression="FL_Date_Promised" />
<asp:BoundField DataField="FL_Location_Building" HeaderText="Location Building"
ReadOnly="True" SortExpression="FL_Location_Building" />
<asp:BoundField DataField="FL_Forklift_Serial_Number"
HeaderText="Forklift Serial No" ReadOnly="True"
SortExpression="FL_Forklift_Serial_Number" />
<asp:BoundField DataField="FL_Make" HeaderText="Make" ReadOnly="True"
SortExpression="FL_Make" />
<asp:BoundField DataField="FL_Model" HeaderText="Model" />
<asp:BoundField DataField="FL_Battery_Item_Code" HeaderText="Battery Item Code"
ReadOnly="True" SortExpression="FL_Battery_Item_Code" />
<asp:BoundField DataField="FL_Containing_Cell" HeaderText="Containing Cell"
ReadOnly="True" SortExpression="FL_Containing_Cell" />
<asp:BoundField DataField="FL_Cell_Qty" HeaderText="Cell Qty" ReadOnly="True"
SortExpression="FL_Cell_Qty" />
</Columns>
<EditRowStyle BackColor="#999999" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Left" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSourceBatteryRegister" runat="server"
ConnectionString="<%$ ConnectionStrings:ExideConnectionString %>"
SelectCommand="SELECT [FL_Battery_Serial_Number], [FL_State], [FL_Customer_Number], [FL_Customer_Name], [FL_Location_Building], [FL_Make], [FL_Model], [FL_Battery_Item_Code], [FL_Containing_Cell], [FL_Cell_Qty], [FL_Forklift_Serial_Number] FROM [FL Battery
Register]">
</asp:SqlDataSource>
<asp:UpdatePanel ID="UpdatePanel" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Button ID="btnUpdateDeliveryDates" OnClick="btnUpdateDeliveryDates_Click"
runat="server" Style="z-index: 1; left: 1039px; top: 317px;
position: absolute; height: 30px; width: 157px" Text="Update Delivery Dates" Height="30px"
OnClientClick="document.getElementById('<%=PopupProgressUserControl_btnLink.ClientID %>').click();" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="updateProgress" runat="server" AssociatedUpdatePanelID="updatePanel">
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:CheckBoxList ID="chkBoxList" runat="server" Style="z-index: 1; left: 281px;
top: 151px; position: absolute; height: 178px; width: 179px"
AutoPostBack="True">
<asp:ListItem Value="1">A Particular Battery</asp:ListItem>
<asp:ListItem Value="10">Date Range</asp:ListItem>
<asp:ListItem Value="100">Make</asp:ListItem>
<asp:ListItem Value="100000">State</asp:ListItem>
<asp:ListItem>Customer Name</asp:ListItem>
<asp:ListItem Value="Location Building"></asp:ListItem>
<asp:ListItem>Item Type</asp:ListItem>
<asp:ListItem>Forklift Serial Number</asp:ListItem>
<asp:ListItem>Not Delivered</asp:ListItem>
<asp:ListItem>Model</asp:ListItem>
</asp:CheckBoxList>
<asp:Label ID="lblParticularBattery" runat="server" CssClass="FieldLabel" Style="z-index: 1;
left: 460px; top: 150px; position: absolute; height: 18px; width: 175px" Text="Enter Battery Serial No :"
Visible="False" Height="20px"></asp:Label>
<asp:TextBox ID="txtAParticularBattery" runat="server" Style="z-index: 1; left: 645px;
top: 150px; height: 18px; position: absolute" Visible="False" Height="20px"></asp:TextBox>
<asp:Label ID="lblFromDate" runat="server" CssClass="FieldLabel" Style="z-index: 1;
left: 511px; top: 175px; position: absolute; height: 18px; width: 125px;" Text="From Date :"
Visible="False" Height="20px"></asp:Label>
<asp:TextBox ID="txtFromDate" runat="server" CssClass="FieldValue" Style="z-index: 1;
left: 645px; top: 175px; position: absolute; height: 18px; width: 100px"
Visible="False" Height="20px"></asp:TextBox>
<asp:CalendarExtender ID="txtFromDate_CalendarExtender" runat="server" CssClass="MyCalendar1"
Format="dd/MM/yyyy" PopupButtonID="ImageFromDate" TargetControlID="txtFromDate">
</asp:CalendarExtender>
<asp:Image ID="ImageFromDate" runat="server" ImageUrl="~/Images/Calendar_scheduleHS.png"
Style="z-index: 1; left: 750px; top: 175px; position: absolute; height: 18px;
width: 18px" Visible="False" />
<asp:Label ID="lblToDate" runat="server" CssClass="FieldLabel" Style="z-index: 1;
left: 770px; top: 175px; position: absolute; height: 18px; width: 80px;" Text="To Date :"
Visible="False" Height="20px"></asp:Label>
<asp:TextBox ID="txtToDate" runat="server" Style="z-index: 1; left: 855px; top: 175px;
position: absolute; height: 18px; width: 100px" CssClass="FieldValue"
Visible="False" Height="20px"></asp:TextBox>
<asp:CalendarExtender ID="txtToDate_CalendarExtender" runat="server" CssClass="MyCalendar1"
PopupButtonID="ImageToDate" TargetControlID="txtToDate"
Format="dd/MM/yyyy">
</asp:CalendarExtender>
<asp:Image ID="ImageToDate" runat="server" ImageUrl="~/Images/Calendar_scheduleHS.png"
Style="z-index: 1; left: 960px; top: 175px; position: absolute; height: 18px;
width: 18px" Visible="False" />
<asp:Label ID="lblMake" runat="server" CssClass="FieldLabel"
style="z-index: 1; left: 511px; top: 200px; position: absolute; width: 125px; height: 18px"
Text="Make :" Visible="False"></asp:Label>
<asp:DropDownList ID="ddlMake" runat="server" CssClass="FieldValue"
DataTextField="Make" DataValueField="Make" Style="z-index: 1; left: 645px;
top: 200px; position: absolute; height: 24px; width: 240px" Visible="False"
DataSourceID="SqlDataSourceForkliftMake" Height="20px">
</asp:DropDownList>
<asp:Label ID="lblState" runat="server" CssClass="FieldLabel" Style="z-index: 1;
left: 511px; top: 225px; position: absolute; height: 18px; width: 125px; bottom: 538px"
Text="State :" Visible="False" Height="20px"></asp:Label>
<asp:DropDownList ID="ddlState" runat="server" CssClass="FieldValue" Style="z-index: 1;
left: 645px; top: 225px; position: absolute; height: 24px; width: 69px"
Visible="False" DataTextField="State"
DataValueField="State" Height="20px">
<asp:ListItem>NSW</asp:ListItem>
<asp:ListItem>VIC</asp:ListItem>
<asp:ListItem>QLD</asp:ListItem>
<asp:ListItem>SA</asp:ListItem>
<asp:ListItem>WA</asp:ListItem>
</asp:DropDownList>
<asp:Label ID="lblCustomer" runat="server" CssClass="FieldLabel"
style="z-index: 1; left: 511px; top: 250px; position: absolute; width: 125px; height: 18px"
Text="Customer :" Visible="False" Height="20px"></asp:Label>
<asp:TextBox ID="txtCustomer" runat="server"
Style="z-index: 1; left: 645px;
top: 250px; height: 18px; position: absolute" Visible="False" Height="20px"></asp:TextBox>
<uc1:PopupProgress ID="PopupProgressUserControl" runat="server" />
<asp:Label ID="lblLocation_Building" runat="server" CssClass="FieldLabel"
style="z-index: 1; left: 511px; top: 275px; position: absolute; width: 125px; height: 18px"
Text="Location Building :" Visible="False" Height="20px"></asp:Label>
<asp:TextBox ID="txtLocationBuilding" runat="server"
Style="z-index: 1; left: 645px;
top: 275px; height: 18px; position: absolute" Visible="False" Height="20px"></asp:TextBox>
<asp:Label ID="lblItemType" runat="server" CssClass="FieldLabel"
style="z-index: 1; left: 511px; top: 300px; position: absolute; width: 125px; height: 18px"
Text="Item Type :" Visible="False" Height="20px"></asp:Label>
<asp:DropDownList ID="ddlItemType" runat="server" CssClass="FieldValue" Style="z-index: 103; left: 645px; position: absolute; top: 300px"
Width="200px" SelectedValue='<%# Bind("FL_Item_Type") %>'
Height="24px">
<asp:ListItem>Battery</asp:ListItem>
<asp:ListItem>Charger</asp:ListItem>
<asp:ListItem>Maintenance Free</asp:ListItem>
</asp:DropDownList>
<asp:Label ID="lblForkliftSerialNumber" runat="server" CssClass="FieldLabel"
style="z-index: 1; left: 385px; top: 325px; position: absolute; width: 249px; height: 18px"
Text="Forklift Serial Number :" Visible="False" Height="20px"></asp:Label>
<asp:TextBox ID="txtForkliftSerialNumber" runat="server"
Style="z-index: 1; left: 645px;
top: 325px; height: 18px; position: absolute" Visible="False" Height="20px"></asp:TextBox>
<asp:Label ID="lblModel" runat="server" CssClass="FieldLabel"
style="z-index: 1; left: 510px; top: 350px; position: absolute; width: 125px; height: 18px"
Text="Model :" Visible="False" Height="20px"></asp:Label>
<asp:TextBox ID="txtModel" runat="server"
Style="z-index: 1; left: 645px;
top: 350px; height: 18px; position: absolute" Visible="False" Height="20px"></asp:TextBox>
<asp:Button ID="btnRetrieveData" runat="server" Style="z-index: 1; left: 868px; top: 367px;
position: absolute; height: 30px; width: 157px" Text="Retrieve Data"
Height="30px" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>