CODEWITHSUNDEEP
c#jqueryasp.net
Jay
Jay

Reputation: 521

Table show/hide breaking when using it with table property

I am trying to hide and show a table using jquery which is working. My issue is I also need to check if this table is visible or not in the codebehind so I can say if it is visible then validate these fields. And I also want the table to not be visible on pageload.

On my PageLoad when I add the following code the javascript stops working

table1.Visible = false;


$(document).ready(function () {
    $("#checkbox1").change(function () {
        $("#table1").toggle();
    });
})

<input type="checkbox" id="checkbox1" name="checkbox1" />
<table id="table1">
Hiddent Fields
</table>

Upvotes: 2

Views: 368

Answers (4)

afzalulh
afzalulh

Reputation: 7943

Here's my 2 cents:

In markup:

<table id="table1" runat="server">

In Page_Load:

table1.Style.Add("display", "none");

And when you want to check if the table is invisible:

if(table1.Style["display"] == "none")
{
    // Do what you need to 
}

You will have full control of the table in jquery as well as in code behind.

Upvotes: 1

Charaf JRA
Charaf JRA

Reputation: 8334

You try to access element using his id (#checkbox1) instead of his name , so your problem is that your change event is never triggered. Change your selector to use name='checkbox1' :

  $("input[name='checkbox1']").change(function () {});

Or add id='checkbox1' to your input:

 <input type="checkbox" name="checkbox1" id="checkbox1"  />

DEMO HERE

Upvotes: 0

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

You can use the hidden selector.

// Matches all elements that are hidden
$('element:hidden')

And the visible selector

// Matches all elements that are visible.
$('element:visible')

or

You can use .is(':visible') to test if something is visible and .is(':hidden') to test for the opposite:

to hide on page load you can use

$(document).ready(function () {
   $('#table1').hide();
});

or using css

#table1{ display:none; }

DEMO

$(document).ready(function () {
    $("#table1").hide();
     $("#checkbox1").change(function () {
        $("#table1").toggle();
    });
})

Upvotes: 0

SarathSprakash
SarathSprakash

Reputation: 4624

DEMO

Try this,

$(document).ready(function () {
    $("#table1").hide();
     $("#checkbox1").change(function () {
        $("#table1").toggle();
    });
})

and specify id="checkbox1" 

<input type="checkbox" id="checkbox1" />
<table id="table1">
    <th>Hidden things</th>
</table>

Upvotes: 0

Related Questions