locked
Issue making use of sample project VBASPNETShowSpinnerImage RRS feed

  • Question

  • User1140994866 posted

    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; ; 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;
    ; 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; ; 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;
    ; 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; ; 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; ; 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; " Visible="False" Height="20px"></asp:TextBox>



    <asp:Label ID="lblFromDate" runat="server" CssClass="FieldLabel" Style="z-index: 1;
    left: 511px; top: 175px; ; 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; ; 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; ; height: 18px;
    width: 18px" Visible="False" />

    <asp:Label ID="lblToDate" runat="server" CssClass="FieldLabel" Style="z-index: 1;
    left: 770px; top: 175px; ; 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;
    ; 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; ; height: 18px;
    width: 18px" Visible="False" />

    <asp:Label ID="lblMake" runat="server" CssClass="FieldLabel"
    style="z-index: 1; left: 511px; top: 200px; ; 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; ; 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; ; 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; ; 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; ; 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; " 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; ; 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; " Visible="False" Height="20px"></asp:TextBox>


    <asp:Label ID="lblItemType" runat="server" CssClass="FieldLabel"
    style="z-index: 1; left: 511px; top: 300px; ; 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; ; 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; ; 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; " Visible="False" Height="20px"></asp:TextBox>


    <asp:Label ID="lblModel" runat="server" CssClass="FieldLabel"
    style="z-index: 1; left: 510px; top: 350px; ; 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; " Visible="False" Height="20px"></asp:TextBox>


    <asp:Button ID="btnRetrieveData" runat="server" Style="z-index: 1; left: 868px; top: 367px;
    ; height: 30px; width: 157px" Text="Retrieve Data"
    Height="30px" />

    </ContentTemplate>
    </asp:UpdatePanel>




    </asp:Content>

    Tuesday, January 17, 2017 4:25 AM

