Search code examples
gwtgwtquerygwtbootstrap3

Using GWTQuery to call Bootstrap JS collapse method

I want to replicate this jQuery call in gQuery to open all closed Accordion panels at once:

$('.panel-collapse:not(".in")').collapse('show');

I have tested this on my app and it works, however I am unable to successfully implement the same logic using gQuery to call the JavaScript collapse method:

@Override
public void onClick(ClickEvent event) {
  GQuery.$(".panel-collapse").not(".in").trigger("collapse", "show");
}

What is the correct way to call JavaScript methods from gQuery?

Further Info - I have successfully tested this gQuery code in my onClick method to add a test class to the affected divs - so I am certain the selector part of the above query works:

GQuery.$(".panel-collapse").not(".in, .MENU").addClass("test");
Solution

  • Why you can't use collapse with GQuery

    IIRC collapse() is not a jQuery API method. Maybe you're using Bootstrap JS, or some jQuery plugin that provides this functionality, but it's not one of the jQuery API methods and thus it's not provided by GQuery.

    Why trigger wouldn't work either

    GQuery, or GwtQuery, is not a wrapper for jQuery, but a full Java implementation of the jQuery API.
    What this means is that, when you do something like this:

    GQuery.$(".panel-collapse").not(".in").slideToggle();

    You're not invoking jQuery's $(), not(), or slideToggle(); you are using a Java library to achieve the same result.
    That's the reason why trying something like trigger("slideToggle") won't work: because a) slideToggle() is not an event, but a function; and b) GQuery doesn't make use of jQuery's JS functions.

    Solution with GQuery

    You can achieve the same "accordion" effect using the slideUp(), slideDown() and slideToggle() functions methods. To open all the collapsed elements, just calling slideDown() on them should work:

    GQuery.$(".panel-collapse").not(".in").slideDown();

    For full accordion effect, combine those with the toggleClass() and removeClass() methods to mark which elements are open / closed so you know which ones to toggle when clicked.

    Solution with native collapse()

    Now, if you don't mind the advice... GQuery is great, but the animations are far from being as smooth as in native jQuery. I guess the same happens with Bootstrap.
    If you can (and I can't see a reason why you couldn't), just use JSNI to make a native call to collapse() like this:

    private native void collapseAll() /*-{
    $wnd.$('.panel-collapse:not(".in")').collapse('show');
}-*/;

    This requires that you load jQuery (or Bootstrap) in your page, but since you said that invoking collapse() in plain JS worked, I guess that's your case.