Use of the Javascript native code and gwt-bootstrap

[roni]

I am finding problems in execute javascript code with JSNI in GWT when gwt-bootstrap is included in the module (i.e. <inherits name="com.github.gwtbootstrap.Bootstrap"/>).

More precisely, I'm using the jCrop JavaScript plugin. I use it normally in my projects, but when I add the GWT bootstrap-in module *. Gwt.xml, the following exception occurs during execution of native javascript code:

com.google.gwt.core.client.Javasscriptexception: (TypeError): Object [object Object] has no method 'jCrop'

This is a gwt-bootstrap bug or is there a way to use external javascript files without interference of the gwt-bootstrap?

Thanks.

[Ohashi, Keisuke]

Hi roni.

I guess its problem cause is timing of loading .

Maybe you should do some hack.

1. Use BootstrapNoResources module in your module xml. 
2. Load jquery, jquery.color and  jquery.jCrop in your module xml.
3. Load GwtBootstrap css in you EntryPoint.

Like below.

module xml(*.gwt.xml)

<module>
<!--
inherits another required modules
-->
 
<inherits name='com.github.gwtbootstrap.BootstrapNoResources'/>
<!-- This use jquery of included Gwt-Bootstrap -->
<script src="js/jquery-1.7.1.min.js"/>

<!--
if you need another jquery source, write like below
<script sorc="/js/jquery.min.js/>
-->


<!-- load jCrop's js
<script src="/js/jquery.color.js"/>
<script src="/js/jquery.JCrop.js"/>

<!--
another writing
-->
</module>

EntryPoint

public void onModuleLoad() {
ResourceInjector.configureWithCssFile()

// some code
}

Right now,The ResourceInjector load jquery regardless of jquery is already loaded.

I'll fix it. ;-)

[Joseph Lust]

FYI, I've seen this sort of error happen before if there is a namespace collision. Make sure that the object name this is being thrown on is not defined in both libraries.

Sincerely,

Joseph

[roni]

Hi keisuke,

I tried to run your tip, but still I have not success.

Now, the problem occurs when I insert the following line in onModuleLoad ()

ResourceInjector.configureWithCssFile ()

With this line of code, the bootstrap CSS style appears (see the button in the figure below), but the jCrop effect does not appear.Also, the same javascript exception occurs (i.e. Object [object Object] has no method 'jCrop').

However, when I comment that line, the jcrop functionality works, but without bootstraps css styles. See the figure below (the button as hyperlink).

Any idea?

[Ohashi, Keisuke]

Right now, I commit ResourceInjector , it does not inject jquery , if
already exists it.

Please try again :)

[roni]

Great keisuke,

I tried and it worked perfectly!  

Thank you for your help!

[Ohashi, Keisuke]

u are welcome :)

Regards.

--
keisuke oohashi