javascriptjqueryhtmlwicket-6

Using uniform() in Wicket generates multiple instances when invoking the modelChanged method


I am trying to implement a simple dropdown which is updated based on the selection of another dropdown with Wicket 6.19. So far so good, the dropdown work as they should. The problem is that I am using a customized dropdown choice component where in the renderHead methode the uniform() methode is called.

@Override
public void renderHead(IHeaderResponse response) {
    super.renderHead(response);
    response.render(OnDomReadyHeaderItem.forScript("$('#" + getMarkupId(true) + "').uniform();"));
}

This methode (it was written by someone else) is always called when I invoke the modelChanged() methode of my dropdown to be updated. Thus, a new div element is created everytime this renderHead method is called which results on the screen in a shadow aound the component.

Generated HTML after changing the selection of the dropdown several times

When I remove the code with the uniform, the addional divs are not generated but the drop down has the wrong style. I am not familiar with the uniform methode. I would really appreciate your help how to fix this.


Solution

  • I know quite some time passed since my question but recently I came by a solution. I know this is probably not the best solution but it works for me and maybe it helps someone who stumbles over the same problem.

    In this solution I remove the div and child span element before performing uniform again. This way, I have only one div after I invoke the uniform method.

    @Override
    public void renderHead(IHeaderResponse response) {
            super.renderHead(response);
    
            if(hasBeenRendered())
                response.render(OnDomReadyHeaderItem.forScript("$('#" + getMarkupId(true) + "').parent().replaceWith(function() {return $('select', this);});"));
    
            response.render(OnDomReadyHeaderItem.forScript("$('#" + getMarkupId(true) + "').uniform();"));      
    }