CODEWITHSUNDEEP
javascriptjqueryasp.net
SelrekJohn
SelrekJohn

Reputation: 476

JQuery ASP hidden issues

Depending on the result of a checkbox, I want to hide/reveal a hidden table (hidden from page load), asking for more information.

The JQuery and ASP is below, can someone point me in the right direction and let me know what I'm doing wrong with this approach.

ASP

<h3>Table Heading</h3>
    <asp:Table ID="tbl1" runat="server">
        <asp:TableHeaderRow>
            <asp:TableHeaderCell>
                <h4>One</h4>
            </asp:TableHeaderCell>
        </asp:TableHeaderRow>
                    <asp:TableRow>
            <asp:TableCell>
                <asp:CheckBox ID=""Yes" runat="server" Checked="false" Text="Yes" />
                <asp:CheckBox ID="No" Text="No" runat="server" Checked="false" />
            </asp:TableCell>
        </asp:TableRow>
    </asp:Table>
    <asp:Table ID="tbl2" runat="server" Visible="false">
        <asp:TableHeaderRow>
            <asp:TableHeaderCell>
                <h4>Additional information</h4>
            </asp:TableHeaderCell>
        </asp:TableHeaderRow>
        <asp:TableRow>
            <asp:TableCell><asp:TextBox ID="AddInfo" runat="server" TextMode="MultiLine"></asp:TextBox></asp:TableCell>
        </asp:TableRow>
    </asp:Table>

JQuery

<script type="text/javascript">
    function toggleTable()
    {
        $(function () {
            $("#Yes").click(function () {
                $("#tbl2").show();
            })
            $("#No").click(function () {
                $("#tbl2").hide();
        })
    }
</script>

Update 1 As suggested I removed the wrapping function, this still didn't work.

<script type="text/javascript">
        $(function () 
        {
            $("#Yes").click(function () {
                $("#tbl2").show();
        })
            $("No").click(function () {
                $("#tbl2").hide();
            })
        })
</script>

Raw HTML

<h3></h3>
    <table id="MainContent_tbl1">
<tr>
    <th>
                <h4></h4>
            </th>
</tr><tr>
    <td><input id="MainContent_Yes" type="radio" name="ctl00$MainContent$Yes" value="Yes" />
    <label for="MainContent_Yes">Yes</label><input id="MainContent_No" type="radio" name="ctl00$MainContent$No" value="No" />
    <label for="MainContent_No">No</label></td>
</tr>

Upvotes: 0

Views: 122

Answers (3)

Arindam Nayak
Arindam Nayak

Reputation: 7462

When you had used visible=false in server control, that had done this - It removed that control entirely from page when rendered.

More about Visible property - If this property is false, the server control is not rendered. You should take this into account when organizing the layout of your page. If a container control is not rendered, any controls that it contains will not be rendered even if you set the Visible property of an individual control to true. - http://msdn.microsoft.com/en-us/library/system.web.ui.control.visible(v=vs.100).aspx

So i would suggest, if you are doing show/hide from server side code, then set attribute (CSS) style= display none . If you directly use visible property and set it to false, it will remove control from page, there will be no way to show in page.

E.g. tbl1.Attributes.Add("style", "display:none");

In client-side hide it using style=display:none" instead of visible=false.

Also, ,use .ClientID to get exact render ID for jquery selector. Like

$("#<%=tbl1.ClientID%>").show();

Upvotes: 1

Zaki
Zaki

Reputation: 5600

In your jquery get everthing by ClientID as it is asp it will rename it(as you can see it has added MainContent_ to your control ids) so do this :

$("<%=tbl2.ClientID %>").click{....

Or add ClientIDMode = "Static" to your controls e.g.:

<asp:Table ID="tbl1" runat="server" ClientIDMode = "Static">

Upvotes: 0

Jamie Barker
Jamie Barker

Reputation: 8246

Take away the toggleTable() wrapping function and it should work as you've suggested.

The $(function () { runs when the document is ready and should turn on the click listeners at that point.

I'd also point out that the logic is flawed. Checkboxes can all be turned on so you might want to use radio buttons instead so only one can be checked.

Upvotes: 1

Related Questions