Home/ Questions/Q 8142833
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T12:55:41+00:00

I have an asp.net page with three ajax updatepanels. in each panel there are

  • 0

I have an asp.net page with three ajax updatepanels. in each panel there are some controls and each updatepanel as an ajax update progress control. first updatepanel has a dropdown which has autopostback = true. second and third updatepanels has this dropdown as asynpostback trigger. When I change selection in dropdown, only first updateprogress loading image appears while others don’t appear.

How can I fix it ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try to change the UpdateMode="Conditional" in Update panel.

    Example

    <script type="text/javascript">

        // Function to hide control on update
        function onUpdateOfSubscribe() {
            var panelProg = $get('divImage');
            // set it to visible
            panelProg.style.display = '';
            // hide label if visible      
            var lbl = $get('<%= this.pnlRegister.ClientID %>');
            lbl.innerHTML = '';
        }
        //Code to track the initiating event so to associate updateprogress
        var currentPostBackElement;
        function pageLoad() {
            var manager = Sys.WebForms.PageRequestManager.getInstance();
            manager.add_initializeRequest(OnInitializeRequest);
        }
        //On OnInitializeRequest
        function OnInitializeRequest(sender, args) {
            var manager = Sys.WebForms.PageRequestManager.getInstance();
            currentPostBackElement = args.get_postBackElement().parentElement;

            var cmdAuthoriseButton = '<%= btnRegister.ClientID %>';
            if (cmdAuthoriseButton == args._postBackElement.id) {
                // Show UpdateProgress for subscribe 
                onUpdateOfSubscribe();
            }
        }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div class="FormWrapper">
        <div class="rowHeader">

        </div>
            <asp:UpdatePanel ID="updRegister" runat="server" UpdateMode="Conditional"   >
            <ContentTemplate>  
                    <asp:Panel ID="pnlRegister" runat="server" Height="10px">
                        <div class="row" style="display:none;">
                            <asp:Label ID="Label7" runat="server" Text="Activity:" class="lbl"></asp:Label>
                            <asp:DropDownList ID="ddActivities" runat="server" CssClass="dd252"  DataTextField="EventTitle" DataValueField="EventID">
                            </asp:DropDownList>
                        </div>
                        <div class="row">
                            <asp:Label ID="lblSName" runat="server" Text="Name:" class="lbl"></asp:Label>
                            <asp:TextBox ID="txtSName" runat="server" CssClass="txt"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2"  runat="server" ErrorMessage="*" ControlToValidate="txtSName" ValidationGroup="ActivityReg" ></asp:RequiredFieldValidator>
                        </div>
                        <div class="row">
                            <asp:Label ID="lblSAge" runat="server" Text="Age:" class="lbl"></asp:Label>
                            <asp:TextBox ID="txtSAge" runat="server" CssClass="txt"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator4"  runat="server" ErrorMessage="*" ControlToValidate="txtSAge" ValidationGroup="ActivityReg" ></asp:RequiredFieldValidator>
                            <asp:RangeValidator ID="RangeValidator1" runat="server" ErrorMessage="*" ControlToValidate="txtSAge" MaximumValue="100" MinimumValue="4" 
                                ValidationGroup="ActivityReg" Type="Integer" ></asp:RangeValidator>
                        </div>

                        <div class="row">
                            <asp:Label ID="lblGMobile" runat="server" Text="Guardian Mobile:" class="lbl"></asp:Label>
                            <asp:TextBox ID="txtGMobile" runat="server" CssClass="txt"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator5"  runat="server" ErrorMessage="*" ControlToValidate="txtGMobile" ValidationGroup="ActivityReg" ></asp:RequiredFieldValidator>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1"  runat="server" ErrorMessage="*" ControlToValidate="txtGMobile" ValidationGroup="ActivityReg" ></asp:RequiredFieldValidator><asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server"  ValidationGroup="ActivityReg"
                                ControlToValidate="txtGMobile" ErrorMessage="*" ValidationExpression="[0-9 ]{9,}"></asp:RegularExpressionValidator>
                        </div>
                        <div class="rowDouble">
                            <asp:Label ID="lblAddress" runat="server" Text="Address:" class="lbl"></asp:Label>
                            <asp:TextBox ID="txtAddress" runat="server" CssClass="txtDouble" TextMode="MultiLine"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator3"  runat="server" ErrorMessage="*" ControlToValidate="txtAddress" ValidationGroup="ActivityReg" ></asp:RequiredFieldValidator>   
                        </div>
                        <div class="row">
                            <asp:Button ID="btnRegister" CssClass="btn" runat="server" 
                                ValidationGroup="ActivityReg" Text="Register" onclick="btnRegister_Click"  />
                        </div>
                        </asp:Panel> 
                    <div class="dSubMSG"> 
                        <asp:Label ID="lblMSG" runat="server" Text=""></asp:Label>
                    </div>
                    <div id="divImage" style="display:none" class="dSubAni">
                        <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/ajax-loader-gray.png" Visible="true"/>
                    </div>

                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btnRegister" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>
            <asp:UpdateProgress ID="updProgressRegister" runat="server" AssociatedUpdatePanelID="updRegister" >
                <ProgressTemplate>

                </ProgressTemplate>
            </asp:UpdateProgress>
    </div>
    </form>

    I have other user controls with UpdatePanel & Progress bar i trap the source for ascy postback & accordingly hide or show the Progress bar. Hope this will be of help.. But you may need to work on it

    • 0