Help! Cannot get javascript function callback working.

Vaadin 6 / 7 / 8
1

Hi guys.

What I am trying to do seems simple enough. We have a vaadin application integrated into a Spring MVC/tiles framework. Somehow, I need to ‘poke’ the vaadin UI externally in order to get it to do something.

Looking at the Book of Vaadin, the solution seemed simple enough - add a javascript callback function via the server code, and then call this function from javascript on the client.

Armed with this information, I tried the following:

  1. In my UI.init() method, I added the following code:
        JavaScript.getCurrent().addFunction("pluginSwitch", 
                new JavaScriptFunction()
        {
            @Override
            public void call(JSONArray arguments) throws JSONException
            {
                System.out.println("EMIngEstate2UI.init(...).new JavaScriptFunction() {...}.call()");
                Notification.show("Received call from javascript");                
            }
        });
  1. In the javascript for the web page housing the UI, I added the following code (Note that the javascript already contained logic for starting the embedded UI - I simply added the call to the new function at the bottom) :
<script type="text/javascript">//<![CDATA[
    if (!window.vaadin)
        alert("Failed to load the bootstrap JavaScript: "+
              "VAADIN/vaadinBootstrap.js");
    
    /* The UI Configuration */
    vaadin.initApplication("ingestate2UI", {
        "browserDetailsUrl": "/emgui/legacy2/",
        "serviceUrl": "/emgui/legacy2/",
        "widgetset": "com.ingenico.webmmicore.vaadin.widgetset.IngEstateAppWidgetSet",
        "theme": "ingenicotheme",
        "versionInfo": {"vaadinVersion": "7.3.9"},
        "vaadinDir": "/emgui/VAADIN/",
        "heartbeatInterval": 120,
        "debug": true,
        "standalone": false,
        "authErrMsg": {
            "message": "Take note of any unsaved data, "+
                       "and <u>click here<\/u> to continue.",
            "caption": "Authentication problem"
        },
        "comErrMsg": {
            "message": "Take note of any unsaved data, "+
                       "and <u>click here<\/u> to continue.",
            "caption": "Communication problem"
        },
        "sessExpMsg": {
            "message": "Take note of any unsaved data, "+
                       "and <u>click here<\/u> to continue.",
            "caption": "Session Expired"
        }
    });
        
    /* Call to javascript callback function created directly in vaadin UI initialisation*/
    /* This will force the plugin switch */    
    window.pluginSwitch("TEST");
    
    //]] >
</script>

Alas, it doesnt work.

When I ‘view page source’ for the loaded UI, I cannot see any javascript method called “pluginSwitch” which I assume should have been added during the UI initialisation.

Does anybody have any ideas what I am doing wrong? Using Vaadin 7.3.9 by the way.

All help greatly appreciated.

Cheers,
Lee.

2

Probably you are trying to call the function before it has been published. Try opening the browser inspector and calling
window.pluginSwitch(“TEST”); when your application has loaded to see if it works then.