Why does Javascript not function properly when my user control is rendered?

I am using a combination of HTMLTextWriter and StringWriter to render my user controls. The code used to render the user control is initiated through an ajax call from some Javascript on my page. The resulting StringWriter text is returned to the javascript code and is appended to my page. The rendering code looks like this:

Dim sw As New System.IO.StringWriter
If Not IsDBNull(reader.Item("UserControlName")) Then
    'Use Reflection to create the a开发者_高级运维ppropriate class.
    'First get the type
    'The usercontrol name is retrieved from my datatable reader
    Dim htmlcontroltype = Type.GetType("MyProject." & reader.Item("UserControlName"))
    If Not IsNothing(htmlcontroltype) Then
        'Create an instance of the class
        Dim htmlcontrol = Activator.CreateInstance(htmlcontroltype)
        htmlcontrol = htmlcontrol.LoadControl("~/" & reader.Item("UserControlName") & ".ascx")
        htmlcontrol.DataBind()
        Dim tw As New HtmlTextWriter(sw)
        htmlcontrol.RenderControl(tw)
    Else
        sw.Write("No matching User Control was found in the project.")
    End If
End If

Return sw.ToString

This will return my user control which seems to work fine, until I try to do anything nice with Javascript.

If, for instance, I want to have a google chart, I paste in their Javascript into my user control. Like so:

    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="TestControl.ascx.vb" Inherits="MyProject.TestControl" %>
        <script src="http://www.google.com/jsapi" type="text/javascript"></script>
        <script type="text/javascript">
            google.load("visualization", "1", { packages: ["corechart"] });
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = new google.visualization.DataTable();
                [ -- snip! -- ]
                var chart = new google.visualization.LineChart(document.getElementById('visualization1'));
                chart.draw(data, { width: 300, height: 250, title: 'Company Performance' });
            }
        </script>
<div id="visualization1" style="width: 300px; height: 300px;"></div>

But! When I run the program it will error, claiming that "google is undefined".

It is important to note that this isn't restricted to Google Charts - I have had similar problems with the Twitter Search API and others. Also, placing the line

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

in my default or master page makes no difference.

Finally, this code will work with no problems if the user control is added to my master page at design time using the usual @Register directive - leading me to believe the problem is caused by the StringWriter. Has anyone experienced a similar problem or can shed some light on the subject?

I don't think that the issue is with google.setOnLoadCallback, etc, I think you have a scoping issue there. Try this:

google.setOnLoadCallback(function(){drawChart.call(window)});

That will explicitly set the context of the drawChart function to something which has access to the google variable.

I found a work around for the issue, although I still don't know what's causing it. I placed my Google chart code into my main page and wrapped it into a jQuery function, calling it when the user control was loaded.

This then led to a further problem where the iFrame came back empty in Firefox and Chrome (but not in IE, bizarrely). This problem was addressed here.

Long story short, it's messier than I would have liked, but the end result is the same.