CODEWITHSUNDEEP
vaadinvaadin14
Tobias Nolte
Tobias Nolte

Reputation: 103

Executing JS-Code in Vaadin 14 Application does nothing

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.

Upvotes: 0

Views: 984

Answers (2)

Meziane
Meziane

Reputation: 1667

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.

Upvotes: 1

kscherrer
kscherrer

Reputation: 5766

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)");
    }
}

Upvotes: 2

Related Questions