Textbox in the modalpopup extender not refreshed

skaleem1
skaleem1 used Ask the Experts™
on
I have a dropdownlist as well as a button in the same updatePanel. Whenever the dropdownlist item is selected, the ddlPortfolios_SelectedIndexChanged is fired and the detailed info related to that selected item is displayed in a gridview in the space below. When the button is clicked, a popupextender panel is opened (not in the updtePanel). This popup has a textbox that I want to refresh with the currently selected item test in the drop down. However, the textbox is not refreshed although I am trying to refresh it in the dropdown_SelectedIndexChanged event. This most probably is due to the fact that the dropdown and the button calling the popup are in an updatePanel. However, I tried my best to somehow force postback to the updatePanel to refresh the textbox in the popup but to no avail. Please see the code section and see if you can locate anything I am doing wrong here. Please see in the code behind section for the dropdown_SelectedIndexChanged event that the following method is not fired and I do not see the alert  :

Page.ClientScript.RegisterStartupScript(this.GetType(), "UpdPanelUpdate", js, true);



<!--ASPX Code->
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset style="width:700px">
        <div>           
            <table><tr><td>
            <asp:Label ID="lblPortfolio" runat="server" Text="Portfolio:"></asp:Label>&nbsp;
            <asp:DropDownList ID="ddlPortfolios" runat="server" Width="192px"></asp:DropDownList>&nbsp;
            <button id="btnRename" type="button" runat="server" style="height:27px;width:61px"
                       onclick="ShowPopup('ModalPopupRename');">Rename</button></td><td style="width:150px"></td>
                       <td>
                       <asp:ModalPopupExtender ID="Rename_ModalPopupExtender" runat="server" 
                        TargetControlID="btnRename" PopupControlID="PortfolioRenamePanelMain"
                        PopupDragHandleControlID="RenameTitleBar" BehaviorID="ModalPopupRename"
                        BackgroundCssClass="modalBackground" DropShadow="true" Drag="true" >
                    </asp:ModalPopupExtender></td>
            <td><asp:UpdatePanel ID="UpdatePanelAnimationExtender1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <fieldset style="width:150px">
            <asp:CheckBox ID="chkIsPrivate" runat="server" Text="Portfolio is private" 
                        oncheckedchanged="chkIsPrivate_CheckedChanged"/>                        
                        <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:Label ID="lblPortfolioOwner" runat="server" visible="false" Text="Owner:"></asp:Label>
            </fieldset>
            </ContentTemplate>
            </asp:UpdatePanel></td></tr><tr><td></td><td style="width:150px"></td>
            <td></td></tr></table>            
            </div>
            <br /><br /><br />
            <div><asp:Button ID="btnAddPart" runat="server" Text="Add Part" OnClick="btnAddPart_Click" />
            <asp:Button ID="btnAddCurrentPart" runat="server" Text="Add Current Part" OnClick="btnAddCurrentPart_Click" />
            <asp:Button ID="btnDeletePart" runat="server" Text="Delete Part" OnClick="btnDeletePart_Click" /></div>
        <div id='print_grid'>
            <asp:GridView ID="GridViewPortfolio" runat="server" ShowFooter ="True" 
            OnPageIndexChanging="GridViewPortfolio_PageIndexChanging"
            OnRowUpdating="GridViewPortfolio_RowUpdating" OnRowEditing="GridViewPortfolio_RowEditing"
            OnRowCancelingEdit="GridViewPortfolio_RowCancelingEdit" OnInit="GridViewPortfolio_Init"
            OnRowDeleting="GridViewPortfolio_RowDeleting" OnRowCreated="GridViewPortfolio_RowCreated"
            OnRowDataBound="GridViewPortfolio_RowDataBound" OnSelectedIndexChanged="GridViewPortfolio_SelectedIndexChanged"
                    AllowPaging="False" PageSize="10" AllowSorting="True" AutoGenerateColumns="False"
                    BorderColor="Black" BorderWidth="1px">
                    <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
            </asp:GridView>
            </div>
             </fieldset>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnUpdatePanel" EventName="Click" />
           </Triggers>
            </asp:UpdatePanel>       
            <!-------------------------------->
            
            <asp:Panel ID="CompEditPanelMain" runat="server"
                Direction="LeftToRight" CssClass="ModalWindow" style="display:none">
               <asp:Panel ID="CompTitleBar" runat="server">
            <table>
                <tr><td style="text-align: left" class="HeaderPartDesc" bgcolor="#3366CC"> 
                <asp:Label ID="lblTitleBar" 
                        runat="server" BackColor="#3366CC" style="text-align: left"
                ForeColor="White" Font-Size="Small" Font-Bold="True" Text="Add New Portfolio"></asp:Label>&nbsp;&nbsp;<asp:Label ID="Label2" 
                        runat="server" BackColor="#3366CC" 
                ForeColor="White" Font-Size="Small"></asp:Label></td></tr>
            </table>
        </asp:Panel>
        <div class="OuterListBox">
        <div class="InnerLeftListBox">
         <asp:Panel ID="radioOptionsPanel" runat="server" BorderStyle="Outset">            
            <asp:radiobuttonlist id="radioAddPortfolioOptions" runat="server" RepeatLayout="Table" RepeatDirection="Vertical"
                RepeatColumns="1" CssClass="mylist">
              <asp:listitem id="optHHCompat" runat="server" value="Handheld Compatibility Based Portfolio" Selected="True" />
              <asp:listitem id="optNewPortfolio" runat="server" value="Empty Portfolio" />
            </asp:radiobuttonlist>
            </asp:Panel>
             <asp:Panel ID="PortfolioNmPanel" BorderStyle="Outset" runat="server">
             <table>
                    <tr><td></td></tr>
                    <tr><td><asp:Label ID="lblPortfolioName" runat="server" Text="Portfolio Name" style="text-align: left" ForeColor="#3366CC" 
                Font-Size="Small" Font-Bold="True"/></td>
                <td><asp:TextBox ID="txtPortfolioName" runat="server"
                        Width="100px"></asp:TextBox></td></tr>
                    <tr><td><asp:RequiredFieldValidator runat="server" id="reqPortFolioNm" ControlToValidate="txtPortfolioName"
                    ErrorMessage = "You must enter the Portfolio Name!"
                    display="Dynamic" /><asp:Label ID="lblErrorMessage" BackColor="Red" runat="server" visible="false"/></td></tr></table>
            </asp:Panel>         
        </div>
        <div class="InnerRightListBox">
            <asp:Panel ID="CompEditPanelRight" runat="server">
            </asp:Panel>
            <asp:Panel ID="CompAddPanel" runat="server">
                <table style="width: 180px">
                    <tr><td><asp:Label ID="lblAllComp" runat="server" Text="All Handhelds" ForeColor="#3366CC" 
                Font-Size="Small" Font-Bold="True"/></td><td style="width: 30px"></td></tr>
                    <tr><td style="width: 150px">
                    <p><select id="lstAllComp" size="10" runat="server" style="WIDTH: 176px; HEIGHT: 128px"
                    onchange='OnChange("lstAllComp");'>          
                </select></p></td><td><asp:HiddenField ID="HSelectedListBoxItem" runat="server" />
                <asp:HiddenField ID="HPortfolioID" runat="server" />
                <asp:HiddenField ID="HIsPrivate" runat="server" /></td>
                    </tr>
                </table>
                
            </asp:Panel>
        </div></div>
        <br />
       <asp:Button ID="btnCompAdd" runat="server" Text="Add" OnClick="btnCompAdd_Click"/>
       <asp:Button ID="btnCompCancel" runat="server" Text="Cancel" CausesValidation="False" OnClick="btnCompCancel_Click"/>
       </asp:Panel>
       <asp:Panel ID="PortfolioRenamePanelMain" runat="server"
                Direction="LeftToRight" CssClass="ModalWindowRename" style="display:none">
               <asp:Panel ID="RenameTitleBar" runat="server">
            <table>
                <tr><td style="text-align: left" class="HeaderPartDesc" bgcolor="#3366CC"> 
                <asp:Label ID="lblRenameTitleBar" 
                        runat="server" BackColor="#3366CC" style="text-align: left"
                ForeColor="White" Font-Size="Small" Font-Bold="True" Text="Rename Portfolio"></asp:Label>&nbsp;&nbsp;<asp:Label ID="Label1" 
                        runat="server" BackColor="#3366CC" 
                ForeColor="White" Font-Size="Small"></asp:Label></td></tr>
            </table>
        </asp:Panel>
        <div class="InnerLeftListBox">         
             <asp:Panel ID="RenamePortfolioNmPanel" BorderStyle="Outset" runat="server">
             <table>
                    <tr><td></td></tr>
                    <tr><td><asp:Label ID="lblRenamePortfolioName" runat="server" Text="Portfolio Name" style="text-align: left" ForeColor="#3366CC" 
                Font-Size="Small" Font-Bold="True"/></td>
                <td><asp:TextBox ID="txtRenamePortfolioName" runat="server"
                        Width="100px"></asp:TextBox></td></tr>
                    <tr><td><asp:RequiredFieldValidator runat="server" id="reqRenamePortFolioNm" ControlToValidate="txtRenamePortfolioName"
                    ErrorMessage = "You must enter the Portfolio Name!"
                    display="Dynamic" /><asp:Label ID="lblRenameErrorMessage" BackColor="Red" runat="server" visible="false"/></td></tr></table>
            </asp:Panel>         
        </div>
        <div class="InnerRightListBoxRename">                  
        </div>
        <br />
       <asp:Button ID="btnPopupRename" runat="server" Text="Rename" style="height:25px;width:61px" OnClick="btnPopupRename_Click"/>
       <asp:Button ID="btnRenameCancel" runat="server" Text="Cancel" style="height:25px;width:61px" CausesValidation="False" OnClick="btnRenameCancel_Click"/>
       
       </asp:Panel>

