NovoGeek's Blog (Archive)

In ASP.NET web apps, most of the times we would need to call JavaScript functions in page_load event of code behind, for various valid reasons. In such scenarios, we simply use .NET’s Register Script methods for emitting JavaScript code, which is absolutely fine.

If you are using jQuery, you would write the logical flow of events to be executed in $(document).ready() function. However, if you are using Register script methods with jQuery, the output will not be as expected. I have faced this problem yesterday and want to share the reason and simple solution.

.NET framework provides two methods for emitting JavaScript to the client. They are:

1. RegisterClientScriptBlock (Client-side script is emitted just after the <form runat=”server”> tag)
2. RegisterStartupScript (Client-side script is emitted just before the </form> tag)

Note: These methods are now moved to ClientScriptManager class from Page class.

The below screenshot explains the difference clearly:

Okay. Now that the difference between the two is clear, let us go forward. Consider the below simple JS code:

function fnTestScript(msg) {

    console.log(msg);

}

$(document).ready(function() {

    fnTestScript('This is from document.ready');

});

We am defining a method fnTestScript(parameter) and calling it in jQuery’s ready() function. Now, in page_load event of server, let us call this method using Register script methods.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

       'Using "RegisterClientScriptBlock" method to emit JS code.

       Dim strScript As New StringBuilder

       strScript.Append("<script language='javascript'>")

       strScript.Append("fnTestScript('This is from RegisterClientScriptBlock');")

       strScript.Append("</script>")

       ClientScript.RegisterClientScriptBlock(Me.GetType(), "TestScript", strScript.ToString())

       'Using "RegisterStartupScript" method to emit JS code.

       Dim strScript2 As New StringBuilder

       strScript2.Append("<script language='javascript'>")

       strScript2.Append("fnTestScript('This is from RegisterStartupScript');")

       strScript2.Append("</script>")

       ClientScript.RegisterStartupScript(Me.GetType(), "TestScript", strScript2.ToString())

   End Sub

Can you guess what the output will be? Here it is:

The reason is simple. .NET is injecting the script inline, into the DOM. So its functions are called before $(document).ready(), which fires after DOM is loaded. This means, your logical sequence of JavaScript calls has gone for a toss!

The solution is even more simple. Just add $(document).ready() in your function definition:

function fnTestScript(msg) {

    $(document).ready(function() {

        console.log(msg);

    });

}

Now your sequence of JavaScript calls will be like this:

Q: Can you call $(document).ready() multiple times?
A: Yes! This is another difference between this method and JavaScript’s window.onload, which is rarely mentioned in articles. The order of execution depends only on the order in the code.

Hope this article saves the time of others who face similar problem!