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

Question

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 appropriate 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?

Try validating your markup with your user control added to the page. My guess is that its introducing some broken mark-up. — Jim Lamb, Jun 23 '11 at 14:49
@cwallenpoole: When the user control is added at run time it renders just as script tags with the user control div. When I run into the "google not defined" problem (when dynamically adding the usercontrol), I don't seem to get any markup whatsoever. The browser just seems to hang up whilst failing to process the javascript. — Andy F, Jun 23 '11 at 15:11

score 1 · Answer 1 · answered Jun 23 '11 at 14:54

1

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.

answered Jun 23 '11 at 14:54

cwallenpoole

79,954
26
128
166

Unfortunately that hasn't helped. I'll reiterate - the Google Chart code works fine as is when the usercontrol is added at design time, it's just when it's forced through the String Writer that I start to get errors. – Andy F Jun 23 '11 at 14:59

score 0 · Accepted Answer · edited May 23 '17 at 12:22

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.

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

2 Answers2