2

This little task is causing a bigger headache than it needs. I just wanna get a simple dropdown like: enter image description here

Pretty easy, right? It even gives me the code? How hard could it be? I first imported the CDN in my page.

<head>
  <!-- stuff -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
</head>

and then after all that, I add:

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>

According to their documentation, all I need to do is:

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

on my ui-dropdown class element, but it just gives me problems. 

<Uncaught TypeError: $(...).dropdown is not a function

I looked at the following things to help, but didn't have much luck:

It just looks like no matter what I do... the script isn't getting initialised.

dsomel21
  • 576
  • 2
  • 8
  • 27

2 Answers2

1

Can you post your code to somewhere (jsfiddle or codesandbox) so we can detect the problem easier? (Sorry I don't have enough reputation to just comment on your question yet)

=======

My answer:

It seems that your code ran before the jQuery library being fully loaded to your browsers. Can you try wrap your execution codeblock into $( document ).ready(function(){} like this?

$( document ).ready(function() { $('select').dropdown() });

duonglk
  • 76
  • 1
  • 3
  • Here's a [CodePen](https://codepen.io/dsomel21/pen/zReVEB), but this one works. I think this has something to do with the way I am rendering my layouts. – dsomel21 Mar 01 '18 at 15:44
  • 1
    I have added my answer, please try. But I agree with @dsomel21, it's not semantic UI-related ;) – duonglk Mar 02 '18 at 07:04
1

This was not related to Semantic UI.

It was due to the way the DOM was being rendered. In my case, I had nested snippets (Rails Partials) and in seems like Semantic does not like when you initialize with .dropdown() in the child view.

Hence, I fixed this by initializing in parent and it works like a charm!

dsomel21
  • 576
  • 2
  • 8
  • 27