All replies

  • User-1569032662 posted

    UPDATE 1

    ASPX page provided is in error. relevant parts are as per below :-

    <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" 

    OnClientClick="document.getElementById('ctl00_ContentPlaceHolder1_PopupProgressUserControl_btnLink').click();" />  

    </ContentTemplate>

    </asp:UpdatePanel> 

    <asp:UpdateProgress ID="updateProgress" runat="server" AssociatedUpdatePanelID="updatePanel"> 

    <ProgressTemplate> 

    <uc1:PopupProgress ID="PopupProgressUserControl" runat="server" />

    </ProgressTemplate>

    UPFDATE 2

    Using

    OnClientClick="document.getElementById('ctl00_ContentPlaceHolder1_PopupProgressUserControl_btnLink').click();"

     WORKS !!!

    Why doesn't '<%=PopupProgressUserControl_btnLink.clientID %>' return 'ctl00_ContentPlaceHolder1_PopupProgressUserControl_btnLink'

       

    </asp:UpdateProgress>          

           

    Tuesday, January 17, 2017 10:42 PM
  • User-271186128 posted

    Hi achrarb,

    Using

    OnClientClick="document.getElementById('ctl00_ContentPlaceHolder1_PopupProgressUserControl_btnLink').click();"

     WORKS !!!

    From the previous replies, do you mean you have solved your problem?

    Why doesn't '<%=PopupProgressUserControl_btnLink.clientID %>' return 'ctl00_ContentPlaceHolder1_PopupProgressUserControl_btnLink'

    As for this issue, it is related to the algorithms for how to generate the ClientID property value. The default value of ClientIDMode for a page is Predictable. The default value of ClientIDMode for a control is Inherit. Because the default for controls is Inherit, the default generation mode is Predictable.

    If you could try to set the ClientIDMode to Static, then you could use the following code to find the button:

    OnClientClick="document.getElementById('PopupProgressUserControl_btnLink').click();"

    More details, see: https://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode(v=vs.110).aspx

    Best regards,
    Dillion

    Wednesday, January 18, 2017 8:07 AM
  • User1140994866 posted

    Thankyou for your response.

    Setting ClientIDMode on the user control on the aspx page  to "Static"  and using onclientclick as per above does not work does not work 

    Same error null reference

    Is there somewhere else I should be setting ClientIDMode to Static ?

    Regards

    Chris

    Thursday, January 19, 2017 4:44 AM
  • User-271186128 posted

    Hi Chris,

    achrarb

    Setting ClientIDMode on the user control on the aspx page  to "Static"  and using onclientclick as per above does not work does not work 

    Same error null reference

    Is there somewhere else I should be setting ClientIDMode to Static ?

    You should set the ClientIDModel on the control inside the user control.

    For example: You could compare the button and textbox:

    Code in user control page:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="WebApplication3.WebUserControl1" %>
    <asp:Button ID="Button1" runat="server" Text="Button" />
    <asp:TextBox ID="TextBox1" ClientIDMode="Static" runat="server"></asp:TextBox>
    <asp:Panel ID="Panel1" runat="server">
    
    </asp:Panel>

    Code in aspx page:

         <uc1:WebUserControl1 runat="server" ID="WebUserControl1" />

    After rendering, then the output as below:

    <input name="WebUserControl1$Button1" id="WebUserControl1_Button1" type="submit" value="Button">
    <input name="WebUserControl1$TextBox1" id="TextBox1" type="text">

    Edit: You could use F12 developer tools to check the html elements.

    Best regards,
    Dillion

    Thursday, January 19, 2017 7:13 AM
  • User-1569032662 posted

    Still No Joy.

    The user control has multiple controls.

    There is also a ClientIDMode property at CONTROL level :-

    <%@ Control Language="VB" AutoEventWireup="false" CodeFile="PopupProgress.ascx.vb" Inherits="UserControl_PopupProgress" ClientIDMode="Static" %>

    I tried various combinations of ClientIDMOde set to static

    (a) All Controls plus CONTROL level plus usercontrol on parent page set to inherit

    (b) All Controls plus CONTROL level plus usercontrol on parent page set to static

    (c) only btnLInk in usercontrol set to static plus usercontrol on parent page set to static

    (d) only btnLInk in usercontrol set to static plus usercontrol on parent page set to inherit

    (e) All Controls set to static but CONTROL level set to inherit  plus usercontrol on parent page set to inherit

    (f) All Controls set to static  but CONTROL level set to inherit   plus usercontrol on parent page set to static

    None of them work

    See below for the user control for options (a) and (b)

    <%@ Control Language="VB" AutoEventWireup="false" CodeFile="PopupProgress.ascx.vb" Inherits="UserControl_PopupProgress" ClientIDMode="Static" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> 
    
    <asp:Panel ID="pnlProgress" runat="server" CssClass="modalpopup" 
        ClientIDMode="Static"> 
    
    <style type="text/css"> 
            .CenterImage 
            { 
        height: 200px;
        width: 400px;
        background: black;
    
        ;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -200px;
            }    
            .CenterText 
            { 
            ;
            top: 62%;
            left: 50%;
            margin-top: -100px;
            margin-left: -240px;
            text-align:center;
            } 
        </style> 
        <div class="popupcontainerLoading"> 
            <div class="popupbody"> 
                <table width="100%"> 
                    <tr> 
                         <td align="center" class="style1">  
                            <asp:Image ID="imgProgress"  CssClass="CenterImage" runat="server" 
                                style=" width: 100px; Height: 100px;"  ImageUrl="~/Images/spinner.gif" 
                                 ClientIDMode="Static" />   
                             <asp:Label ID="lblSpinner" runat="server" 
                                Text="xxx" CssClass="CenterText" 
                                Font-Names="Microsoft Sans Serif" Font-Size="Small" ForeColor="#000099" 
                                 ClientIDMode="Static"></asp:Label>            
                            
                        </td> 
                    </tr>        
                </table> 
            </div> 
        </div> 
    </asp:Panel> 
    <asp:LinkButton ID="btnLink" runat="server" Text="" ClientIDMode="Static"></asp:LinkButton> 
    <asp:ModalPopupExtender ID="mpeProgress" runat="server" TargetControlID="btnLink"
        X="500" Y="0" PopupControlID="pnlProgress" 
        BackgroundCssClass="modalBackground" DropShadow="true"   
        ClientIDMode="Static"> 
    </asp:ModalPopupExtender>

    Here are the relevant bits of the parent page
    <%@ Register src="UserControl/PopupProgress.ascx" tagname="PopupProgress" tagprefix="uc1" %>


     <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;; height: 30px; width: 157px"
                                Text="Update Delivery Dates"     
                                OnClientClick="document.getElementById('PopupProgressUserControl_btnLink').click();" />           
            </ContentTemplate>
        </asp:UpdatePanel> 
    
         <asp:UpdateProgress ID="updateProgress" runat="server" AssociatedUpdatePanelID="updatePanel"> 
            <ProgressTemplate> 
                <uc1:PopupProgress ID="PopupProgressUserControl" runat="server" 
                    ClientIDMode="Inherit" />
            </ProgressTemplate>
        </asp:UpdateProgress> 

    Finally what are the downsides of using  OnClientClick="document.getElementById('ctl00_ContentPlaceHolder1_PopupProgressUserControl_btnLink').click();" />         

    Thanks again for your help

    Friday, January 20, 2017 12:00 AM
  • User-1569032662 posted

    I have got it working

    In this instance the control I am interested in is inside the user control and has ID" btnLInk". On this control only I set ClientIDMOde to static.

    Then after amending the onClientClick attribute to

    OnClientClick="document.getElementById('btnLink').click();"   the program worked

    Tuesday, January 24, 2017 10:09 PM
  • User-1569032662 posted

    Actually after setting btnLink ClientIDMode to static the OnclientClick attribute has to be

    OnClientClick="document.getElementById('btnLink').click();" />  

    This works

    Tuesday, January 24, 2017 10:13 PM