call javascript in wicket and set value from Wicket as a parameter

Question

I have wicket component with onClick event where I'd like to run javascript code which:

1. reloads the page
2. after page has been reloaded, scroll down to the markupId which was clicked

I have to pass as parameter the "markupId" value from wicket to javascript to find out to which position should I scroll down

WicketComponent.java

    MyPanel div = new MyPanel("div");
    div.add(new AjaxEventBehavior("click") {
        @Override
        protected void onEvent(AjaxRequestTarget target) {
            // some requests...
            String markupId = div.getMarkupId();
            target.appendJavaScript("window.location.reload();");
            target.appendJavaScript(jsReload(markupId));
        }

    div.add(AttributeModifier.replace("onclick", "clicked('" + div.getMarkupId() + "');"));

    @Override
    public void renderHead(IHeaderResponse response) {
        super.renderHead(response);

        response.render(JavaScriptReferenceHeaderItem.forReference(new JavaScriptResourceReference(this.getClass(), "script.js")));
    }

WicketComponent.html

<div wicket:id="div" onclick="clicked('markupId');">Text</div>

script.js

function clicked(markupId) {
    window.location.reload();
}
document.addEventListener("DOMContentLoaded", function (event) {
    let elementOffset = $("#{markupId}").offset().top;  // how to pass here markupId parameter from wicket ?
    let windowOffset = $(window).scrollTop();

    window.scrollTo(0, elementOffset- windowOffset);
});

how to pass parameter "markupId" in javascript file which was attached in renderHead() or may be there is another solution for this ? I'll appreciate any help. Thanks!

Answer 1

you should solve your problem using location hash as described here:

Can we have code after location.reload(true)?

for the hash value use a fixed markup id for your component, something like:

 div.setMarkupId("myMarkupId");
 div.add(new AjaxEventBehavior("click") {
    @Override
    protected void onEvent(AjaxRequestTarget target) {
        // some requests...
        String markupId = div.getMarkupId();
        target.appendJavaScript("window.location.hash = 'myMarkupId'");
        target.appendJavaScript("window.location.reload();");
        //that's it! no other js is needed
    }
 }

I haven't tried it but after page reloading it should scroll down to your component.