Open Grishas opened 8 years ago
Please see #223. Your jQuery are probably loaded several times.
thanks
I have third part js module that require specific jquery version (jquery-1.10.2.min.js) Loaded in root html like :
--> In the other side I have select jquery. Is that the issue? If yes how you suggest to resolve that. Thanks a lot again Grigory.@Grishas Yes, that's the issue. If you have to import a specific version of jQuery (1.10.2), you must ensure that jQuery is not injected again.
For the select wiget, we do not provide jQuery directly in the GWT module, so I think you have injected jQuery with another GWT module. Please just make sure you do not inherit a GWT module with jQuery included.
thanks! I will try
ok ... I comment all calls in html file to jquery
and now I use jquery from bootstrap core module.
but I got the same error...Any ideas?
Note.The issue appear on on thirst load of view.After firts load its work :-)
errors
Caused by: com.google.gwt.user.client.ui.AttachDetachException: Exception caught: (TypeError) : $wnd.jQuery(...).selectpicker is not a function at Unknown.fillInStackTrace_0_g$(Ctn-0.js@3:30958) at Unknown.Throwable_3_g$(Ctn-0.js@8:30913) at Unknown.Exception_3_g$(Ctn-0.js@18:31056) at Unknown.RuntimeException_3_g$(Ctn-0.js@18:31097) at Unknown.UmbrellaException_3_g$(Ctn-0.js@25:57886) at Unknown.UmbrellaException_5_g$(Ctn-0.js@26:57947) at Unknown.AttachDetachException_1_g$(Ctn-0.js@26:86740) at Unknown.tryCommand_1_g$(Ctn-0.js@11:86796) at Unknown.doAttachChildren_1_g$(Ctn-0.js@3:6219) at Unknown.onAttach_0_g$(Ctn-0.js@8:6051) at Unknown.execute_35_g$(Ctn-0.js@10:86824) at Unknown.tryCommand_1_g$(Ctn-0.js@14:86780) at Unknown.doAttachChildren_1_g$(Ctn-0.js@3:6219) at Unknown.onAttach_0_g$(Ctn-0.js@8:6051) at Unknown.execute_35_g$(Ctn-0.js@10:86824) at Unknown.tryCommand_1_g$(Ctn-0.js@14:86780) at Unknown.doAttachChildren_1_g$(Ctn-0.js@3:6219) at Unknown.onAttach_0_g$(Ctn-0.js@8:6051) at Unknown.execute_35_g$(Ctn-0.js@10:86824) at Unknown.tryCommand_1_g$(Ctn-0.js@14:86780) at Unknown.doAttachChildren_1_g$(Ctn-0.js@3:6219) at Unknown.onAttach_0_g$(Ctn-0.js@8:6051) at Unknown.onAttach_1_g$(Ctn-0.js@20:7239) at Unknown.setParent_0_g$(Ctn-0.js@12:6147) at Unknown.adopt_0_g$(Ctn-0.js@14:6206) at Unknown.add_4_g$(Ctn-0.js@8:6264) at Unknown.add_3_g$(Ctn-0.js@8:6257) at Unknown.add_5_g$(Ctn-0.js@8:6384) at Unknown.execute_6_g$(Ctn-0.js@38:11601) at Unknown.$executeScheduled_0_g$(Ctn-0.js@40:34175) at Unknown.runScheduledTasks_0_g$(Ctn-0.js@9:33897) at Unknown.flushPostEventPumpCommands_0_g$(Ctn-0.js@5:33989) at Unknown.execute_26_g$(Ctn-0.js@23:34128) at Unknown.execute_25_g$(Ctn-0.js@19:33865) at Unknown.apply_0_g$(Ctn-0.js@28:33360) at Unknown.entry0_0_g$(Ctn-0.js@16:33416) at Unknown.anonymous(Ctn-0.js@14:33396) at Unknown.callback_0_g$(Ctn-0.js@46:33916) Caused by: com.google.gwt.core.client.JavaScriptException: (TypeError) : $wnd.jQuery(...).selectpicker is not a function at Unknown.jQuery(Unknown@-1) at Unknown.initialize_3_g$(Ctn-0.js@23:137182) at Unknown.onLoad_12_g$(Ctn-0.js@8:137219) at Unknown.onAttach_0_g$(Ctn-0.js@8:6052) at Unknown.execute_35_g$(Ctn-0.js@10:86824) at Unknown.tryCommand_1_g$(Ctn-0.js@14:86780) at Unknown.doAttachChildren_1_g$(Ctn-0.js@3:6219) at Unknown.onAttach_0_g$(Ctn-0.js@8:6051) at Unknown.execute_35_g$(Ctn-0.js@10:86824) at Unknown.tryCommand_1_g$(Ctn-0.js@14:86780) at Unknown.doAttachChildren_1_g$(Ctn-0.js@3:6219)
Its impossible to troubleshoot a problem I cannot see. Please fork the gwtbootstrap3-sample project and modify it so it exhibits your problem.
Hi! I had the exact same problem. I solved adding references to css and javascript in my html page before the
<!-- Scripts for jQuery. -->
<script type="text/javascript" src="js/jquery-1.11.3/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>
In fact this is not clear. The documentation here is not clear regarding this. The only one thing that I know is that if I remove the references above in my html page, the app does not start. I can say that I added gwtboostrap3 and gwtboostrap3-extras as a jar file in the libraries references and not adding them as maven dependencies. Maybe is this the reason? I dont' know, anyway, adding those css and js in my html, now it works.
thanks , So I feel that we need to understand to root cause Hope that I will have time to investigate that in deep
Did you solve the problem? Please, if you investigate and find something, please keep me up to date on the topic.
sure
On 18 May 2016, at 12:16 PM, Magallo notifications@github.com wrote:
Did you solve the problem? Please, if you investigate and find something, please keep me up to date on the topic.
— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/gwtbootstrap3/gwtbootstrap3-extras/issues/308#issuecomment-219970621
@Magallo are you sure you are include <inherits name="org.gwtbootstrap3.extras.select.Select"/>
in your gwt.xml file ? Please note that this include will NOT inject jQuery to your application. You have to include, for example, <inherits name="org.gwtbootstrap3.GwtBootstrap3"/>
in your gwt.xml to inject jQuery before inject bootstrap-select.
Anyway, please ensure that the jQuery is injected ONLY ONCE (not 0, not > 1 time) and before bootstrap-select. It's not a select related issue. The problem is in your source code.
@crevete yes, I have <inherits name="org.gwtbootstrap3.extras.select.Select"/>
inside my gwt.xml file and I have also <inherits name="org.gwtbootstrap3.GwtBootstrap3"/>
before it. In fact my demo project works now, but as I said in my previous message, I had to add references to jquery.js, bootstrap-select.css and bootstrap-select.js to my .html file otherwise the demo project doesn't work. Is this a normal thing or not?
Not at all... These libraries should be injected dynamically by GWT
@crevete I don't really understand how GWT could dynamically inject these libraries. Is this something related to maven dependencies that I don't use? As I said before, I added gwtbootstrap3 and gwtbootrap3-extras as normal .jar external libraries and not as maven dependencies. Could be this the reason I have to explicitly add .js and .css manually?
I never tried that. When using maven, why do not add theses lib jars into maven dependencies. Any way, why you don't try it your self ?
When loading your webapp, GWT loads all sub-modules. When loading inherits name="org.gwtbootstrap3.extras.select.Select
module, the js library will be injected. Please read GWT turorial. thanks
This has nothing to do with the build process and it really doesn't matter how you add the jar to your build path. Each module you load has code that injects the corresponding javascript library when it is loaded. This mean that you shouldn't try and inject the css or js yourself in the html file, otherwise, you will get errors like the one you describe above.
I personally do not like automatic injection because I feel like its too unpredictable. In every product I create, I always inherit from GwtBootstrap3NoTheme and for extras the NoResources modules. (eg: SelectNoResources). Then I take responsibility for making sure the jquery, bootstrap, select, etc....js and css get loaded before the corresponding modules are loaded. For simple projects, automatic injection is ok but for more complicated projects I feel likes its always better to do that part yourself.
Anyway, if you need more specific troubleshooting, please do as @crevete suggests and fork the seed project, duplicate the problem, and I can look at it.
Hope this helps, Steve
Oh @Magallo, Here is the code that injects the javascript for your reference:
public class SelectEntryPoint implements EntryPoint {
@Override
public void onModuleLoad() {
ScriptInjector.fromUrl(GWT.getModuleBaseURL() + SelectClientBundle.SELECT_JS)
.setWindow(ScriptInjector.TOP_WINDOW).setRemoveTag(true).inject();
}
}
Any new about this ? @Grishas @Magallo
it seems that first time during access select js its still not loaded. So I will try sjardine suggestion to load all js by myself. sjardine/crevete can you pls provide such king of example how to correct load GwtBootstrap3NoTheme and SelectNoResources by myself(I mean to all necessary resources like js etc ....)? Thanks a lot Grisha
Please fork the seed project and create a test that shows the error. This way we can fix any problems. I will work on an example over the next few weeks.
Hi all,
I also experience this problem:
uncaught exception: com.google.gwt.user.client.ui.AttachDetachException: Exception caught: Exception caught: Exception caught: Exception caught: Exception caught: Exception caught: Exception caught: Exception caught: Exception caught: Exception caught: Exception caught: Exception caught: Exception caught: Exception caught: Exception caught: Exception caught: (TypeError) : $wnd.jQuery(...).selectpicker is not a function
How can I check that I use or inject the wrong version of JQuery?
Thanks, Lofi
My workaround for this problem is using ScriptInjector to inject the correct JQuery:
ScriptInjector.fromUrl("https://code.jquery.com/ui/1.11.4/jquery-ui.js")
.setCallback(new Callback<Void, Exception>() {
@Override
public void onFailure(Exception reason) {
logger.info("Script load failed Info: " + reason);
}
@Override
public void onSuccess(Void result) {
logger.info("JQuery for Select loaded successful!");
Select select = new Select();
Option option = new Option();
option.setText("Hallo");
select.add(option);
formGroup.add(select);
}
}).setRemoveTag(true).setWindow(ScriptInjector.TOP_WINDOW)
.inject();
Hello all,
Im facing the same issue, as you can see in the next image
I think after reading this comments that I have referenced twice the same library or some jquery in some inherit zone, but im not able to find out where...
This is my main inheritance area
<inherits name="com.google.gwt.resources.Resources" />
<inherits name="com.google.gwt.http.HTTP" />
<inherits name="com.google.gwt.activity.Activity" />
<inherits name="com.google.gwt.place.Place" />
<inherits name="com.google.gwt.i18n.I18N" />
<inherits name="com.googlecode.mgwt.MGWT" />
<inherits name='com.googlecode.gwtphonegap.PhoneGap' />
<inherits name="org.gwtbootstrap3.GwtBootstrap3"/>
<inherits name="org.gwtbootstrap3.extras.select.Select"/>
<inherits name="org.gwtbootstrap3.extras.card.Card"/>
<!-- Commonmodule -->
<inherits name="com.package.common"/>
and the common package inheritance area
<inherits name="com.google.gwt.core.Core"/>
<inherits name="com.google.gwt.resources.Resources"/>
<inherits name="com.allen_sauer.gwt.log.gwt-log-OFF" />
<inherits name='com.google.gwt.user.theme.standard.Standard' />
so @sjardine @crevete Im trying to find out where this extra jquery adition is failing. There is extra clue I have forgotten?
Thanks in advance!
Saúl
P.S: There is the js generated folder:
@sauldeleon your gwt.xml looks good. When injecting org.gwtbootstrap3.GwtBootstrap3
, jquery and bootstrap js are included, then org.gwtbootstrap3.extras.select.Select
, select js is loaded. What your HTML page looks like ? Is there any "static" javascript import ?
@Grishas Just a question: when you said the first load, it does not work, but after that it works fine. In your HTML file, do you have some "static" jQuery/Bootstrap imports and/or some "static" select instantiation javascript code?
Anyway, I guess this is a script loading order issue.
Hello @crevete and thanks for your fast response!
Here is an image of the loading files:
I dont' see any jquey file to be loaded. but if i hit F5... the second time it works, and i Dont see any difference in the loaded files.
Also I have not found any static import. Maybe the
line imports jquery again, but I think this have been considered not to fail
Thanks!
@sauldeleon In your screenshot, I don't see jquery loading, is it loaded before ? Could you provide your HTML page (typically content of the <head>
element) ?
Hello @crevete
Sure, here it is:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="gwt:property" content="locale=en">
<title>iHTSClean</title>
<script type="text/javascript" lang="javascript" src="cordova.js"></script>
<script type="text/javascript" src="iHTSClean/iHTSClean.nocache.js"></script>
<link rel="stylesheet" href="http://localhost:8080/ihtsWebCleandev/iHTSClean/gwt/chrome/chrome.css">
<link rel="stylesheet" href="http://localhost:8080/ihtsWebCleandev/iHTSClean/css/bootstrap-3.3.6.min.cache.css">
<link rel="stylesheet" href="http://localhost:8080/ihtsWebCleandev/iHTSClean/css/font-awesome-4.5.0.min.cache.css">
<link rel="stylesheet" href="http://localhost:8080/ihtsWebCleandev/iHTSClean/css/bootstrap-select-1.10.0.min.cache.css">
<link rel="stylesheet" href="http://localhost:8080/ihtsWebCleandev/iHTSClean/gwt/standard/standard.css">
<link rel="stylesheet" href="http://localhost:8080/ihtsWebCleandev/iHTSClean/css/bootstrap.css">
<link rel="stylesheet" href="http://localhost:8080/ihtsWebCleandev/iHTSClean/css/iHTSCleanStyle.css">
<script src="http://localhost:8080/ihtsWebCleandev/iHTSClean/605540F1DDEB8BC6F245214D1BD4D602.cache.js"></script>
</head>
Wow... this is wierd. I have generated a gif with a loading try, as you can see, it loads the select js, then the error is shown and then it dissapears :/
The easiest way to resolve this issue is to NOT use the automatic injection. Inherit the *NoResources modules and inject the javascript yourself. This way you control when the JS gets injected.
Maybe the way we inject select JS changes the script loading order if you guys never had problems with other extra widget...
I will try to change ScriptInjector.fromUrl()
to ScriptInjector.fromString()
. But I still cannot understand why on our demo page, it does not happen. Because it does exactly the same thing:
<inherits name="org.gwtbootstrap3.GwtBootstrap3"/>
<inherits name="org.gwtbootstrap3.extras.select.Select"/>
Could you please test this fix and give me a feedback ? thanks
Do you mean downloading the last version of gwt boostrap3 and try again? or injecting the JS as @sjardine proposed?
@sauldeleon Please use the last snapshot version (1.0-SNAPSHOT) with maven.
@crevete OK, I have downloaded the last source code and I have built it with maven. Im going to check the fix a.s.a.p. Ill keep you posted
@Grishas @Magallo @lofidewanto Could you please also test this fix with current SNAPSHOT version and give me a feedback? Thanks
@sauldeleon @Grishas @Magallo @lofidewanto Any news?
hello @crevete and sorry for my very late answer.
In my particular case, I got the problem solved. It was not a Boostrap 3 extras problem.
It was a poor knowdledge problem: I have some mapper condition added that was avoiding to load the modules correctly. Everything started to work correctly when I set the mappers OK. Now, it is working perfect ;)
Thanks for all the help and feedback.
P.S: I also tested the 1.0-SNAPSHOT with no issues after I corrected my buggy code
@sauldeleon great news :-) FYI, the select has been upgraded to the last version 1.11.0 with support of some new options
@crevete Thanks! but i have a question.
Do I am able to use it throught the maven respository like this(in the pom.xml)?
Or Do I have to set is a a external package?
Thanks again!
@sauldeleon You can try it (select v1.11.0) using maven, but 1.11.0 is the version of the select widget, but not the version of gwtbootstrap3-extra. You should use the current 1.0-SNAPSHOT version of gwtbootstrap3-extra. Please see the demo page: http://gwtbootstrap3.github.io/gwtbootstrap3-demo/snapshot/#select
@crevete GREAT! thank you!
There is some way to give more ideas for improve GWT Boostrap3 - Select? any ideas panel or similar? Because a I have one and I don't know if here is the correct place
Regards!
@sauldeleon please just create a new issue thanks
@Grishas @Magallo @lofidewanto without your reply, I will close this issue.
@crevete I would like to download the 1.0 SNAPSHOT version and test it. When I go to https://mvnrepository.com/artifact/org.gwtbootstrap3 the latest version is 0.9.3 - available for download. Can you please tell me how to get the 1.0 SNAPSHOT jars ?
@attitherobot Why you don't use maven (as described in the project home page) to download the SNAPSHOT version ?
<dependency>
<groupId>org.gwtbootstrap3</groupId>
<artifactId>gwtbootstrap3-extras</artifactId>
<version>1.0-SNAPSHOT</version>
<scope>provided</scope>
</dependency>
Anyway, you can download it here: https://oss.sonatype.org/content/repositories/snapshots/org/gwtbootstrap3/gwtbootstrap3-extras/
@crevete I have not worked with maven. Using ant for my project and it works fine! Thank you for the quick reply!
@attitherobot You can use maven to wrap ant calls.
I was having the same problem and this fixed it.
I should note that I am using the theme:
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
What is the schedule for the release including this fix?
We have had to modify our release builds to allow Snapshots along with manually adding it to our maven repositories just for this fix . This is less than ideal for a production environment.
Does the SNAPSHOT build currently work for your case? This issue is seems to primarily be an injection issue. As I stated before I don't like the automatic injection features. I don't use them in a production environment.
@crevete I will prepare a release. 0.9.4, I guess. Do you have any objections?
@sjardine Thanks for the release!
hello,
I try ti use select:MultipleSelect , but got error like Caused by: com.google.gwt.core.client.JavaScriptException: (TypeError) : $wnd.jQuery(...).selectpicker is not a function
please advice
Caused by: com.google.gwt.user.client.ui.AttachDetachException: Exception caught: (TypeError) : $wnd.jQuery(...).selectpicker is not a function at Unknown.fillInStackTrace_0_g$(Ctn-0.js@3:30942) at Unknown.Throwable_3_g$(Ctn-0.js@8:30897) at Unknown.Exception_3_g$(Ctn-0.js@18:31040) at Unknown.RuntimeException_3_g$(Ctn-0.js@18:31081) at Unknown.UmbrellaException_3_g$(Ctn-0.js@25:57870) at Unknown.UmbrellaException_5_g$(Ctn-0.js@26:57931) at Unknown.AttachDetachException_1_g$(Ctn-0.js@26:86724) at Unknown.tryCommand_1_g$(Ctn-0.js@11:86780) at Unknown.doAttachChildren_1_g$(Ctn-0.js@3:6219) at Unknown.onAttach_0_g$(Ctn-0.js@8:6051) at Unknown.execute_35_g$(Ctn-0.js@10:86808) at Unknown.tryCommand_1_g$(Ctn-0.js@14:86764) at Unknown.doAttachChildren_1_g$(Ctn-0.js@3:6219) at Unknown.onAttach_0_g$(Ctn-0.js@8:6051) at Unknown.execute_35_g$(Ctn-0.js@10:86808) at Unknown.tryCommand_1_g$(Ctn-0.js@14:86764) at Unknown.doAttachChildren_1_g$(Ctn-0.js@3:6219) at Unknown.onAttach_0_g$(Ctn-0.js@8:6051) at Unknown.execute_35_g$(Ctn-0.js@10:86808) at Unknown.tryCommand_1_g$(Ctn-0.js@14:86764) at Unknown.doAttachChildren_1_g$(Ctn-0.js@3:6219) at Unknown.onAttach_0_g$(Ctn-0.js@8:6051) at Unknown.onAttach_1_g$(Ctn-0.js@20:7239) at Unknown.setParent_0_g$(Ctn-0.js@12:6147) at Unknown.adopt_0_g$(Ctn-0.js@14:6206) at Unknown.add_4_g$(Ctn-0.js@8:6264) at Unknown.add_3_g$(Ctn-0.js@8:6257) at Unknown.add_5_g$(Ctn-0.js@8:6384) at Unknown.execute_6_g$(Ctn-0.js@38:11585) at Unknown.$executeScheduled_0_g$(Ctn-0.js@40:34159) at Unknown.runScheduledTasks_0_g$(Ctn-0.js@9:33881) at Unknown.flushPostEventPumpCommands_0_g$(Ctn-0.js@5:33973) at Unknown.execute_26_g$(Ctn-0.js@23:34112) at Unknown.execute_25_g$(Ctn-0.js@19:33849) at Unknown.apply_0_g$(Ctn-0.js@28:33344) at Unknown.entry0_0_g$(Ctn-0.js@16:33400) at Unknown.anonymous(Ctn-0.js@14:33380) at Unknown.callback_0_g$(Ctn-0.js@46:33900) Caused by: com.google.gwt.core.client.JavaScriptException: (TypeError) : $wnd.jQuery(...).selectpicker is not a function at Unknown.jQuery(Unknown@-1) at Unknown.initialize_3_g$(Ctn-0.js@23:137166) at Unknown.onLoad_12_g$(Ctn-0.js@8:137203) at Unknown.onAttach_0_g$(Ctn-0.js@8:6052) at Unknown.execute_35_g$(Ctn-0.js@10:86808) at Unknown.tryCommand_1_g$(Ctn-0.js@14:86764) at Unknown.doAttachChildren_1_g$(Ctn-0.js@3:6219) at Unknown.onAttach_0_g$(Ctn-0.js@8:6051) at Unknown.execute_35_g$(Ctn-0.js@10:86808) at Unknown.tryCommand_1_g$(Ctn-0.js@14:86764) at Unknown.doAttachChildren_1_g$(Ctn-0.js@3:6219)
my imports
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:b="urn:import:org.gwtbootstrap3.client.ui" xmlns:b.html="urn:import:org.gwtbootstrap3.client.ui.html" xmlns:b.gwt="urn:import:org.gwtbootstrap3.client.ui.gwt" xmlns:select="urn:import:org.gwtbootstrap3.extras.select.client.ui" xmlns:b3="urn:import:org.gwtbootstrap3.extras.slider.client.ui" xmlns:b4="urn:import:org.gwtbootstrap3.extras.toggleswitch.client.ui">