locked
BalloonPopupExtender in TabControl and Update Panel RRS feed

  • Question

  • User-851066408 posted

    I have a master page that wraps the body of each page in an update panel.  The page I'm working on has a tab control with 2 tab panels.  The first tab panel has a balloon popup extender for an asp hyperlink control the shows/hides an asp panel control.  When navigating on this first tab, that extender works just fine.  When I switch to the second tab panel, which doesn't fire a postback because of the update panel, it initially loads ok, but as soon as I trigger any kind of postback (full or async) I get a javascript Error: Unable to get property 'click' of undefined or null reference

    I assume this is because the target and display controls of the extender are no longer rendered because they reside on the first tab.  I'm wondering if there is a way I can disable or remove the click handlers for the popup extender when the tab changes using OnClientActiveTabChanged.  Or remove/disable the extender handlers all together.  I've tried a few different things (see below), but so far no luck.  If anyone has any idea how to get past this error, I'll be much obliged.

            function changeTab() {
                var extenderBehavior = $find("DisplayCustCredit");
                if ($find("<%=tcCreateCase.ClientID%>").get_activeTabIndex() != 0) {
                    if (extenderBehavior._popupVisible != true) {
                        extenderBehavior.showPopup();
                    }
                    $removeHandler(extenderBehavior.get_element(), "click", extenderBehavior._clickHandler);
                    $removeHandler(extenderBehavior.get_element(), "click", extenderBehavior._popupClickHandler);
                    $removeHandler(extenderBehavior.get_element(), "click", extenderBehavior._displayOnClick);
                    $removeHandler(extenderBehavior.get_element(), "click", extenderBehavior._bodyClickHandler);
                    $removeHandler(extenderBehavior.get_element(), "click", extenderBehavior._popupElement);
                    extenderBehavior.hidePopup();
                }
            }

    Friday, May 24, 2019 4:36 PM

Answers

  • User665608656 posted

    Hi jj_lucarelli,

    According to your description,is there an updatepanel control outside your TabContainer control?

    If so, I suggest that you delete the outside updatepanel and add an updatepanel to the outside of pnlButton so that you can run successfully.

    For more details , you could refer to the following code:

      <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
            <asp:TabContainer ID="tcCreateCase" runat="server" ActiveTabIndex="0" Width="100%" CssClass="MyTabStyle">
                <asp:TabPanel ID="tpCustomerInfo" runat="server" HeaderText="Step 1 - Customer Information">
                    <ContentTemplate>
                        <asp:Panel ID="pnlCustomerInfo" runat="server">
                            <table width="100%" class="grid">
                                <tr>
                                    <td>
                                        <asp:HyperLink ID="lnkCustomerNumber" runat="server" Font-Bold="True" ForeColor="#0E3B58" Text="Test"></asp:HyperLink>
                                         <asp:BalloonPopupExtender ID="bpeCustomerNumber" runat="server" TargetControlID="lnkCustomerNumber" BalloonStyle="Custom" BalloonPopupControlID="pnlCustomerCredit" CustomCssUrl="Telular.css" CustomClassName="popUpCustomerCreditStyle" BehaviorID="_content_bpeCustomerNumber" DynamicServicePath="" ExtenderControlID="">
    </asp:BalloonPopupExtender> <asp:Panel ID="pnlCustomerCredit" runat="server" CssClass="popUpCustomerCreditStyle"> <table class="custCredit"> <tr> <th>Header </th> <td>Detail </td> </tr> </table> </asp:Panel> </td> <td> <asp:ComboBox ID="ComboBox1" runat="server"></asp:ComboBox> </td> </tr> </table> </asp:Panel> </ContentTemplate> </asp:TabPanel> <asp:TabPanel ID="Tab2" runat="server" HeaderText="Tab 2"> <ContentTemplate> <asp:Panel runat="server" ID="pnlButton"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Button ID="btn" Text="Press me" runat="server" OnClick="btn_Click" /> <asp:Label ID="Label1" runat="server" Text="Before click"></asp:Label> </ContentTemplate> </asp:UpdatePanel> </asp:Panel> </ContentTemplate> </asp:TabPanel> </asp:TabContainer>

    code behind:

       protected void btn_Click(object sender, EventArgs e)
            {
                Label1.Text = "after click";
            }

    The result of this work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 17, 2019 7:32 AM

