Fomantic UI: $(...).calendar is not a function

Question

I'm running Rails version 5.2.4 Here is the relevant part of my view in Ruby on Rails

      <div class="two fields">

            <div class="field">
                <label>Start date and time</label>
                <div class="ui calendar" id="standard_calendar">
                    <div class="ui input left icon">
                        <i class="calendar icon"></i>
                        <input type="text" placeholder="Date/Time">
                    </div>
                </div>
            </div>

            <div class="field">
            <label>End time</label>
                <div class="ui calendar" id="time_calendar">
                    <div class="ui input left icon">
                        <i class="time icon"></i>
                        <input type="text" placeholder="Time">
                    </div>
                </div>
            </div>
        </div>

I placed the following code below my view

<script>
console.log("Before scripts run")
$('#standard_calendar').calendar();
$('#time_calendar').calendar({type: 'time'});
console.log("After scripts run")
</script>

To make sure the code ran, I put a console.log and it worked fine. However when I try to run the two jquery scripts, it stops at the first and says,

$(...).calendar is not a function

I've installed the gem, 'fomantic-ui-sass' and 'jquery-rails', both of which are working (at least the css for fomantic is). I've added them to the application.js folder as well which looks like this:

//
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
// Loads all Semantic javascripts
//= require semantic-ui
// Load jquery
// = require jquery
// = require jquery_ujs

My app/views/layouts/application.html.erb


<!DOCTYPE html>
<html>
  <head>
    <%= favicon_link_tag 'spring-cleaners-logos/profile.png' %>
    <title>Spring Cleaners - <%= yield(:title) %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <div class="ui secondary  menu">
      <a class="item" href="/">
        <%= image_tag 'spring-cleaners-logos/profile.png', alt: 'Logo', class: 'image' %>
        Spring Cleaners
      </a>
      <div class="right menu">
        <a class="item">
          <i class="envelope icon"></i>
          Messages
        </a>
        <a class="item">
          <i class="user icon"></i>
          My Account
        </a>
        <a class="ui item" href="/logout">
          Logout
        </a>
      </div>
    </div>

    <h1><%= yield(:title) %><h1>

    <%= yield %>

  </body>
</html>

Why isn't it working? How do I fix?

What Rails version are you running? I'm not familiar yet with the new system of Rails 6, but for Rails 5 and below you also have to add them to your `application.js` as specified by the readme of those gems. Have you done this? See [jquery-rails readme](https://github.com/rails/jquery-rails#installation) and [fomantic-ui-sass readme](https://github.com/fomantic/Fomantic-UI-SASS#javascripts) — 3limin4t0r, Apr 13 '20 at 20:20
Could you add your `app/views/layouts/application.html.erb` (or `.haml`)? I don't need to know everything that's in there, only where you `yield` and when you load `application.js` (`javascript_include_tag "application"`). — 3limin4t0r, Apr 13 '20 at 20:30
Hmm, not what I thought. My guess was that you've placed `javascript_include_tag 'application'` at the bottom of the body (which is not uncommon). In which case the view loads before the the `application.js` is loaded, thus resulting in you prematurely using methods. Seems like this shouldn't be the case since you've place it in the ``. — 3limin4t0r, Apr 13 '20 at 20:43
I see two potential other issues. 1) Your jQuery is loaded using `// =` (notice the space between `//` and `=`). I'm not sure if this allowed. The [guide specifically states to use `//=`](https://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives) 2) If fomantic depends on jQuery you might want to load it after jQuery is loaded. Moving the line `//= require semantic-ui` below `//= require jquery_ujs` should fix this. Does any of these two resolve the issue? — 3limin4t0r, Apr 13 '20 at 20:55

3limin4t0r · Accepted Answer · 2020-04-13T21:13:00.373

There are two potential issues with your application.js.

The following lines use // = (notice the space) instead of //=. The Rails guide The Asset Pipeline - 2.4 Manifest Files and Directives specifically states to use //=.
```
// = require jquery
// = require jquery_ujs
```
If Fomantic-UI depends on jQuery to be present you should require it after loading jQuery. Otherwise it tries to register itself as jQuery extension or use jQuery methods without jQuery being loaded.

This means moving:
```
// Loads all Semantic javascripts
//= require semantic-ui
```
Below:
```
// Load jquery
//= require jquery
//= require jquery_ujs
```

Fomantic UI: $(...).calendar is not a function

1 Answers1

Linked

Related