CODEWITHSUNDEEP
javascriptc#htmlasp.nethtml-table
purplecat
purplecat

Reputation: 262

Hiding/Showing an html table with C# and Javascript

I am working on website using ajax and C#. I started learning these languages a couple months ago, so I'm not always sure what the best practice is to accomplish things.

I have a form in which certain controls need to be hidden or shown depending on the user's action. It starts out showing an "id" field (along with other fields), but if the user doesn't know their id, they click a link which causes the "id" field to become hidden and displays a table that contains additional controls and a "find" button. I am currently using Javascript to handle the click and hide/display the controls:

function showSearchTable() {
    document.getElementById('IDNumberRow').style.display = 'none';
    document.getElementById('DontKnowId').style.display = 'none';
    document.getElementById('infoSearchTable').style.display = 'block';
}

When the "find" button is clicked, the application attempts to look up the additional info in the database and tells the user the result. As a result of the server call, the page is re-loaded, which causes the table to become hidden again. Here's my problem: if the phone number cannot be found, I would like to keep the table visible so that the user can correct any mistakes.

I have tried adding code that makes the table hidden to the code-behind so that the post-back won't cause the table to become invisible:

protected void Page_Load(object sender, EventArgs e)
{
    if(!Page.IsPostBack)
    {
        infoSearchTable.Visible = false;
    }
}

However, as the table now contains the attribute runat="server" in order to see it in the c# code, I can't seem to reference it in my javascript code in order to set it visible from the client. I tried this for the javascript:

function showSearchTable() {
    document.getElementById('IDNumberRow').style.display = 'none';
    document.getElementById('DontKnowId').style.display = 'none';

    var infoSearch = document.getElementById('<%=infoSearchTable.ClientID%>');
    infoSearch.style.display = 'block';
}

and the table's html:

<table id="infoSearchTable" runat="server">
....table rows/columns containing controls
</table>

but I get an error saying that 'infoSearch' is null.

I think I'd be able to accomplish both tasks (set hidden table visible with Javascript, but keep it visible on post back) myself, but I think that my code would end up being more complicated than necessary, especially as I'm new to ajax, .net and C#. So I'm looking for advice - Am I on the right track? Did I use something the wrong way? Is there another way to do this?

Upvotes: 3

Views: 13116

Answers (4)

John
John

Reputation: 6553

In ASP.NET when you use runat=server it takes your ID and modifies it to include other information from your program, I forget exactly what but I think the master page or namespace or something to make it unique. Your getElementByID() need to be changed to include all that other information (view source on a page to get the actual ID) or use a javascript framework like JQuery that has advanced selectors for finding elements on a page.

Upvotes: 0

iandayman
iandayman

Reputation: 4467

if(!Page.IsPostBack)
{
    infoSearchTable.Visible = false;
}

I think this will stop the control being sent back to the client (hence the null reference) - try something like:

if(!Page.IsPostBack)
{
    infoSearchTable.Attributes.Add("style", "display: none;");

}

Upvotes: 1

James Johnson
James Johnson

Reputation: 46077

Once you add runat="server" to an element, you have to reference it by the ClientID in JavaScript:

var table = document.getElementById("<%=infoSearchTable.ClientID%>");
if (table){
    table.style.display = "none";
}

Upvotes: 0

huMpty duMpty
huMpty duMpty

Reputation: 14470

You can do something like that

<table id="infoSearchTable" runat="server">
....table rows/columns containing controls
</table>

and in the code behind

infoSearchTable.Attributes.Add("class", "yourclass");

in youe .css

.yourclass{display:none;}

Upvotes: 0

Related Questions