jQuery and Vaadin integration issue

Vaadin 6 / 7 / 8
1

Again, I am trying to use jQuery with Vaadin.
Obviously, I don’t fully understand how to integrate this properly.

import com.vaadin.annotations.JavaScript;

@JavaScript({“jquery-ui.min.js”})
public class MainView extends CustomComponent implements View {
.
.
nbtn_insert2.addListener(new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {

JavaScript.getCurrent().execute(“$(this).animate({opacity: 0.4}, 1500);”);

if(txt_names.getValue().toString().isEmpty()) {
Notification.show(“Please select a name”);
}else{
insertName(txt_names.getValue());
table_names.setContainerDataSource(Table2());
}
}
});

(error message: “The method getCurrent() is undefined for the type JavaScript”)

I thought I could call the jQuery functions like above after using @JavaScript({“jquery-ui.min.js”}) ?

Or do I have to write an extra class to handle jQuery?

thanks again

2

Since you are using both JavaScript the annotation and JavaScript, you’ll need to use the full path on one of them to differentiate between the two.
Hope that helps.

3

Hi Marcus,

thank you again. I didn’t understand what exactly you were talking about when you explained it in the other thread. Now I fixed it like below. Hopefully, this is correct. At least no complains from Eclipse.

@com.vaadin.annotations.JavaScript(value = { “jquery-ui.min.js” })

com.vaadin.ui.JavaScript.getCurrent().execute(“$(
this
).animate({opacity: 0.0}, 3000);”);

However, no animation happens. Is there a special syntax for selecting my Vaadin button? I hoped it would work with the “this” keyword…

4

I’m not 100% sure what $(this) refers to when you run the script like that, but I’m fairly certain that it’s not the element you are hoping for.

If you just want to animate components, I can recommend using Jouni’s Animator addon instead of doing the work yourself: https://vaadin.com/directory#!addon/animator

5

Indeed, I was hoping for the HTML-element. I’ve tried Jouni’s Animator a few days ago. I couldn’t find too much information about the different functions I can use with the Animator, so I thought I just go with jQuery. Anyway, since my goal for now is to animate some components, I want to try the Animator again.
This is what I did a couple of days ago:

nbtn_insert2.addListener(new Button.ClickListener() {

            @Override

public void buttonClick(ClickEvent event) {
Animator.animate(mainLayout, new Css().opacity(0.3));
Animator.animate(mainLayout, new Css().translateX(“100px”)).delay(1000).duration(2000);
mainLayout.addComponent(nbtn_insert2);

This code results in the button
suddenly
 disappearing after clicking it.

Without this line : mainLayout.addComponent(nbtn_insert2); , nothing happens when clicking the button. It doesn’t disappear, but nothing happens.

6

Use this:

@JavaScript({ “https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js” })

instead of this:

@com.vaadin.annotations.JavaScript(value = { “jquery-ui.min.js” })

And instead of this:

com.vaadin.ui.JavaScript.getCurrent().execute(“$(this).animate({opacity: 0.0}, 3000);”);

Use this:

com.vaadin.ui.JavaScript.getCurrent().execute(“$(‘.v-label’).animate({opacity: 0.0}, 3000);”);

it should work. :slight_smile:

7

Sure, that will work, but it will also animate every single label in your application, probably not what you want. If you want to go that route, you’ll want to call addStyleName() on your component to give it a unique classname that you can target.

8

You are right. Adding style is good thing for a component. :slight_smile: