problem with UpdateProgress

Question

User-159752495 posted

Hello,

          UpdateProgress is not working inside AJAX tab panel Control. What Code change I do to solve this problem.

I have written the following code

<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" AutoPostBack="true" ActiveTabIndex="1"
            OnActiveTabChanged="TabContainer1_ActiveTabChanged">
            <ajaxToolkit:TabPanel ID="tb_home" runat="server" HeaderText="Home">
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="CSR Registration Process">
                <ContentTemplate>
                    <asp:UpdateProgress runat="server" ID="UpdateProgress1" AssociatedUpdatePanelID="TabContainer1_TabPanel1_up_addupdt">
            <ProgressTemplate>

                <div id="myModal" class="modal">

                    <!-- Modal content -->
                    <div class="modal-content">

                        <b>Please wait.......</b>
                    </div>

                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
                    <asp:UpdatePanel ID="up_addupdt" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                            <table>
                                <tr id="tr_call_No" runat="server" visible="false">
                                    <td>CSR No.:
                                    </td>

                                    <td colspan="3">
                                        <asp:Label ID="lbl_call" runat="server" CssClass="lbl_text" Text=""></asp:Label>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 200px;">Request System:
                                    </td>

                                    <td style="width: 200px;">
                                        <asp:DropDownList ID="drop_system" runat="server" Width="180px" CssClass="dropdown1"
                                            OnSelectedIndexChanged="drop_system_SelectedIndexChanged"
                                            AutoPostBack="true" ValidationGroup="first">
                                            <asp:ListItem Text="Select Request System" Value="0"></asp:ListItem>
                                        </asp:DropDownList>

 </ContentTemplate>
                        <Triggers>
                            <asp:PostBackTrigger ControlID="btn_save" />
                            <asp:AsyncPostBackTrigger ControlID="drop_system" />
                            <asp:AsyncPostBackTrigger ControlID="drop_req_type" />

                        </Triggers>
                    </asp:UpdatePanel>

</ContentTemplate>
            </ajaxToolkit:TabPanel>

</ajaxToolkit:TabContainer>

Thanks

Regards

Anoop Mathur

Answer 1

User-1672470423 posted

Please try by checking below:

1. Set update panel ClientIDMode="static", so that id will be "up_addupdt" and use the same in update progress AssociatedUpdatePanelID="up_addupdt".

2. Put another update panel inside update progress as shown in below link:

http://stackoverflow.com/questions/11140929/multiple-updateprogress-controls-in-tabcontainer-linked-to-single-updatepanel

3. Make changes as shown in below link:

http://forums.asp.net/t/1057377.aspx?Update+progress+does+not+appear+if+control+which+triggers+update+is+outside+UpdatePanel

Please let me know if any of the above three helps.

Answer 2

User-1142886626 posted

 Hi anp123,

anp123

  UpdateProgress is not working inside AJAX tab panel Control. What Code change I do to solve this problem.

According to your description, I couldn’t understand your problem clearly.

Do you mean you want to show the UpdateProgress when clicking the tab panel tag or in a tab panel clicking the button show the UpdateProgress. 

I guess you want to show the UpdateProgress in one panel when clicking the button.

I assumed that the update panel refresh would at least be requested the instant the click event was heard so the loader icon would immediately show during the time other stuff is loading. 

I suggest you could add a button to fire the UpdateProgress. More details, you could refer to follow codes:

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"/>
    <script type="text/javascript">
    </script>
     <style type="text/css">
        #Background {
        ;
        top:0px;
        bottom:0px;
        left:0px;
        right:0px;
        background-color:gray;
        filter:alpha(opacity=40);
        opacity:0.4;
        }
        #Progress {
        ;
        top:10%;
        left:10px;
        width:300px;
        height:50px;
        text-align:center;
        background-color:white;
        border:solid 3px black;
        }
    </style>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ToolkitScriptManager2" runat="server"></asp:ScriptManager>
        <cc1:TabContainer runat="server" ID="Tabs" Height="138px"  ActiveTabIndex="2" 
            Width="402px" OnActiveTabChanged="Tabs_ActiveTabChanged" >
            <cc1:TabPanel runat="server" ID="Panel1" HeaderText="Address">
                <ContentTemplate>

                </ContentTemplate>
            </cc1:TabPanel>
            <cc1:TabPanel runat="server" ID="Panel2" HeaderText="Email">
                <ContentTemplate>
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server" ClientIDMode="Static">
            <ContentTemplate>
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" 
            Text="Show Records" />
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                 <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
            <ProgressTemplate>
                <div id="Background"></div>
                <div id="Progress">
                <i class="fa fa-spinner fa-spin" style="font-size:24px"></i>
                Fetching Records Please Wait...
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
            </ContentTemplate>
       </asp:UpdatePanel>
                </ContentTemplate>
            </cc1:TabPanel>
        </cc1:TabContainer>
    </div>
    </form>
</body>

      protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                this.Tabs_ActiveTabChanged(sender, e);
            
            }
        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(2000);
            Label2.Text = "success!";
        }
        protected void Tabs_ActiveTabChanged(object sender, EventArgs e)
        {
            Label1.Text = "Tabs_ActiveTabChanged success!";
        }

Screen shoot:

Best regards,

Ailleen