Level Extreme platform
Subscription
Corporate profile
Products & Services
Support
Legal
Français
Trying to Hide one element and show another
Message
 
General information
Forum:
ASP.NET
Category:
Client-side development
Environment versions
OS:
Windows XP
Database:
MS SQL Server
Miscellaneous
Thread ID:
01302771
Message ID:
01302903
Views:
7
This message has been marked as the solution to the initial question of the thread.
>>>Hi everybody,
>>>
>>>Thanks to Paul I got the first part of my page working (or at least it seems to work in few tests I made).
>>>
>>>Now I'm up to the next "challenge".
>>>
>>>When I click on Edit button in my grid I show user's info in a separate table and hide the grid. I have Save button with server code and I have a Cancel button, which, I believe, should only hide the table and show the grid.
>>>
>>>So, I'm trying the following code in Page_Init (what better method should I use - this one fires too often)?
>>>
>>>
>>>protected void Page_Init(object sender, EventArgs e)
>>>    {
>>>        this.btnCancelProfile.Attributes["onclick"] =
>>>"HideElement('" +
>>>this.tblProInfo.ClientID +
>>>"');ShowElement('" + this.grdvwUsers.ClientID + "');" ;
>>>    }
>>>
>>>However, the Hide part seems to be working, but the show part doesn't.
>>>
>>>Here is my code in Master.js file (which I added to Master page):
>>>
>>>
>>>function HideElement(what)
>>>{
>>>alert(what);
>>>var x = document.getElementById(what);
>>>alert(x);
>>>if (x) {
>>>  x.style.display = 'none' ;
>>>  }
>>>  return true ;
>>> }
>>> function ShowElement(what)
>>>{
>>>alert(what);
>>>var x = document.getElementById(what);
>>>alert(x);
>>>if (x) {
>>>  x.style.visibility='visible'; ;
>>>  }
>>>  return true ;
>>> }
>>>
>>>Do you see what is wrong?
>>>
>>>Thanks in advance.
>>
>>
>>Change your function to this:
>>
>>function ShowElement(what)
>>{
>>alert(what);
>>var x = document.getElementById(what);
>>alert(x);
>>if (x) {
>>  x.style.display = '' ;
>>  }
>>  return true ;
>> }
>>
>>
>>There are two ways to hide and show an element.
>>
>>x.style.display = 'none' //hides element and releases the space it occupied
>>x.style.display = '' //shows element
>>
>>and then there is:
>>
>>x.style.visibility = 'hidden' //hides element but does not release the space it occupies
>>x.style.visibility = 'visible' //shows element
>
>Do you have ideas which method to use to add OnClick attribute to the button, why I see null in ShowElement passing the correct ID for the grid and what should I do to avoid a PostBack when I click on this button (there is no need)?
>
>Thanks again for your help.

For the null value where you tried to reference object ID this.grdvwUsers.ClientID, the code you posted looks ok. My first guess is that you have that object’s visible property set to false in the server side aspx page.

When you set the visible property false on a control such as a grid or button, the HTML for that component is NOT rendered to the clients browser. Since the HTML for the component is not sent to the browser your Javascript cannot reference it. If this is the case then you need to change the property of the control to true and hide it from the client by another means. You could wrap the control in a HTML DIV tag for example and have it hidden.

I’m not sure I have the complete picture but when you use an edit button from a parent grid to display a control to edit the record, it typically requires the form to post to the server to get the selected data. It depends on how it’s implemented but if this is the case you could handle the displaying of the grid and edit control entirely on the server side.
Michael McLain
Previous
Next
Reply
Map
View

Click here to load this message in the networking platform