Executing JS-Code in Vaadin 14 Application does nothing

Question

I am trying to make a simple scroll down happen when the page is loaded.

@Route("somthing")
public class SomeView extends VerticalLayout{

public SomeView(){
    ...
    Adding some Elements
    ...

    UI.getCurrent().getPage().executeJs("window.scroll(0,300)");
}
}

I also tried adding a listener to the window:

 UI.getCurrent().getPage().executeJs("window.addEventListener('onload', function(){console.log('trigger');window.scroll(0,300);});");

But in both cases simply nothing happens when the page is loaded.

I'm assuming the second one doesn't trigger because the window's load event has already fired at this point. — ollitietavainen
– ollitietavainen, Commented Nov 6, 2019 at 14:50
For another example of executing arbitrary JavaScript from the server-side of a Vaadin 14 app, see the Question, How to Print in Vaadin Flow? — Basil Bourque
– Basil Bourque, Commented Nov 8, 2019 at 7:27

kscherrer · Accepted Answer · 2019-11-07 08:03:19Z

2

Like Olli mentioned in the comments, the second one doesn't work because the onload event has already happened at the time you add the eventlistener.

I believe the first one doesn't work because the SomeView was not attached yet to the page (as you execute the js in the constructor), therefore the page has not enough content to be scrollable yet.
You should execute that javascript in the onAttach method of the View.

@Route("somthing")
public class SomeView extends VerticalLayout{

    public SomeView(){
        ...
    }

    @Override
    public void onAttach(AttachEvent attachEvent) {
        UI.getCurrent().getPage().executeJs("window.scroll(0,300)");
    }
}

edited Nov 7, 2019 at 8:03

answered Nov 7, 2019 at 7:41

kscherrer

5,7142 gold badges25 silver badges62 bronze badges

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

Comments

Meziane · Accepted Answer · 2019-11-11 12:38:44Z

1

Just use getElement() instead of UI.getCurrent().getPage()

@Route("something")
public class SomeView extends VerticalLayout{

  public SomeView(){
    ...
    Adding some Elements
    ...

    getElement().executeJs("window.scroll(0,300)");
  }
}

in the contructor of your SomeView.

edited Nov 11, 2019 at 12:38

answered Nov 11, 2019 at 8:54

Meziane

1,7071 gold badge14 silver badges24 bronze badges

1 Comment

Meziane Over a year ago

@tobias-nolte: You are welcome. Thank you too

Collectives™ on Stack Overflow

Executing JS-Code in Vaadin 14 Application does nothing

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related