Code Behind:


//Javascript

function ShowPopup(PopupBehaviorID)
        {
            var modalPopupBehaviorCtrl = $find(PopupBehaviorID);
            modalPopupBehaviorCtrl.show();
            return false;
        }

 function UpdPanelUpdate(value)
        {   alert(value);
            var obj = document.getElementById("<%= text.ClientID %>");   
            obj.value=value;   
            __doPostBack("<%= btnUpdatePanel.ClientID %>","");
        }

Code Behind:
private void ddlPortfolios_SelectedIndexChanged(object sender, System.EventArgs e)
        {
            //Get PortfolioID for the item selected in the dropdownlist
            string PortfolioNm = ddlPortfolios.SelectedItem.Text.ToString();

            txtRenamePortfolioName.Text = PortfolioNm;

            string js = string.Empty;
            js = js + "UpdPanelUpdate('" + PortfolioNm + "'); ";
            Page.ClientScript.RegisterStartupScript(this.GetType(), "UpdPanelUpdate", js, true);


                    }

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
Use another update panel inside the modalpopup and on the triggers section register the button that triggers the change. That should tell AJAX to update the original updatePanel and the new updatePanel that is inside the modalpopup

Author

Commented:
cat_clan, Thanks for your reply. As you suggested, I have added an UpdatePanel in the modalpoup panel as follows however with no luck. It still does not refresh the textbox as desired:

