locked
clearing modal popup extender textbox values RRS feed

  • Question

  • User-640323567 posted

    Hi,

    I have a gridview in an update panel and a dropdown list. When an item is selected from the dropdown, a modal popup panel gets opened and it contains some textboxes for input. After entering data into the fields in panel, I click 'Ok' button and the data gets bind to the gridview. Everything works nice until here but after opening the modal popup panel again, the field values are not getting erased. I still see the previous values. How do I clear after every 'Ok' click and opening panel again?

    Here is my mark up and code behind. Please take a look and guide me. Thanks.

     <asp:DropDownList ID="dlChoice" runat="server" AutoPostBack="true"
                                OnSelectedIndexChanged="dlChoice_SelectedIndexChanged">
                                <asp:ListItem Text="Select an option" Value="" />
                                <asp:ListItem>AAA</asp:ListItem>
                                <asp:ListItem>BBB</asp:ListItem>
                                <asp:ListItem>CCC</asp:ListItem>
                            </asp:DropDownList>
    <asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" align="center" Style="display: none" Width="800px" Height="250px">
                                <div style="float: left;">
                                    <label class="popupLabel">
                                        Date: 
                                    </label>
                                    <asp:TextBox BorderStyle="inset" BorderWidth="2px" BorderColor="Black" ID="txtDate" runat="server"></asp:TextBox><br />
                                    <br />
                                    <label class="popupLabel">
                                        Type: 
                                    </label>
                                    <asp:TextBox BorderStyle="inset" BorderWidth="2px" BorderColor="Black" ID="txtType" runat="server"></asp:TextBox><br />
                                    <br />
                                    <label class="popupLabel">
                                        Form: 
                                    </label>
                                    <asp:TextBox BorderStyle="inset" BorderWidth="2px" BorderColor="Black" ID="txtForm" runat="server"></asp:TextBox>
                                </div>
    <div style="clear: both; margin: auto;">
                                    <br />
                                    <asp:Button ID="btnClose2" runat="server" Text="Ok" OnClick="btnClose2_Click" UseSubmitBehavior="False" CausesValidation="false" />
                                </div>
                            </asp:Panel>
                                </asp:Panel>
    
    <div id="datagrid">
                                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                                    <ContentTemplate>
                                        <asp:GridView ID="GridView1" runat="server" HeaderStyle-BackColor="CornflowerBlue" HeaderStyle-Font-Bold="true" HeaderStyle-ForeColor="White" CellPadding="5">
                                        </asp:GridView>
                                    </ContentTemplate>
                                    <Triggers>
                                        <asp:AsyncPostBackTrigger ControlID="btnClose2" EventName="Click" />
                                    </Triggers>
                                </asp:UpdatePanel>
                            </div>
    
    protected void Page_Load(object sender, EventArgs e)
    		{
               
    
                Page.MaintainScrollPositionOnPostBack = true;
    
                if (!Page.IsPostBack)
                {
                    DataTable dt = new DataTable();
                    dt.Columns.Add("Date");
                    dt.Columns.Add("Type");
                    dt.Columns.Add("Form");
    
    
                    DataRow oItem = dt.NewRow();
    
                    GridView1.DataSource = dt;
                    GridView1.DataBind();
                    ViewState["dt"] = dt;
    
                  
                    
                }
            }
            protected void dlChoice_SelectedIndexChanged(object sender, EventArgs e)
            {
                DropDownList ddl = (DropDownList)sender;
    
                if (ddl.SelectedValue == "AAA")
                {
                    popupExtender.Show();
                }
                else if (ddl.SelectedValue == "BBB")
                {
                    popupExtender.Show();
                }
                else if(ddl.SelectedValue=="CCC")
                {
                    Modalpopupextender1.Show();
                }
                   
            }
    
            protected void btnClose2_Click(object sender, EventArgs e)
            {
    
                DataTable dt = (DataTable)ViewState["dt"];
    
                DataRow oItem = dt.NewRow();
                oItem[0] = txtDate.Text;
                oItem[1] = txtType.Text;
                oItem[2] = txtForm.Text;
                dt.Rows.Add(oItem);
    
                GridView1.DataSource = dt;
                GridView1.DataBind();
    
               
                popupExtender.Hide();
    
            }
    



    Tuesday, October 6, 2015 2:02 PM

Answers

  • User2103319870 posted

    To call the function on pageload.. I did something like this with window.onload:

    You don't need window.onload there. for me the textbox is getting cleared with out that code itself.

     <script type="text/javascript">
                // call the function on pageload
                function pageLoad() {
                    //Get the Modalpopupextender based on BehaviorID
                    var mpe = $find("modalPopupExtender1");
                    //Attach the clearvalues function to it
                    mpe.add_shown(clearvalues);
                }
                //Function to clear the values
                //Add other control also here
                function clearvalues() {
                    var textbox3 = $get("txtDate");
                    txtDate.value = "";
                }
            </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 7, 2015 4:48 PM

