How to access server control property via JavaScript?

Hi guys,'

 I need to make a Panel control visible, when user clicks on HTML button:

When I click on the button I get a JavaScript error: "Null" is null or not an object.

function showPanel()
 {
   var panel = document.getElementById("pnlAddRecord");
   panel.visible = true;
 }

<input id="Button1" style="width: 80px" type="button" value="Add Record" onclick ="showPanel()" />

How can I access Visible property of the Panel control via JavaScript?

Thank you !

But it produces an error:
alik13Asked:
Who is Participating?
 
ChetOS82Connect With a Mentor Commented:
I forgot about this question.  Pretty much there now... just modify your function accordingly:
function showPanel(panelId)
 {
   var panel = document.getElementById(panelId);
   if (panel) {
       panel.style.display = 'block';
   } else {
       alert('Panel DIV not found.');
   }
 }

Open in new window

0
 
ChetOS82Commented:
Is "pnlAddRecord" the ID attribute on the Panel control?  If so, this ID is only for the server-side components.  The ID put in the generated HTML is totally different.  You need to pass the ClientID attribute to the Javascript function.  You could do something like this:
function showPanel(panelId)
 {
   var panel = document.getElementById(panelId);
   panel.visible = true; 
 }
 
<input id="Button1" style="width: 80px" type="button" value="Add Record" onclick ="showPanel('"& pnlAddRecord.ClientID &"');" />

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
you mean

 panel.style.visibility = 'visible'; // opposite of 'hidden'

or

 panel.style.display = 'block'; // opposite of 'none'
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
alik13Author Commented:
I mean, that panel become visible on the form
0
 
alik13Author Commented:
function showPanel(panelID)
 {
   var panel = document.getElementById(panelID);
   panel.visible = true;
 }

onclick ="showPanel('& pnlAddRecord.ClientID &');" />

Still does not work.  The same error: "null" is null or not an object.

This suggestion also does not work :   panel.style.visibility = 'visible';

0
 
ChetOS82Commented:
I totally missed the point that mplungjan brought up.

Modify the showPanel function do help us debug this.  Let us know what it says.
function showPanel(panelID) {
     alert(panelID);
}

Open in new window

0
 
alik13Author Commented:
Hi Chet0S82

 the alert produces the following :  & pnlAddRecord.ClientID &

Thanks!
0
 
ChetOS82Commented:
Looks like you forgot to include the quotes in my original sample.  Notice that it is a single quote, then a double quote, then an ampersand.

onclick="showPanel('"& pnlAddRecord.ClientID &"');"
0
 
Michel PlungjanIT ExpertCommented:
Can you perhaps show the line where you have


response.write 'onclick ="showPanel('& pnlAddRecord.ClientID &');" />'

or something since that is where it for sure gets messed up.
You are mixing server and client side script in an unhealthy way
0
 
Michel PlungjanIT ExpertCommented:
perhaps you mean


<input id="Button1" style="width: 80px" type="button" value="Add Record"
onclick="showPanel('<%= pnlAddRecord.ClientID%>')" />
0
 
ChetOS82Commented:
Sorry, you are right, I thought it was a server control.
0
 
alik13Author Commented:
<input id="Button1" style="width: 80px" type="button"  value="Add Record"  onclick = "showPanel('"& pnlAddRecord.ClientID &"');" />

Guys, I event cannot switch to Design mode due to the following errors:

1. Cannot switch views: The attribute name and value must be separated by an equals(=) sign.

2. Validation(XHTML 1.0 Transitional): This name contains uppercase characters which is not allowed.

3. Validation(XHTML 1.0 Transitional):  Attribute 'pnlAddRecord; is not a valid attribute of element 'input'
0
 
Michel PlungjanIT ExpertCommented:
That is because that is not correct syntax
Did you try
<input id="Button1" style="width: 80px" type="button" value="Add Record"
onclick="showPanel('<%= pnlAddRecord.ClientID%>')" />

or whatever is similar in your version of asp instead
0
 
alik13Author Commented:
I just tried your code and alert produced the following output:

 "ctl00_ContentPlaceHolder1_pnlAddRecord" .

I use ASP.NET 2.0 with AJAX
0
 
alik13Author Commented:
Thank you guys!
0
All Courses

From novice to tech pro — start learning today.