<asp:Panel ID="PortfolioRenamePanelMain" runat="server"
                Direction="LeftToRight" CssClass="ModalWindowRename" style="display:none">                
               <asp:Panel ID="RenameTitleBar" runat="server">
            <table>
                <tr><td style="text-align: left" class="HeaderPartDesc" bgcolor="#3366CC">
                <asp:Label ID="lblRenameTitleBar"
                        runat="server" BackColor="#3366CC" style="text-align: left"
                ForeColor="White" Font-Size="Small" Font-Bold="True" Text="Rename Portfolio"></asp:Label>&nbsp;&nbsp;<asp:Label ID="Label1"
                        runat="server" BackColor="#3366CC"
                ForeColor="White" Font-Size="Small"></asp:Label></td>
        </tr>
            </table>
        </asp:Panel>
        <asp:UpdatePanel ID="UpdatePanelPortfolioRename" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <fieldset style="width:200px">
        <div class="InnerLeftListBox">        
             <asp:Panel ID="RenamePortfolioNmPanel" BorderStyle="Outset" runat="server">
             <table>
                    <tr><td></td></tr>
                    <tr><td><asp:Label ID="lblRenamePortfolioName" runat="server" Text="Portfolio Name" style="text-align: left" ForeColor="#3366CC"
                Font-Size="Small" Font-Bold="True"/></td>
                <td><asp:TextBox ID="txtRenamePortfolioName" runat="server"
                        Width="100px"></asp:TextBox></td></tr>
                    <tr><td><asp:RequiredFieldValidator runat="server" id="reqRenamePortFolioNm" ControlToValidate="txtRenamePortfolioName"
                    ErrorMessage = "You must enter the Portfolio Name!"
                    display="Dynamic" /><asp:Label ID="lblRenameErrorMessage" BackColor="Red" runat="server" visible="false"/></td></tr></table>
            </asp:Panel>        
        </div>
        </fieldset></ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnUpdatePanel" EventName="Click" />
           </Triggers>
            </asp:UpdatePanel>
        <div class="InnerRightListBoxRename">                  
        </div>        
        <br />
       <asp:Button ID="btnPopupRename" runat="server" Text="Rename" style="height:25px;width:61px" OnClick="btnPopupRename_Click"/>
       <asp:Button ID="btnRenameCancel" runat="server" Text="Cancel" style="height:25px;width:61px" CausesValidation="False" OnClick="btnRenameCancel_Click"/>
       
       </asp:Panel>