All replies

  • User665608656 posted

    Hi jj_lucarelli,

    According to your description,I can not reproduce the mistakes you described.

    Could you please provide the detailed code related to the front desk? 

    This will help us to solve this issue more easierly.   


    Best Regards,

    YongQing.

    Monday, May 27, 2019 7:01 AM
  • User-851066408 posted

    Thanks for replying.  I actually determined the specific scenario that causes the issue now.  It seems to be an issue with having both a popup and combo box on the page.  Using the following in an ASPX page will show you the error when you switch to the second tab and click on the button.  Then if you comment out the combo box and run again, no error.  I'm not sure what it is about having both an AJAX popup and combo box that triggers this.

        <asp:TabContainer ID="tcCreateCase" runat="server" ActiveTabIndex="0" Width="100%" CssClass="MyTabStyle">
            <asp:TabPanel ID="tpCustomerInfo" runat="server" HeaderText="Step 1 - Customer Information">
                <ContentTemplate>
                    <asp:Panel ID="pnlCustomerInfo" runat="server">
                        <table width="100%" class="grid">
                            <tr>
                                <td>
                                    <asp:HyperLink ID="lnkCustomerNumber" runat="server" Font-Bold="True" ForeColor="#0E3B58" Text="Test"></asp:HyperLink>
                                    <asp:BalloonPopupExtender ID="bpeCustomerNumber" runat="server" TargetControlID="lnkCustomerNumber" BalloonStyle="Custom" BalloonPopupControlID="pnlCustomerCredit" CustomCssUrl="Telular.css" CustomClassName="popUpCustomerCreditStyle" BehaviorID="_content_bpeCustomerNumber" DynamicServicePath="" ExtenderControlID="">
                                    </asp:BalloonPopupExtender>
                                    <asp:Panel ID="pnlCustomerCredit" runat="server" CssClass="popUpCustomerCreditStyle">
                                        <table class="custCredit">
                                            <tr>
                                                <th>Header
                                                </th>
                                                <td>Detail
                                                </td>
                                            </tr>
                                        </table>
                                    </asp:Panel>
                                </td>
                                <td>
                                    <asp:ComboBox ID="ComboBox1" runat="server"></asp:ComboBox>
                                </td>
                            </tr>
                        </table>
                    </asp:Panel>
                </ContentTemplate>
            </asp:TabPanel>
            <asp:TabPanel ID="Tab2" runat="server" HeaderText="Tab 2">
                <ContentTemplate>
                    <asp:Panel runat="server" ID="pnlButton">
                        <asp:Button ID="btn" Text="Press me" runat="server" OnClick="btn_Click" />
                    </asp:Panel>
                </ContentTemplate>
            </asp:TabPanel>
        </asp:TabContainer>

    Thursday, June 27, 2019 1:41 PM
  • User665608656 posted

    Hi jj_lucarelli,

    According to your description,is there an updatepanel control outside your TabContainer control?

    If so, I suggest that you delete the outside updatepanel and add an updatepanel to the outside of pnlButton so that you can run successfully.

    For more details , you could refer to the following code:

      <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
            <asp:TabContainer ID="tcCreateCase" runat="server" ActiveTabIndex="0" Width="100%" CssClass="MyTabStyle">
                <asp:TabPanel ID="tpCustomerInfo" runat="server" HeaderText="Step 1 - Customer Information">
                    <ContentTemplate>
                        <asp:Panel ID="pnlCustomerInfo" runat="server">
                            <table width="100%" class="grid">
                                <tr>
                                    <td>
                                        <asp:HyperLink ID="lnkCustomerNumber" runat="server" Font-Bold="True" ForeColor="#0E3B58" Text="Test"></asp:HyperLink>
                                         <asp:BalloonPopupExtender ID="bpeCustomerNumber" runat="server" TargetControlID="lnkCustomerNumber" BalloonStyle="Custom" BalloonPopupControlID="pnlCustomerCredit" CustomCssUrl="Telular.css" CustomClassName="popUpCustomerCreditStyle" BehaviorID="_content_bpeCustomerNumber" DynamicServicePath="" ExtenderControlID="">
    </asp:BalloonPopupExtender> <asp:Panel ID="pnlCustomerCredit" runat="server" CssClass="popUpCustomerCreditStyle"> <table class="custCredit"> <tr> <th>Header </th> <td>Detail </td> </tr> </table> </asp:Panel> </td> <td> <asp:ComboBox ID="ComboBox1" runat="server"></asp:ComboBox> </td> </tr> </table> </asp:Panel> </ContentTemplate> </asp:TabPanel> <asp:TabPanel ID="Tab2" runat="server" HeaderText="Tab 2"> <ContentTemplate> <asp:Panel runat="server" ID="pnlButton"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Button ID="btn" Text="Press me" runat="server" OnClick="btn_Click" /> <asp:Label ID="Label1" runat="server" Text="Before click"></asp:Label> </ContentTemplate> </asp:UpdatePanel> </asp:Panel> </ContentTemplate> </asp:TabPanel> </asp:TabContainer>

    code behind:

       protected void btn_Click(object sender, EventArgs e)
            {
                Label1.Text = "after click";
            }

    The result of this work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 17, 2019 7:32 AM