Show hide HTML DIV based on AJAX ComboBox selection using jQuery in ASP.Net

zzchixo

SOLVED CLOSED ACTIVE ANSWERED
User: zzchixo
Posted: on Apr 10, 2014 03:25 AM
Forum: ASP.Net AJAX
Answer: 1
Views: 4335

Hello everyone,

Is there much easy way to implement the follwing:

i have 4 comboxes (com1, com2, com3,com4) and 4 tables (tab1, tab2, tab3, tab4) com1 and tab 1 have master table relationships i.e when in com1 the name is entered tab 1 shows the result of that entry. the same is for the rest comboxes and tables.

Now what i am trying to do is when an user clickes on com1 and types the name of the employee tab2 tab 3 and tab 4 should be hidden. if com2 is clicked tab1 and tab3, ta4 shoud be hidden.etc

Currenty i am using this code which i do not like. Is there any easy and short way to do hide an show.

this is the code i am using

<script type="text/javascript">
        $("#com1").on('click', function () {
            $("#div1").fadeIn();
            $("#tab2").fadeOut();
            $("#tab3").fadeOut();
            $("#tab4").fadeOut();
        });

        $("#com2").on('click', function () {
            $("#tab1").fadeOut();
            $("#tab2").fadeIn();
            $("#tab3").fadeOut();
            $("#tab4").fadeOut();
        });

        $("#com3").on('click', function () {
            $("#tab1").fadeOut();
            $("#tab2").fadeOut();
            $("#tab3").fadeIn();
            $("#tab4").fadeOut();
        });

        $("#com4").on('click', function () {
            $("#tab1").fadeOut();
            $("#tab2").fadeOut();
            $("#tab3").fadeOut();
            $("#tab4").fadeIn();
        });
    </script>

 <cc1:ComboBox ID="Com1" runat="server">
    </cc1:ComboBox>
<cc1:ComboBox ID="Com2" runat="server">
    </cc1:ComboBox>
<cc1:ComboBox ID="Com3" runat="server">
    </cc1:ComboBox>
<cc1:ComboBox ID="Com4" runat="server">
    </cc1:ComboBox>

 
    <br />

<asp:GridView ID="tab1" runat="server">
    </asp:GridView>
<asp:GridView ID="tab2" runat="server">
    </asp:GridView>
  <asp:GridView ID="tab2" runat="server">
    </asp:GridView>
 <asp:GridView ID="tab4" runat="server">
    </asp:GridView>

Mudassar

0 3

Reply
ANSWER
User: Mudassar
Replied: on Apr 12, 2014 01:24 AM
Report

You can do this way

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        function check() {

        }
        $(document).ready(function () {
            $("[id*=Com1]").click(function () {
                $(".tabs").each(function (i) {
                    $(this).fadeOut();
                    if (i == 0) {
                        $(this).fadeIn();
                    }
                });
            });
            $("[id*=Com2]").click(function () {
                $(".tabs").each(function (i) {
                    $(this).fadeOut();
                    if (i == 1) {
                        $(this).fadeIn();
                    }
                });
            });
            $("[id*=Com3]").click(function () {
                $(".tabs").each(function (i) {
                    $(this).fadeOut();
                    if (i == 2) {
                        $(this).fadeIn();
                    }
                });
            });
            $("[id*=Com4]").click(function () {
                $(".tabs").each(function (i) {
                    $(this).fadeOut();
                    if (i == 3) {
                        $(this).fadeIn();
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <cc1:ToolkitScriptManager runat="server">
        </cc1:ToolkitScriptManager>
        <cc1:ComboBox ID="Com1" runat="server">
            <asp:ListItem Text="Select"></asp:ListItem>
            <asp:ListItem Text="Yes"></asp:ListItem>
        </cc1:ComboBox>
        <cc1:ComboBox ID="Com2" CssClass="cbDemo" runat="server">
            <asp:ListItem Text="Select"></asp:ListItem>
            <asp:ListItem Text="Yes"></asp:ListItem>
        </cc1:ComboBox>
        <cc1:ComboBox ID="Com3" runat="server">
            <asp:ListItem Text="Select"></asp:ListItem>
            <asp:ListItem Text="Yes"></asp:ListItem>
        </cc1:ComboBox>
        <cc1:ComboBox ID="Com4" runat="server">
            <asp:ListItem Text="Select"></asp:ListItem>
            <asp:ListItem Text="Yes"></asp:ListItem>
        </cc1:ComboBox>
        <asp:GridView ID="tab1" CssClass = "tabs" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
            runat="server" AutoGenerateColumns="false" Style="display: none">
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
                <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
                <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
            </Columns>
        </asp:GridView>
        <br />
        <asp:GridView ID="tab2" CssClass = "tabs" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
            runat="server" AutoGenerateColumns="false" Style="display: none">
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
                <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
                <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
            </Columns>
        </asp:GridView>
        <br />
        <asp:GridView ID="tab3" CssClass = "tabs" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
            runat="server" AutoGenerateColumns="false" Style="display: none">
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
                <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
                <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
            </Columns>
        </asp:GridView>
        <br />
        <asp:GridView ID="tab4" CssClass = "tabs" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
            runat="server" AutoGenerateColumns="false" Style="display: none">
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
                <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
                <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
            </Columns>
        </asp:GridView>
        <br />
    </div>
    </form>
</body>
</html>

C#:

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                        new DataColumn("Name", typeof(string)),
                        new DataColumn("Country",typeof(string)) });
        dt.Rows.Add(1, "John Hammond", "United States");
        tab1.DataSource = dt;
        tab1.DataBind();
        dt.Rows.RemoveAt(0);
        dt.Rows.Add(2, "Mudassar Khan", "India");
        tab2.DataSource = dt;
        tab2.DataBind();
        dt.Rows.RemoveAt(0);
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        tab3.DataSource = dt;
        tab3.DataBind();
        dt.Rows.RemoveAt(0);
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        tab4.DataSource = dt;
        tab4.DataBind();            
    }
}

Show hide HTML DIV based on AJAX ComboBox selection using jQuery in ASP.Net

Company

Explore

Follow us

Contact Us