any clues?

Commented:
I think the trouble recide in the fact that your trigger ControlID is not the correct one. In the ControlID you have to put the ID of the button that fires the change, which I think it should be "ddlPortfolios" with the event "SelectedIndexChanged"
Exploring SQL Server 2016: Fundamentals

Learn the fundamentals of Microsoft SQL Server, a relational database management system that stores and retrieves data when requested by other software applications.

Author

Commented:
Do I have to make this changes in both updatePanels, the main and the one in popupextender?

Commented:
In the one with the ID "UpdatePanelPortfolioRename"
Commented:
I recommend that you delete the following
string js = string.Empty;
js = js + "UpdPanelUpdate('" + PortfolioNm + "'); ";
Page.ClientScript.RegisterStartupScript(this.GetType(), "UpdPanelUpdate", js, true);

Open in new window

Author

Commented:
Great, thanks cat_clan. Now it works great.

Here is the final code for the popup panel with upDatePanel inside it for future reference:

<asp:Panel ID="PortfolioRenamePanelMain" runat="server"
                Direction="LeftToRight" CssClass="ModalWindowRename" style="display:none">                
               <asp:Panel ID="RenameTitleBar" runat="server">
            <table>
                <tr><td style="text-align: left" class="HeaderPartDesc" bgcolor="#3366CC">
                <asp:Label ID="lblRenameTitleBar"
                        runat="server" BackColor="#3366CC" style="text-align: left"
                ForeColor="White" Font-Size="Small" Font-Bold="True" Text="Rename Portfolio"></asp:Label>&nbsp;&nbsp;<asp:Label ID="Label1"
                        runat="server" BackColor="#3366CC"
                ForeColor="White" Font-Size="Small"></asp:Label></td>
        </tr>
            </table>
        </asp:Panel>
        <asp:UpdatePanel ID="UpdatePanelPortfolioRename" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <fieldset style="width:200px">
        <div class="InnerLeftListBox">        
             <asp:Panel ID="RenamePortfolioNmPanel" BorderStyle="Outset" runat="server">
             <table>
                    <tr><td></td></tr>
                    <tr><td><asp:Label ID="lblRenamePortfolioName" runat="server" Text="Portfolio Name" style="text-align: left" ForeColor="#3366CC"
                Font-Size="Small" Font-Bold="True"/></td>
                <td><asp:TextBox ID="txtRenamePortfolioName" runat="server"
                        Width="100px"></asp:TextBox></td></tr>
                    <tr><td><asp:RequiredFieldValidator runat="server" id="reqRenamePortFolioNm" ControlToValidate="txtRenamePortfolioName"
                    ErrorMessage = "You must enter the Portfolio Name!"
                    display="Dynamic" /><asp:Label ID="lblRenameErrorMessage" BackColor="Red" runat="server" visible="false"/></td></tr></table>
            </asp:Panel>        
        </div>
        </fieldset></ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="ddlPortfolios" EventName="SelectedIndexChanged" />
           </Triggers>
            </asp:UpdatePanel>
        <div class="InnerRightListBoxRename">                  
        </div>        
        <br />
       <asp:Button ID="btnPopupRename" runat="server" Text="Rename" style="height:25px;width:61px" OnClick="btnPopupRename_Click"/>
       <asp:Button ID="btnRenameCancel" runat="server" Text="Cancel" style="height:25px;width:61px" CausesValidation="False" OnClick="btnRenameCancel_Click"/>
       
       </asp:Panel>

Author

Commented:
Great, thanks cat_clan. Now it works great.

Author

Commented:
Can you answer this one as this is related to this question:

http://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/Q_25107140.html

Author

Commented:
cat_clan,

I remember you helped me with this one, can you please help me with this one as it involves the same updatepanel, popup extender and ajax:

http://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/Q_25272995.html#a27292568

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial