call a javascript function from java class in vaadin

Question

I'm trying to call a javascript function from a java class in a vaadin project. In the past I've used an RPC call to do so, but this time it's only a js function that I need to call, and I thought I would be able to do it with something like JavaScript.getCurrent().execute("test()"); So I have a vaadin project and here is the class where I would like to call that function from:

package my.vaadin.project.vaadinUploader;



import com.vaadin.annotations.JavaScript;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.TextField;
import com.vaadin.ui.VerticalLayout;

@JavaScript({ "https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js", "vaadin://js/script.js" })

public class UploaderComponent extends CustomComponent
{
    final TextField name;
    final TextField surname;
    //final Label div;
    final VerticalLayout formLayout = new VerticalLayout();

    public UploaderComponent(){

        formLayout.addStyleName("myLayout");
        //div = new Label();


        name = new TextField();
        surname = new TextField();
        name.setCaption("Type your name here:");
        surname.setCaption("Type your surname here:");
        formLayout.addComponents(name, surname);

    }


}

The script resides in a custom folder but I'm not sure where it is that I can make the call to that js function as I seem to be getting an error all the time. Any idea?

as I seem to be getting an error all the time care to share that error with us? — André Schild
– André Schild, Commented Jul 22, 2016 at 15:16
sure, apologies I should have done that straightaway. The error isn't in fact in java but I get that in the browser. I added the call in the constructur: public UploaderComponent(){ JavaScript.getCurrent().execute("test()"); formLayout.addStyleName("myLayout"); as I had no idea where to add it in to be honest. Anyway I reckon the browser is expecting an RPC call, here is the errors in chrome console (I had to use pastebin as it's quite long) — antobbo
– antobbo, Commented Jul 22, 2016 at 19:47

geert3 · Accepted Answer · 2016-07-25 14:39:26Z

2

Your call JavaScript.getCurrent().execute("test()"); is correct, provided the method test() is declared properly (which apparently isn't the case).

Assuming the script.js source contains the declaration of your test() function, likely you've put your script.js in the wrong place.

With the vaadin:// prefix, your file should go relative to the src/main/webapps/VAADIN directory, so in your case src/main/webapps/VAADIN/js/script.js

If you leave out the vaadin:// prefix (i.e. @JavaScript("script.js")), and you're using Maven, then the proper location of the file is src/main/resources/ and then the package structure of where your java source was. So in your case src/main/resources/my/vaadin/project/vaadinUploader/script.js

Also note that you'll get a warning in the console when accessing an @Javascript file that can't be located.

edited Jul 25, 2016 at 14:39

answered Jul 25, 2016 at 8:38

geert3

7,3771 gold badge36 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

antobbo Over a year ago

thanks. Well the path to the folder where I put the js is this: (by the way it's a maven project and not a vaadin one as I've said at the beginning, sorry) src/main/webapp/VAADIN/js/script.js (I've had this structure in another project and it worked). As for the content of the script, here it is: function test(){ console.log("test() inside script.js called"); }

geert3 Over a year ago

in your chrome console, under network tab, do you see this script.js file being downloaded correctly?

antobbo Over a year ago

thanks. A few things though. I was aware of the 'correct' location but my understanding is that the point of using vaadin://js/script.js was to allow you to put your script inside custom folders like src/main/VAADIN/js rather than the 'correct' one. I've seen large maaven projects with js files arranged that way, and with only the js connector handling RPC calls in the 'correct' location, that's why I did it that way.

geert3 Over a year ago

You're absolutely right. Only my test with vaadin: didn't seem to work for some reason. It just dawned on me I forgot the //. So testing again with vaadin:// it works nicely (edited the answer once more). So basically your setup is OK. You should definitely see your script.js being downloaded in chrome network tab - be sure to disable cache though.

antobbo Over a year ago

cool glad you got it to work, cos mine still isn't, but it's good to know that my setup is correct and that I'm doing everything the right way, I cleared the cache and tried on two different machines, but still that darn file isn't appearing under source...and I still get that warning in the browser. As a test I replaced the relative URL with the absolute one http://localhost:8080/vaadinPopup/VAADIN/js/script.js but I still get the same error in the console...really can't understand why

Collectives™ on Stack Overflow

call a javascript function from java class in vaadin

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related