Semantic-ui: Any solution for JQuery problem

[anushkamds]

Hi Guys,
This very very cool library and one of best I ever seen but it can't still work it out. I tried serval thing but every time it shows me Uncaught ReferenceError: jQuery is not defined at semantic.min.js:11. ( Ahhh :worried:). Can some one suggest a solution for this issue.
I'm using this on electron app with angular. I have tried CDN and build up process even. Every time it gives the same error.

Thank you,
Regrads,
DELOCKDOWN.

[jihoon-oh]

You need to reference the jQuery script tag before referencing the Semantic-UI script tag in your header HTML file.
For example, assuming you're using the CDN for both, the correct order should be:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>

You can also check out: http://stackoverflow.com/questions/30281258/how-to-use-semantic-ui-cdn

Let me know if it works!
Cheers

[anushkamds]

Yes, I did that but it shows something like this and no didn't work this solution, still stuck on there

[awgv]

@delockdown Do you combine your JavaScript into one file? How do you include all those JavaScript files on your pages?

[anushkamds]

@Banandrew, perviously i did that. Then I refer the comment of @jihoon-oh and did that, even that solution didn't work for me.
Check this codepen, it has simple dropdown. It is not working at all.

Regards,
DELOCKDOWN.

[jihoon-oh]

In the codepen, you didn't include the following in your JS:

$('.ui.dropdown')
  .dropdown()
;

Took me a while to figure out what was wrong too, but realized there is a tutorial on how to use the dropdown menu in the "usage" tab.

Here is the exact same codepen, except now with the proper JavaScript code written in.

[awgv]

@delockdown Excuse me, you did what? You didn’t answer any of my questions.

[mrzslr]

if you got the Uncaught ReferenceError: jQuery is not defined at semantic.min.js:11 error again in the console, first and the only thing you should to do is put jQuery link load before the SemanticUI link load.
in first load the jQuery and then load the SemanticUI.be consider about the orders.
Wrong way

<script src="your_path/semantic.min.js" type="text/javascript"></script>
<script src="your_path/jquery.min.js" type="text/javascript"></script>

Correct way

<script src="your_path/jquery.min.js" type="text/javascript"></script>
<script src="your_path/semantic.min.js" type="text/javascript"></script>

[vlow]

@delockdown this is not an issue of semantic-ui or jQuery but a known caveat of the nodejs integration in electron. Take a look at the electron faq: https://electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron

Some alternative approaches to solve this problem are described in this issue: https://github.com/electron/electron/issues/345

[josuevalrob]

Same problem for Angular 6. Is there any solution like _ng-bootstrap_??

[Mempler]

Possible fix for that (Electron)
it worked very well for me.

Run:
yarn add jquery or npm i -s jquery whatever you use.

then add this to your html

<script>
  const jQuery = require('jquery')
  const $ = jQuery
  require('./semantic/semantic.min.js')
</script>