Added javascript by page.write() doesn’t work

General
1

I have a problem about executing javascript from vaadin 6.8.13. Also i’m not very experienced with javascript so i don’t know how to debug this problem. So if you can help me at least with one of two sides - that will be great.

Details:
I have a class which extends ApplicationServlet and override method:

   @Override
    protected void writeAjaxPageHtmlVaadinScripts(Window window, String themeName, Application application, BufferedWriter page, String appUrl,
            String themeUri, String appId, HttpServletRequest request) throws ServletException, IOException
    {
        page.write("<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge, chrome=1\"/>\n");
        page.write("<script type=\"text/javascript\">\n");
        page.write("//<![CDATA[\n");
        page.write("document.write(\"<script language='javascript' src='../VAADIN/jquery/jquery-1.4.4.min.js'><\\/script>\");\n");
        page.write("document.write(\"<script language='javascript' src='../VAADIN/js/highcharts.js'><\\/script>\");\n");
        page.write("document.write(\"<script language='javascript' src='../VAADIN/js/modules/exporting.js'><\\/script>\");\n");
        page.write("document.write(\"<script language='javascript' src='../VAADIN/js/graphDefinition.js'><\\/script>\");\n");
        page.write("//]]>\n</script>\n");
        super.writeAjaxPageHtmlVaadinScripts(window, themeName, application, page, appUrl, themeUri, appId, request);
    }

I’m trying to run function -

[code]

doBuildDetailedGraph(containerName, chartTitle, statesData,
containerHeight)
[/code]

Which is part of graphDefinition.js

I use executeJavascript() function to execute javacript function.

But js function doesn’t start. In the first lines of doBuildDetailedGraph i put line:

 console.log(“function starts”)

But firebug doesn’t show any console message (console tab, then all tab)

Also in the
script
 tab of firebug i see lines:

 <script type="text/javascript">
    //<![CDATA[
    document.write("<script language='javascript' src='../VAADIN/jquery/jquery-1.4.4.min.js'><\/script>");
    document.write("<script language='javascript' src='../VAADIN/js/highcharts.js'><\/script>");
    document.write("<script language='javascript' src='../VAADIN/js/modules/exporting.js'><\/script>");
    document.write("<script language='javascript' src='../VAADIN/js/graphDefinition.js'><\/script>");
    //]]>
    </script>

So it is kind of working but it doesn’t.
I don’t know how to debug the problem. Please help me

2

The best way is of course that you should use the official Vaadin Highcharts wrapper:
https://vaadin.com/charts
 :wink:

Otherwise, I would suggest that you instead override writeAjaxPageHtmlHeader and directly call page.write(“<script…”); (that is, leave the document.write off)

3

Hi; I’m on branch 7 and I’m suffering from this problem, too.

In my case the problem is coming when trying to embed a report that is being generated by some reporting software I cannot modify. Some javascript files need to be included in my Vaadin app and at least one of them makes use of lots of “document.write”, in the style of nanacano na’s example, mainly to include some other js files. I can see lots of console messages complaining about “Failed to execute ‘write’ on ‘Document’: It isn’t possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.”.

I’ve tried a couple ways of embedding / including this js file, one of them involving loading it with jQuery .getScript, also with $.ajax and setting it up to work asynchronously, but nothing seems to help.

I’m really out of ideas at this point. Does anyone have a suggestion?

Thanks in advance…