Why can't summernote find the jquery already included in the gwtbootstrap3

527 views Asked by At

the basic question is: does gwtbootstrap3 already includes jquery (I suppose so, see below). And if so why can't summernote refer to it. I found this answer here but I am still not sure how to proceed.

I added Summernote to my GWTBootstrap3 project. Then I added the following links to my HTML page as referred to on summernote.org. This works perfectly. Although I want to make sure to have only the necessary links or includes in my project.

<!--  Summernote required includes BEGIN-->
<!-- include libraries(jQuery, bootstrap) -->
<link 
href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" 
rel="stylesheet"> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js">
</script> 
<script 
src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js">
</script>

<!-- include summernote css/js-->
<link 
href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.css" 
rel="stylesheet">
<script 
src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.js">
</script>
<!--  Summernote required includes END-->

As I understand gwtbootstrap3 already uses jquery. So I decided to comment out the jquery plugin. The problem now is that summernote fails with the following error in the web console of my chrome browser:

Uncaught TypeError: Cannot read property 'fn' of undefined

at summernote.js:460
at summernote.js:21
at summernote.js:23

It's very obvious that this refers to the missing jquery (as line 460 refers to ...)

isWebkit: !isEdge && /webkit/i.test(userAgent),
isChrome: !isEdge && /chrome/i.test(userAgent),
isSafari: !isEdge && /safari/i.test(userAgent),
browserVersion: browserVersion,
jqueryVersion: parseFloat($.fn.jquery), <!-- LINE 460 !!! -->
isSupportAmd: isSupportAmd,
hasCodeMirror: hasCodeMirror,
isFontInstalled: isFontInstalled,
isW3CRangeSupport: !!document.createRange

So it boils down to the question, why can't summernote refer to the jquery already included in the gwtbootstrap3 bundle? What would make the difference in using NoRessource and include all necessary files manually? Would that resolve the problem? What files would be necessary to include manually and how / where would I have to include them?

Best regards Hannes

1

There are 1 answers

0
HHeckner On

The reason why I imported the links listed above was that when beginning to work with summernote in gwtbootstrap3 it wouldn't work. i.e. it wouldn't show up at all. But the reason was NOT that I needed to import the links mentioned above. It was probably some other error I made (or some refreshing problem with eclipse). To make a long story short. It is not necessary to import those links listed on summernote.org. Why? Because they are already included in the gwtbootstrap3-extras for summernote. So to be exact it is rather harmful to import those links because you will experience probably strange problems when there are two separate instances of jquery running. So the answer ist. DO NOT IMPORT IT and everything is fine.