javajquerygwtgwt-bootstrap

Remove parent element from GWT UIBinder


I have a GWT generated accordion element from GWTBootstrap which produces something similar to the html below:

<div class="accordion" id="gwt-uid-1234">
    <div class="accordion-group" id="test">
        <div class="accordion-heading">Header1</div>
            ...
    </div>
</div>

I wish to replicate this jquery call in order to remove the outer accordion element, without deleting its contents.

 $('#test').unwrap();

In other words, I want to turn off the Accordion functionality of automatically opening or closing when another accordion is opened, so that all accordions that have been opened remain open.

I wish to do this in an onClick method in my Java class, assigned to a checkbox on screen which a user can use to activate/ deactivate the accordion functionality.

public UIPanel() {  
    initWidget(uiBinder.createAndBindUi(this));
    disableCheckbox.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            if(accordionsDisabled) {
                Window.alert("accordions enabled");
                // IGNORE THIS FOR MEANTIME - REMOVE FUNCT IS PRIORITY 1                
                accordionsDisabled = false;
            } else {
                Window.alert("accordions disabled");
                // remove outer accordion element i.e. $('#test').unwrap();
                contentPanel.getElementById("test").removeParent();
                accordionsDisabled = true;
            }
        }
    });
}

I have no success in using the Element or Dom objects in Java (with removeParent methods) Is there any other way of doing this?


Solution

  • What about gwt-jquery? With this you get an interface for jquery and could use the unwrap method of JQueryElement, to achive exactly the same:

    Remove the parents of the set of matched elements from the DOM leaving the matched elements in their place.

    public native JQueryElement<T> unwrap();
    

    Another interface maintained by GWT Material Design can be found here. It is based on gwt-jquery. As you can see the JQueryElement.java for example is nearly the same. It's also available via Maven.

    An alternative without another library would be a JSNI (JavaScript Native Interface) method and use the JQuery unwrap function like this.

    private static native void unwrapAccordionGroup() /*-{
          $wnd.jQuery('#test').unwrap()
     }-*/;