External js library

General
1

I want include jquery lib to my project. For this:

  1. Create class
    Test_guiApplicationServelet
package com.example.test_gui;

import java.io.BufferedWriter;
import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;

import com.vaadin.Application;
import com.vaadin.terminal.gwt.server.ApplicationServlet;
import com.vaadin.ui.Window;

public class Test_guiApplicationServelet extends ApplicationServlet {
    @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("<script type=\"text/javascript\">\n");
        page.write("//<![CDATA[\n");
        page.write("document.write(\"<script language='javascript' src='./jquery/jquery-1.4.4.min.js'><\\/script>\");\n");
        page.write("document.write(\"<script language='javascript' src='./js/highcharts.js'><\\/script>\");\n");
        page.write("document.write(\"<script language='javascript' src='./js/modules/exporting.js'><\\/script>\");\n");
        page.write("//]]>\n</script>\n");
        super.writeAjaxPageHtmlVaadinScripts(window, themeName, application,
                page, appUrl, themeUri, appId, request);
    }

}
  1. In web.xml change servelet class to com.example.test_gui.Test_guiApplicationServelet
  2. Deploy to server
    And browsers can’t load it
:8080/test_gui/js/highcharts.js:-1	Resource interpreted as Script but transferred with MIME type text/html.
:8080/test_gui/js/modules/exporting.js:-1	Resource interpreted as Script but transferred with MIME type text/html.
:8080/test_gui/jquery/jquery-1.4.4.min.js:-1	Resource interpreted as Script but transferred with MIME type text/html.
jquery-1.4.4.min.js:1	Uncaught SyntaxError: Unexpected token <
highcharts.js:1	Uncaught SyntaxError: Unexpected token <
exporting.js:1	Uncaught SyntaxError: Unexpected token <

What i’m doing wrong? In other demo application all working well

2

When a JavaScript file (or any other file) is not found, servers typically return an error page in HTML. The errors you get look like that would be the case.

3

Looking at the invalid URLs more closely, you are trying to load static resources from under the webapp. If you have mapped /* to the Vaadin servlet, it will be called instead, resulting in the HTML loading page for the application.

You can either map the servlet to a sub-url to avoid the problem or serve the static resources with a URIHandler. In Knowledge Base:
#345: How do I serve static content?
 (requires Pro Account).

You could also avoid the problem by loading the files from under the root context instead of the webapp.

4

Hi,

I’m having similar problems with my js.
I’m added the same code in my ApplicationServlet, and modified the web.xml.
I’ve put the js files under WebContent, in folder jquery and folder js (just like in the example).
Then at runtime, the js is not loaded and I see the following with firebug (in short, http-404 error) :

Apache Tomcat/6.0.33 - Rapport d'erreur

Etat HTTP 404 - /jquery/jquery-1.4.4.min.js

type Rapport d'état

message /jquery/jquery-1.4.4.min.js

description La ressource demandée (/jquery/jquery-1.4.4.min.js) n'est pas disponible.

Apache Tomcat/6.0.33

Can someone give a hint why the js is not loaded?

Thanks

Françoise

5

Additional element : this is working on Chrome (16.0.912.41 beta-m), but not on Firefox (8.0)…
And we would expect it to work on Firefox too…

6

With so few elements it is hard to tell.

What does the JS URL look like ?

If you use backslashes like “path\to\my\js” it will work in IE and Chrome as they are more tolerant but fail in firefox, using forward slashes like “path/to/my/js” should work everywhere as it is the standard.

If it is not the problem, please post the URL you are using and your web.xml content so we can hopefully find the cause.

7

Hi,

Thanks for the tip.
We finally made it work using request.getContextPath().

For example, we replaced
page.write(“document.write("<\/script>");\n”);
by
page.write(“document.write("<\/script>");\n”);

And now the JS is well loaded on any brower.

Françoise