asp.net external JavaScript file doesn't find Control.ClientID

Question

On load I'm both calling a JavaScript setTimeout() function that will hide a .NET Panel control, and hiding it in the code behind on first load. Clicking the save button will set the Panel to visible then reload the page at which point a setTimeout() function is called... so basically you click save, and see a panel with "Details Saved" for three seconds, at which point it disappears.

The problem is the external JavaScript file can't find _pDivAlert.ClientID (I've debugged and it returns null). It only works when the code is in a tag in the .aspx page. Any suggestions as to how I can either pass the client ID to the HideControl() function or find the ClientID from the external JS file?

Here's my code, any suggestions?

<script language="javascript" src="Forms.js" type="text/javascript"></script>

<body onload="ToggleAlert()">
<form id="form1" runat="server">
<script type="text/javascript">
    //alert the user that the details were saved
    function HideControl() {
        var control = document.getElementById('<%=_pDivAlert.ClientID %>');
        if(control != null)
            control.style.display = 'none';
    }
    function ToggleAlert() {
        setTimeout("HideControl()", 3000);
    }
</script>

I've also tried sending the ClientID within the ToggleAlert() call, but that didn't work:

<body onload="ToggleAlert('<%=_pDivAlert.ClientID %>')">

External JS:

function HideControl(_c) {
var control = _c;
if (control != null)
    control.style.display = 'none';
}
function ToggleAlert(_c) {
    setTimeout("HideControl(_c)", 3000);
}

lincolnk · Accepted Answer · 2010-06-25 21:31:35Z

1

can you show your markup with the panel and the codebehind where you hide it?

there's a difference between setting the Visible property to false and setting the style display attribute to none- the first will not render the element at all, meaning there isn't anything rendered with the id you're looking for.

edit: it's probably because of the way you're calling HideControl in the timeout- this should be a function instead of a string.

try doing

function ToggleAlert(_c) {
    setTimeout( 
        function () { 
            HideControl(_c); 
        }, 3000);
}

just for clarity, when you pass a string to setTimeout, it's evaluated and then run. the code chunk that eval produces will run in a different scope than your ToggleAlert method, and so _c won't be available at that time.

edit: you also need to actually get a reference to the control. you're passing the id string to ToggleAlert, which relays it to HideControl, which is expecting an object not a string.

function HideControl(_c) { // _c is the id of the element
    var control = document.getElementById(_c);
    if (control != null)
        control.style.display = 'none';
}

edited Jun 25, 2010 at 21:31

answered Jun 25, 2010 at 19:47

lincolnk

11.2k4 gold badges43 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Duderino9000 Over a year ago

Thanks for the reply. I made HideControl() a function, and now I'm seeing the control ID in the external JS. But now when debugging I see that "style" in "control.style.display = 'none'" is "undefined."

Collectives™ on Stack Overflow

asp.net external JavaScript file doesn't find Control.ClientID

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related