Showing/Hiding div CollapsePanel after ClientScript.RegisterClientScriptBlock

Question

This question is an extension to http://stackoverflow.com/questions/920384/showing-hiding-div.

As stated, I found a workaround to prevent a Collapse panel from flashing upon load.

My solution was this:

In header:

    function showDivs() { 

                divMenuContent.style.visibility = 'visible';
                divMenuContent.style.display='block';


     }

</script>

and panel hidden in div as:

<div id="divMenuContent" style="visibility:hidden; display:none;">
   <asp:Panel ID="pnlAddNewContent" runat="server" CssClass="collapsePanel" Width="500px">
   </asp:Panel>
</div>

and body load is onLoad="javascript:showDivs();"

The thing is, it works perfectly on a blank page. But I think when I do a

ClientScript.RegisterClientScriptBlock(this.GetType(), "", sb.ToString());

it doesn't work - as in the panel doesnt collapse/show. The above code does work.

Do you believe the clientScipt conflicts with my javascript to show div? I don't receive any Javascript run errors within browser.

More info: The clientScript is called if its not a postback. I have also tried to call the javascript from the clientscript by adding the following code at the end of it:

sb.Append("\n}\nshowDivs();</script>\n");

But this time I get the following error:

divMenuConent is undefined.

ANy solutions?

Answer 1

If I remember right the RegisterClientScriptBlock injects its JS into the head. Could be that its injecting it above your code. Now that could mean a couple of things depending on what that injected code is doing.

• Is it referencing any elements straight away (remember this is in the head so you won't be able to mess with the DOM as it would have loaded it yet, all that stuff needs to be after onload)
• Is it referencing divMenuContent which you might only be declaring below it
• Is it throwing an error which is stopping the rest of your inpage JS from running.

Use firebug in Firefox to double check you are not getting any funny JS errors and view the source and double check you are not trying to reference anything before you should be.

Also I'd suggest you look into using one of the JS frameworks to allow you to wire up multiple onload events so you don't run the risk of over-writing any previous attached events. This allows you to run multiple function when the page loads (or even better, aka faster, when the DOM loads). I'd suggest MooTools in which case you can do something like this

// You can add as many of these as you like and they will all run :)
window.addEvent( "domready", function() {
  // Code to run goes here
});

Answer 2

You can use RegisterStartupScript for this kind Requirement.