GwtMaterialDesign / gwt-material-table

A complex table component designed for the material design specifications
https://gwtmaterialdesign.github.io/gmd-table-demo/
Apache License 2.0
27 stars 31 forks source link

Page reload throws (TypeError) : $wnd.$ is not a function #184

Closed mitrakov closed 4 years ago

mitrakov commented 4 years ago

I have a standard GWT MaterialDesign project with a MaterialDataTable When I try to reload page with a single simple MaterialDataTable in superdev mode it throws:

Error: com.google.web.bindery.event.shared.UmbrellaException: Exception caught: (TypeError) : $wnd.$ is not a function

But when I navigate to it, it works normally!

Looks like jQuery module is too late to load to get MaterialDataTable started.

The exception is caught in Eventbus:

_.doFire_0_g$ = function tMb_g$(event_0_g$, source_0_g$){
  ...
  if (EWb_g$(causes_0_g$)) {
    throw mXb_g$(new hNb_g$(causes_0_g$));
  }

I have all the required dependencies installed:

<inherits name="gwt.material.design.GwtMaterialBasicWithJQuery"/>
<inherits name="gwt.material.design.addins.GwtMaterialAddins"/>
<inherits name="gwt.material.design.GwtMaterialTable"/>

How to reproduce: 1) install basic app:

mvn archetype:generate -DarchetypeGroupId=com.github.gwtmaterialdesign -DarchetypeArtifactId=gwt-material-archetype -DarchetypeVersion=2.1.1

2) Add nested slot to ApplicationPresenter (SLOT_MAIN) 3) Add a standard presenter module that uses Place "table":

@Inject
TablePresenter(EventBus eventBus, MyView view, MyProxy proxy) {
    super(eventBus, view, proxy, ApplicationPresenter.SLOT_MAIN);
}

4) Add MaterialDataTable to a view:

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
             xmlns:m="urn:import:gwt.material.design.client.ui"
             xmlns:m.table="urn:import:gwt.material.design.client.ui.table"
             xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <m:table.MaterialDataTable />
</ui:UiBinder>

That's it. Run superdev mode.

P.S. also reproducible on 2.2

BenDol commented 4 years ago

Are you using a MVP framework like GWTP? There seems to be an unresolved issue where the entrypoint is loading before GMD is able to load the javascript library. You can confirm this by manually loading JQuery in the index.html and using <inherits name="gwt.material.design.GwtMaterialDesignBasic"/>

mitrakov commented 4 years ago

Yep, you're absolutely right. I use out-of-the-box GWTP with MvpWithEntryPoint. Your workaround works. With jQuery 2.2.4. Thanks!

Is this idiomatic solution? What do you think should I open an issue for GWTP guys?

kevzlou7979 commented 4 years ago

Ok figure it out whats causing it, it seems that on constructors when adding it on GWTP UiBinder it seems that jquery is not loaded. So we need to check on MaterialWidget constructor if Jquery is loaded if not then we need to inject it. Fixed via https://github.com/GwtMaterialDesign/gwt-material/commit/28d1300a08fb03ebb60df76bdef277995ded505b

kevzlou7979 commented 4 years ago

We are reworking also the GMD Table demo for the latest Updates and documentation.

kevzlou7979 commented 4 years ago

Also Dark Mode will be implemented to GMD DataTable too. Currently the Core supports Dark Mode https://gwtmaterialdesign.github.io/gmd-core-demo/

image

BenDol commented 4 years ago

@mitrakov I would say its subjective to your implementation, personally I would prefer loading JQuery myself, but also our JQuery jsinterop only supports v~2. Will try to figure out a solution to this issue when I have time.

Edit: no real need to open a GWTP issue just yet, I'll need to figure out why its happening first I think.

mitrakov commented 4 years ago

Yes, I noticed that jQuery 2.2.4 is the last version that works properly 🙂 Anyway, thank you guys, @BenDol , @kevzlou7979, I hope your patch with .checkJQuery(false) will really help!

As for now manual loading jQuery in html does the trick