Make user Control visible using Javascript

Question

All I want to make user control visible on button click. I am getting object null typical error on following code. How do I make complete user Control visible or invisible using javascript?

Dim ucAddNewChekcing As SubscriberSetupPages_UserControls_CheckingAccount
            ucAddNewChekcing = DirectCast(pnlTopLevel.Items().FindItemByValue("pnlAddChecking").FindControl("CheckingAcct1"), SubscriberSetupPages_UserControls_CheckingAccount)
            Dim openWinScript As String = "SetVisibility('" & ucAddNewChekcing.ClientID & "');"
            btnAddChecking.OnClientClick = openWinScript

Thanks in advance.

Answer 1

have visible="false" set means your control doesn't get rendered at all, so there's no element available when you want to display it. you can address this in a couple ways:

leave the control visible, so it renders, and use css styling to hide it until you want it: style="display: none;" in place of visible="false".

change visible to true and set style="display: none;" on some wrapping element (see edit below).

in your SetVisibility function, you can do

    element.style.display = '';

to remove the none value and show the element.

edit: ok after thinking about this some more, we can't put style="display: none;" right in the user control tag because that doesn't map to any specific html element. instead, this needs to be set on an element that wraps the contents of the user control.
if the user control has such an element already, that would be a good place to set the display styling. you can add a method to the control that will return the ClientID for that element so you can reference it in script.
otherwise if your layout will tolerate it you can put the control inside an asp:Panel and set the display property there.

the other option is to wrap your control in an UpdatePanel containing some control (like HiddenField) as a flag which will indicate if the control is visible or not. if you go that route you SetVisibility function looks something like

    // change value on flag control
    hiddenControl.value = '1';

    // trigger a partial postback
    __doPostBack('UpdatePanel1', '');

and then in your UpdatePanel_Load function you can check the value of your flag control and set the Visible property on your user control accordingly.