Thursday, December 15, 2011

Hide/show Div using Jquery/Json

Earlier i explained Jquery validate dropdown list,Auto complete texbox in jquery,Date format, Cascading dropdownlist in asp.net. Here i will show a simple way to hide/ show Div or Jquery Toggle.For this i have drop down list with two items which are "General" and "Credit".Then add the on change event to Dropdown list which is call the jquery function when make a selection on drop down list

Default.aspx:
<asp:dropdownlist id="ddlptype" onchange="PopulatePatient();" runat="server">
<asp:listitem>General</asp:listitem>
<asp:listitem>Credit</asp:listitem>
</asp:dropdownlist>
 <div id="Organisation">
<table><tbody>
<tr><td><asp:label id="lblorgname" runat="server" text="Org name"></asp:label></td>     <td><asp:textbox id="txtorgname" runat="server"></asp:textbox></td></tr>
<tr><td><asp:label id="lblEmpCode" runat="server" text="EmpCode"></asp:label></td>     <td><asp:textbox id="txtempcode" runat="server"></asp:textbox></td>   </tr>
</tbody></table>
</div>
Script:
A small comparison is perform between Dropdown list selected value with patient type (General and Credit) to make this .if the drop down selected item value is equal to general , I show the organization details div and if no is selected, I hide the div.
function PopulatePatient() {
        var value = $('#<%=ddlptype.ClientID%>').val();
        if (value == "General") {
            var t = document.getElementById("Organisation");
            $("#Organisation").fadeOut("slow");
        }
        else
            $("#Organisation").fadeIn("slow");
    }

Post a Comment

Bel