asked on

Textbox in the modalpopup extender not refreshed

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

cat_clan

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

skaleem1

ASKER

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

cat_clan

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"

skaleem1

ASKER

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

cat_clan

In the one with the ID "UpdatePanelPortfolioRename"

ASKER CERTIFIED SOLUTION

cat_clan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

skaleem1

ASKER

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

skaleem1

ASKER

Great, thanks cat_clan. Now it works great.

skaleem1

ASKER

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

https://www.experts-exchange.com/questions/25107140/Update-Panel-and-ModalpopupExtender-issue-that-stops-the-button-click-event-from-executing.html

skaleem1

ASKER

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:

https://www.experts-exchange.com/questions/25272995/Multiple-Ajax-calls-on-the-same-page-first-not-firing-when-the-page-is-accessed-by-Response-Redirect.html?anchorAnswerId=27292568#a27292568