Problem with Semantic UI Dropdown Box - Works in Jfiddle, but not locally

Question

This Jfiddle accomplishes what I want: http://jsfiddle.net/3kpjt0xd/2/

But when I put the exact same thing into a local file and load it in a web browser, it doesn't work (one any major browser type).

What am I doing wrong? Is it the jquery? I believe all of the dependencies are loaded correctly. Is it the script at the end?


    <script src="https://terminal.jcubic.pl/js/jquery.terminal-0.4.6.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css">
    <link rel="stylesheet" href="https://terminal.jcubic.pl/css/jquery.terminal.css">
    <script
            src="https://code.jquery.com/jquery-3.4.0.js"
            integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo="
            crossorigin="anonymous"></script>


<form class="ui form segment">
    <div class="field">
        <label>States</label>
        <select class="ui fluid search dropdown" multiple="" id="multi-select">
            <option value="">State</option>
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>
            <option value="CO">Colorado</option>
            <option value="CT">Connecticut</option>
            <option value="DE">Delaware</option>
            <option value="DC">District Of Columbia</option>
            <option value="FL">Florida</option>
            <option value="GA">Georgia</option>
            <option value="HI">Hawaii</option>
            <option value="ID">Idaho</option>
            <option value="IL">Illinois</option>
            <option value="IN">Indiana</option>
            <option value="IA">Iowa</option>
            <option value="KS">Kansas</option>
            <option value="KY">Kentucky</option>
            <option value="LA">Louisiana</option>
            <option value="ME">Maine</option>
            <option value="MD">Maryland</option>
            <option value="MA">Massachusetts</option>
            <option value="MI">Michigan</option>
            <option value="MN">Minnesota</option>
            <option value="MS">Mississippi</option>
            <option value="MO">Missouri</option>
            <option value="MT">Montana</option>
            <option value="NE">Nebraska</option>
            <option value="NV">Nevada</option>
            <option value="NH">New Hampshire</option>
            <option value="NJ">New Jersey</option>
            <option value="NM">New Mexico</option>
            <option value="NY">New York</option>
            <option value="NC">North Carolina</option>
            <option value="ND">North Dakota</option>
            <option value="OH">Ohio</option>
            <option value="OK">Oklahoma</option>
            <option value="OR">Oregon</option>
            <option value="PA">Pennsylvania</option>
            <option value="RI">Rhode Island</option>
            <option value="SC">South Carolina</option>
            <option value="SD">South Dakota</option>
            <option value="TN">Tennessee</option>
            <option value="TX">Texas</option>
            <option value="UT">Utah</option>
            <option value="VT">Vermont</option>
            <option value="VA">Virginia</option>
            <option value="WA">Washington</option>
            <option value="WV">West Virginia</option>
            <option value="WI">Wisconsin</option>
            <option value="WY">Wyoming</option>
        </select>
    </div>
    <div class="ui primary submit button">Submit</div>
    <p class="ui error message"></p>
</form>



    <script>
        $('#multi-select').dropdown();
    </script>

Open dev tools, then network tab, are there any resources that haven't loaded correctly there? — Alicia Sykes, Apr 27 '19 at 15:11
You need to provide more info. It's no good you just pasting a working JSFiddle and saying _"it doesn't work"_, **show us your code**, and **what you've tried so far** — Alicia Sykes, Apr 27 '19 at 15:22
That is exactly my code above. I'm guessing you don't want me to provide all variations of what I have tried so far, but I have included all of the info as to what I'm trying. — Symphony0084, Apr 27 '19 at 15:26

score 2 · Accepted Answer · answered Apr 27 '19 at 15:15

2

Sounds like your missing a library.

There are 4 scripts you need, based on that demo:

jquery.terminal-0.4.6.min.js, from here
jquery.terminal.css from here
semantic.js from here
semantic.min.css from here

Open up dev tools (F12 on Windows, Linux). Then click Network tab. Reload the page, and observe which files are failing to load.

answered Apr 27 '19 at 15:15

Alicia Sykes

5,997
7
36
64

This is what I am getting: jquery2.js:42 Uncaught TypeError: Cannot read property 'msie' of undefined at jquery2.js:42 at jquery2.js:77 (anonymous) @ jquery2.js:42 (anonymous) @ jquery2.js:77 semantic.js:22196 Uncaught SyntaxError: Unexpected end of input 12:77 Uncaught TypeError: $(...).dropdown is not a function at 12:77 (anonymous) @ 12:77 – Symphony0084 Apr 27 '19 at 15:24
Right, that is more useful... this is the type of thing you should have put in your question. Here is your solution: https://stackoverflow.com/questions/14923301/uncaught-typeerror-cannot-read-property-msie-of-undefined-jquery-tools – Alicia Sykes Apr 27 '19 at 15:26

Problem with Semantic UI Dropdown Box - Works in Jfiddle, but not locally

1 Answers1