CODEWITHSUNDEEP
javascriptc#jqueryasp.net
VIPUL PARMAR
VIPUL PARMAR

Reputation: 292

hide div from update panel in asp.net

All the code is working but only one problem is that div can not hide after button click event is fire. how to hide "addresspopup" div after button "btnAddress" is click.

I have use update panel in div block.

Below is my code please help as soon as possible.

page.aspx

<head>
            <script type="text/javascript">
                function Validate() {
                    document.getElementById("btnPincode").click();
                }
            </script>

            <script type="text/javascript">
                $(document).ready(function(){
                    $(document).keyup(function(e) { 
                        if (e.keyCode == 27) { // esc keycode
                            $('#addresspopup').hide();
                        }
                    });
                });
                function DisplayOption(options)
                {   
                    if(options=='Address'){
                        $("#addresspopup").show();
                        return true;
                    }

                    if(options=='AddressClose'){
                        $("#addresspopup").hide();
                        return true;
                    }
                }
            </script>
    </head>
    <body>

         <a id="addnewaddress" href="#" onclick="javascript:DisplayOption('Address');" class="button_black big_btn fullscreen-container">Add New Address</a>


            <div id="addresspopup" style="display:none;" runat="server">
                            <div class="arcticmodal-overlay" style="opacity: 0.6; background-color: rgb(0, 0, 0);"></div>
                            <div class="arcticmodal-container">
                                <div class="arcticmodal-container_i">
                                    <div>
                                    <div class="arcticmodal-container_i2">
                                        <div id="addresspopup_mw" class="modal_window">

                                            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                                                <ContentTemplate>
                                                    <a onclick="javascript:DisplayOption('AddressClose');" class="close arcticmodal-close"></a>

                                                    <header class="on_the_sides">
                                                        <div class="left_side">
                                                            <h4>Enter a new shipping address</h4>
                                                        </div>
                                                    </header><!--/ .on_the_sides-->

                                                    <div class="type_2">
                                                        <div id="errorpincode1" runat="server" visible="false" class="alert_box error mar-bottom10">
                                                            <asp:Label ID="lblErrorpincode1" runat="server" Text="Error"></asp:Label>
                                                        </div>
                                                        <ul>
                                                            <li>
                                                                <asp:TextBox ID="txtAddressName" runat="server" placeholder="Your name *"></asp:TextBox>
                                                            </li>
                                                            <li>
                                                                <asp:TextBox ID="txtAddress" runat="server" placeholder="Address *" Rows="4" TextMode="MultiLine"></asp:TextBox>
                                                            </li>
                                                            <li>
                                                                <asp:TextBox ID="txtLandmark" runat="server" placeholder="Landmark"></asp:TextBox>
                                                            </li>
                                                            <li>
                                                                <asp:TextBox ID="txtPincode" runat="server" MaxLength="6" OnBlur="javascript:Validate()" placeholder="Pincode *"></asp:TextBox>
                                                                <asp:Button ID="btnPincode" runat="server" Text="Button" onclick="btnPincode_Click" style="display:none" ></asp:Button>
                                                            </li>
                                                            <li>
                                                                <asp:TextBox ID="txtCity" runat="server" placeholder="City *"></asp:TextBox>
                                                            </li>
                                                            <li>
                                                                <asp:DropDownList ID="ddlState" runat="server" class="mar-bottom5">
                                                                </asp:DropDownList>
                                                            </li>
                                                            <li>
                                                                <asp:TextBox ID="txtPhone" runat="server" placeholder="Phone *"></asp:TextBox>
                                                            </li>

                                                            <li class="v_centered pad-top-10">
                                                                <asp:Button ID="btnAddress" runat="server" class="button_black big_btn fullscreen-container" Text="Save & Continue" OnClick="btnAddress_Click"></asp:Button>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </ContentTemplate>
                                                <Triggers>
                                                    <asp:AsyncPostBackTrigger ControlID="btnAddress" />
                                                </Triggers>
                                            </asp:UpdatePanel>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>
    </body>