All replies

  • User2103319870 posted

    How do I clear after every 'Ok' click and opening panel again?

    Try clearing the values fromtextbox after adding it to Gridview and before closing the modal popup

     protected void btnClose2_Click(object sender, EventArgs e)
            {
    
                DataTable dt = (DataTable)ViewState["dt"];
    
                DataRow oItem = dt.NewRow();
                oItem[0] = txtDate.Text;
                oItem[1] = txtType.Text;
                oItem[2] = txtForm.Text;
                dt.Rows.Add(oItem);
    
                GridView1.DataSource = dt;
                GridView1.DataBind();
    
                //Clear the values here
                txtDate.Text = String.Empty;
                txtType.Text = String.Empty;
                txtForm.Text = String.Empty; 
                popupExtender.Hide();
    
            }

    Tuesday, October 6, 2015 2:22 PM
  • User-640323567 posted

    Thanks a2h for the reply.

    But it did not work! I am still seeing the values after opening the modal popup again!

    Tuesday, October 6, 2015 2:33 PM
  • User2103319870 posted

    ASPbun

    But it did not work! I am still seeing the values after opening the modal popup again!

    You can try with the below script to clear values from textbox

     <script type="text/javascript">
                // call the function on pageload
                function pageLoad() {
                    //Get the Modalpopupextender based on BehaviorID
                    var mpe = $find("modalPopupExtender1");
                    //Attach the clearvalues function to it
                    mpe.add_shown(clearvalues);
                }
                //Function to clear the values
                //Add other control also here
                function clearvalues() {
                    var textbox3 = $get("txtDate");
                    txtDate.value = "";
                }
            </script>

    Now set value to BehaviourID property of ModalPopupExtender control

      <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BehaviorID="modalPopupExtender1"
                TargetControlID="btnOpenPopup" PopupControlID="PnlModal" BackgroundCssClass="modalBackground">
            </ajaxToolkit:ModalPopupExtender>

    Complete Code

     <script type="text/javascript">
                // call the function on pageload
                function pageLoad() {
                    //Get the Modalpopupextender based on BehaviorID
                    var mpe = $find("modalPopupExtender1");
                    //Attach the clearvalues function to it
                    mpe.add_shown(clearvalues);
                }
                //Function to clear the values
                //Add other control also here
                function clearvalues() {
                    var textbox3 = $get("txtDate");
                    txtDate.value = "";
                }
            </script>
            <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BehaviorID="modalPopupExtender1"
                TargetControlID="btnOpenPopup" PopupControlID="PnlModal" BackgroundCssClass="modalBackground">
            </ajaxToolkit:ModalPopupExtender>
            <asp:Button ID="btnOpenPopup" runat="server" Text="OpenPopup" /><br />
            <%--The below panel will display as your confirm window--%>
            <asp:Panel ID="PnlModal" runat="server" Width="500px" CssClass="modalPopup">
                <div style="float: left;">
                    <label class="popupLabel">
                        Date: 
                    </label>
                    <asp:TextBox BorderStyle="inset" BorderWidth="2px" BorderColor="Black" ID="txtDate" runat="server"></asp:TextBox><br />
                    <br />
                    <label class="popupLabel">
                        Type: 
                    </label>
                    <asp:TextBox BorderStyle="inset" BorderWidth="2px" BorderColor="Black" ID="txtType" runat="server"></asp:TextBox><br />
                    <br />
                    <label class="popupLabel">
                        Form: 
                    </label>
                    <asp:TextBox BorderStyle="inset" BorderWidth="2px" BorderColor="Black" ID="txtForm" runat="server"></asp:TextBox>
                </div>
                <div style="clear: both; margin: auto;">
                    <br />
                    <asp:Button ID="btnClose2" runat="server" Text="Ok" OnClick="btnClose2_Click" UseSubmitBehavior="False" CausesValidation="false" />
                </div>
            </asp:Panel>

    Demo

    Tuesday, October 6, 2015 7:17 PM
  • User-640323567 posted

    Thanks a2h.

    To call the function on pageload.. I did something like this with window.onload:

     <script type="text/javascript">
              window.onload = function pageLoad(){
                   //Get the Modalpopupextender based on BehaviorID
                    var mpe = $find("popupExtender");
                    //Attach the clearvalues function to it
                    mpe.add_shown(clearvalues);
                }
                //Function to clear the values
                //Add other control also here
                function clearvalues() {
                    var textbox3 = $get("TextBox10");
                    txtDate.value = "";
             }
        </script>

    is this correct? I am still not able to clear the values. Please help me. Thank you.

    Wednesday, October 7, 2015 4:39 PM
  • User2103319870 posted

    To call the function on pageload.. I did something like this with window.onload:

    You don't need window.onload there. for me the textbox is getting cleared with out that code itself.

     <script type="text/javascript">
                // call the function on pageload
                function pageLoad() {
                    //Get the Modalpopupextender based on BehaviorID
                    var mpe = $find("modalPopupExtender1");
                    //Attach the clearvalues function to it
                    mpe.add_shown(clearvalues);
                }
                //Function to clear the values
                //Add other control also here
                function clearvalues() {
                    var textbox3 = $get("txtDate");
                    txtDate.value = "";
                }
            </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 7, 2015 4:48 PM