Chapter 11

Tulsi · April 27th, 2012, 11:35 AM

Hi Imar,

I had another question about Exercise 1...

In this exercise the ClientIDMode of VerticalPanel is set to static. I'm confused since on page 314, it recommends to use the ClientID to get the controls's client ID at runtime?

I'm assuming that ClientIDMode of VerticalPanel is set to static because it makes the problem a bit easier, but in a real project you would use the ClientID to get the control's client Id at runtime?

I'm confused as to which is the correct way?

Thank you for all your help.

Tulsi

Imar · April 29th, 2012, 06:09 AM

Quote:

but in a real project you would use the ClientID to get the control's client Id at runtime?

I'm confused as to which is the correct way?

You probably would use both, depending on the scenario. ClientID is useful inside a page as you can directly access the control and this property. However, when you're writing code in a separate JavaScript file you don't have access to the control, and thus you may have the need to hardcode the ID there (although in those cases it's often better to not hard code the ID, but to use a CSS class instead and query elements by the class name).

Hope this helps,

Imar

Tulsi · April 30th, 2012, 01:26 PM

Thank you...This makes sense.

Just wondering if you could do the following:

var PanelName = document.getElementById('<%= VerticalPanel.ClientID %>' );
and then using the PanelName in Jquery selector? Can this be done?

Thanks,
Tulsi

Imar · April 30th, 2012, 02:04 PM

Hi Tulsi,

The best answer is: why don't you try it out. This way, you get hands-on experience while trying to make it work ;-)

The second best answer is: absolutely. Don't forget to include the # symbol as that's not part of the client ID. E.g.:

$('#' + PanelName).WhatEverjQueryCodeHere();

Hope this helps,

Imar

Tulsi · April 30th, 2012, 02:34 PM

Good suggestion :). I tried it out and modified the jquery code as follows:

<script type="text/javascript">
$(function () {

var PanelName = document.getElementById('<%= VerticalPanel.ClientID %>');

$('#HideBanner').bind('click', function ()
{
$('#' + PanelName).slideToggle('fast', function ()
{
if ($(this).css('display')=='block')
{
$('#HideBanner')[0].innerText = "Hide Banner";
}
else
{
$('#HideBanner')[0].innerText = "Show Banner";
}
});
});
});
</script>

I tried different variations. For ex., I changed the declaration to var PanelName = document.getElementById('VerticalPanel'); But I still get an error.

Thank you.

Tulsi

Imar · April 30th, 2012, 03:21 PM

Oooops, looks like I made a mistake....

This:

Code:

 
var PanelName = document.getElementById('<%= VerticalPanel.ClientID %>');

gives you a reference to a DOM element, not just its ID. So, # + PanelName won't work.

You could wrap the element in a jQuery set.E.g.:

Code:

 
$(PanelName).slideToggle('fast', function ()

should work. If it does, you could rename PanelName to something like panel, as it represents the entire panel element, not just its name / ID.

When you post code, can you wrap them in code (#) tags using the toolbar? Makes it easier to read.

Cheers,

Imar

Tulsi · May 1st, 2012, 12:58 PM

This worked....Thank you for the help.

Tulsi