Question

I had written a jquery code to hide some labels, textbox contained in tables and display one of the tables based on the selection of drop down list. I am also retrieving some data from server and assigning it to the labels, textboxes in tables in the jquery code itself. My problem is when i select one of the option all table gets hidden. But my code logic is to show one table. Everything is fine. Even there is no postback behind the code file. Could you help me out? Thanks in advance.
My code is as follow,

$(function() {
    //start of function...

var d1;

 $.ajax({
    type: "POST",
    url: "<%=ResolveUrl("~/HRLetterService.asmx") %>/GetUserDetailsByUserId",                    
    contentType: "application/json; charset=utf-8",
    data: "{userid : '" + $("#<%=hInitiatorUserId.ClientID %>").val() + "'}",
    dataType: "json",
    success: function(msg) {
        //alert("success executed");
        d1 = eval(msg.d);               
                            } 
});

$("#<%=ddlLetterType.ClientID %>").change(function (ev) {
    var o = $(this);
    if(o.val() == "1") {
        $("#<%=lblEmployeeName.ClientID %>").text(d1.employee_name);
        $("#<%=tblBusinessData.ClientID %>").show();
        $("#<%=tblEmploymentData.ClientID %>").hide();
        $("#<%=tblNoObjectionData.ClientID %>").hide();
        $("#<%=tblPersonalData.ClientID %>").hide();
        $("#<%=tblSalaryData.ClientID %>").hide();
        $("#<%=tblSalaryTransferData.ClientID %>").hide();                 
    } else if(o.val() == "2") {
        $("#<%=tblBusinessData.ClientID %>").hide();
        $("#<%=tblEmploymentData.ClientID %>").show();
        $("#<%=tblNoObjectionData.ClientID %>").hide();
        $("#<%=tblPersonalData.ClientID %>").hide();
        $("#<%=tblSalaryData.ClientID %>").hide();
        $("#<%=tblSalaryTransferData.ClientID %>").hide();                 
    } else if(o.val() == "3") {
        $("#<%=tblBusinessData.ClientID %>").hide();
        $("#<%=tblEmploymentData.ClientID %>").hide();
        $("#<%=tblNoObjectionData.ClientID %>").show();
        $("#<%=tblPersonalData.ClientID %>").hide();
        $("#<%=tblSalaryData.ClientID %>").hide();
        $("#<%=tblSalaryTransferData.ClientID %>").hide();                 
    } else if(o.val() == "4") {
        $("#<%=tblBusinessData.ClientID %>").hide();
        $("#<%=tblEmploymentData.ClientID %>").hide();
        $("#<%=tblNoObjectionData.ClientID %>").hide();
        $("#<%=tblPersonalData.ClientID %>").show();
        $("#<%=tblSalaryData.ClientID %>").hide();
        $("#<%=tblSalaryTransferData.ClientID %>").hide();                
    } else if(o.val() == "5") {
        $("#<%=tblBusinessData.ClientID %>").hide();
        $("#<%=tblEmploymentData.ClientID %>").hide();
        $("#<%=tblNoObjectionData.ClientID %>").hide();
        $("#<%=tblPersonalData.ClientID %>").hide();
        $("#<%=tblSalaryData.ClientID %>").show();
        $("#<%=tblSalaryTransferData.ClientID %>").hide();                 
    } else if(o.val() == "6") {
        $("#<%=tblBusinessData.ClientID %>").hide();
        $("#<%=tblEmploymentData.ClientID %>").hide();
        $("#<%=tblNoObjectionData.ClientID %>").hide();
        $("#<%=tblPersonalData.ClientID %>").hide();
        $("#<%=tblSalaryData.ClientID %>").hide();
        $("#<%=tblSalaryTransferData.ClientID %>").show();                 
    } else {
        $("#<%=tblBusinessData.ClientID %>").hide();
        $("#<%=tblEmploymentData.ClientID %>").hide();
        $("#<%=tblNoObjectionData.ClientID %>").hide();
        $("#<%=tblPersonalData.ClientID %>").hide();
        $("#<%=tblSalaryData.ClientID %>").hide();
        $("#<%=tblSalaryTransferData.ClientID %>").hide();                 
    }
});

});
//end of function.

My code for one of the tables is as follow,

<div style="width: 98%; margin-left: 10px; margin-right: 10px;">
    <table class="tableClass" id="tblBusinessData" style="display: none; width: 100%"
        runat="server">
        <tr class="trClass" style="width: 100%">
            <th class="full" colspan="4">
                Details
            </th>
        </tr>
        <tr class="trClass">
            <td class="first" style="width: 20%">
                Employee Name:
            </td>
            <td class="last" style="width: 30%">
                <asp:Label ID="lblEmployeeName" runat="server" Width="62%" TabIndex="1"></asp:Label>
            </td>
            <td class="first" style="width: 20%">
                Company:
            </td>
            <td class="last" style="width: 30%">
                <asp:Label ID="lblCompanyName" runat="server" Width="62%" TabIndex="2"></asp:Label>
            </td>
        </tr>
        .
        .
        .
        .

My code behind file code at pageload is as follow,

 protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        try
        {
            if (Request["requestid"] == "0")
            {
                BindLetterType();
            }
            else
            {}
        }
        catch (Exception exp)
        {
           throw exp;
        }
    }
}

Answer 1

You can get rid of 90% of the code shown by simply hiding the whole class of tables with one line and remove all of the other lines you have with hide() in them.

Now only show the applicable table based on option selected. Now if you store the table “name” in the option tags that you can use simply to match the ID of the table you can pull that out of the change event

   <option value="2" data-table="tblBusinessData">Option text</option>


   $("#<%=ddlLetterType.ClientID %>").change(function (ev) {
       /* hide all tables*/
       $('.tableClass').hide();
        var table=$(this).find(':selected').data('table');
        /* show table chosen*/
        $('#'+table).show();
        /* prevent default */
       return false;
   });

Alternative to adding data-table to option tags, if there is any index relationship between the numeric values of the option tags and the tableClass tables you could do :

$("#<%=ddlLetterType.ClientID %>").change(function (ev) {

        var tableINdex= 1* $(this).val()-1;
       /* hide all tables, except indexed one*/
       $('.tableClass').hide().eq( tableIndex).show();  

   });

jQuery Index Method Docs

Or Store the table ID’s in array with indexing that matches the option tag values

     var tables=['tblBusinessData',
    'tblEmploymentData',
    'tblNoObjectionData',
    'tblPersonalData',
    'tblSalaryData',
    'tblSalaryTransferData'];

   $("#<%=ddlLetterType.ClientID %>").change(function (ev) {           
        var tableINdex= 1* $(this).val()-1;
       /* hide all tables, except indexed one*/
       $('.tableClass').hide()
       $('#'+ tables [ tableINdex ]).show(); 
        /* prevent default */
       return false;           
   });