page.cs file

protected void btnAddress_Click(object sender, EventArgs e)
{
        if (txtAddressName.Text == "")
        {
            lblErrorpincode1.Text = "Please enter your Full Name";
            errorpincode1.Visible = true;
            SetFocus(txtAddressName);
            return;
        }
        else
        {
            errorpincode1.Visible = false;
        }

        if (txtAddress.Text == "")
        {
            lblErrorpincode1.Text = "Please enter your Full Address";
            errorpincode1.Visible = true;
            SetFocus(txtAddress);
            return;
        }
        else
        {
            errorpincode1.Visible = false;
        }

        if (txtPincode.Text == "")
        {
            lblErrorpincode1.Text = "Please enter your Pincode";
            errorpincode1.Visible = true;
            SetFocus(txtPincode);
            return;
        }
        else
        {
            errorpincode1.Visible = false;
        }

        if (txtCity.Text == "")
        {
            lblErrorpincode1.Text = "Please enter your City";
            errorpincode1.Visible = true;
            SetFocus(txtCity);
            return;
        }
        else
        {
            errorpincode1.Visible = false;
        }

        if (ddlState.SelectedIndex == 0)
        {
            lblErrorpincode1.Text = "Please select your State";
            errorpincode1.Visible = true;
            SetFocus(ddlState);
            return;
        }
        else
        {
            errorpincode1.Visible = false;
        }

        if (txtPhone.Text == "")
        {
            lblErrorpincode1.Text = "Please enter your Phone Number";
            errorpincode1.Visible = true;
            SetFocus(txtPhone);
            return;
        }
        else
        {
            errorpincode1.Visible = false;
        }

        string pin = " AND Pincode = " + txtPincode.Text + " ";
        DataTable dt = bll.getCustomDeliverySearch(pin);

        if (dt.Rows[0][5].ToString() == "False")
        {
            lblErrorpincode1.Text = "As of now we DO NOT Deliver at this Address. Please add Another Address.!";
            errorpincode1.Visible = true;
            return;
        }
        else
        {
            errorpincode1.Visible = false;
        }

        DateTime created;
        DateTime modified;

        created = DateTime.ParseExact(DateTime.Now.ToString("MM/dd/yyyy hh:mm:ss tt"), "MM/dd/yyyy hh:mm:ss tt", System.Globalization.CultureInfo.InvariantCulture);
        modified = DateTime.ParseExact(DateTime.Now.ToString("MM/dd/yyyy hh:mm:ss tt"), "MM/dd/yyyy hh:mm:ss tt", System.Globalization.CultureInfo.InvariantCulture);

        // QUERY for insert data here

        Session["Name"] = FixString(txtAddressName.Text);
        Session["Address"] = FixString(txtAddress.Text) + ", " + FixString(txtLandmark.Text);
        Session["City"] = txtCity.Text;
        Session["Pincode"] = txtPincode.Text;
        Session["State"] = ddlState.SelectedValue;
        Session["Mobile"] = txtPhone.Text;

            BindData();
            addresspopup.Attributes.Add("Style", "display:none;");
}

Upvotes: 1

Views: 3241

Answers (1)

Suprabhat Biswal
Suprabhat Biswal

Reputation: 3216

You can make a async call using ScriptManager during postback to hide your div section.

CodeBehind:

ScriptManager.RegisterStartupScript(this.Page, typeof(Page), "hideaddress", "javascript: $(function(){ hideAddress(); });", true);

Aspx

<body>
   <div> ... </div>
   <script type="text/javascript">
      function hideAddress() {
        $('#addresspopup').hide();
      }
   </script>
</body>

Add a script block above end of body tag. Also you need to comment out following line and use above mentioned code.

addresspopup.Attributes.Add("Style", "display:none;");

Upvotes: 2

Related Questions