How to include an external JavaScript file in Haml

Question

I want to add styles and functions dynamically using an external JavaScript and jQuery file, but it is constantly throwing an error.

The Ruby code is:

# myapp.rb
require 'sinatra'
require 'sinatra/reloader'
require 'haml'

get '/' do
    @contacts = [
        {
            name: "Petit",
            class: "K1"
        }
    ]

    haml :index
end

get '/about-us' do
    haml :about
end

The Haml code is:

!!!
%html
    %head
        = javascript_include_tag "actions"

    %body
        %h1#title.titles
            This is a page title

        %ul
            - @contacts.each do |contact|
                %li
                    = "#{contact[:name]}'s class is #{contact[:class]}"

        %a{ href: "/about-us"}
            About

This line seems to be the problem:

= javascript_include_tag "actions"

The error is when I run the application in the browser:

NoMethodError at /
undefined method `javascript_include_tag' for #<Sinatra::Application:"some hex address here">

Without that line of code it runs fine, and the embedded JavaScript works too. I haven't been able to link an external JavaScript file.

Answer 1

When your directory looks like this:

ruby-web/
| public/
|-| css/
|-|-| styles.css
|
|-| javascript/
|-|-| jquery-3.5.1.min.js
|-|-| actions.js
|
| views/
|-| index.haml
|-| about.haml
| my-app.rb

and your Ruby code looks like this:

# myapp.rb
require 'sinatra'
require 'sinatra/reloader'
require 'haml'

get '/' do
    haml :index
end

get '/about-us' do
    haml :about
end

Your index.haml is going to be the root page which is going to be displayed when you connect to the server, so your index.haml code should look like this:

!!!
%html
    %head
        /Styles :
        %link{:href => "css/styles.css", :type => "text/css"}
        /Scripts :
        %script{:src => "javascript/jquery-3.5.1.min.js", :type => "text/javascript"}
        %script{:src => "javascript/actions.js", :type => "text/javascript"}

    %body
        %h1#title
            Equations

        %div#about
            %footer#footer
                %a{ href: "/about-us"}
                    About

Notice the %link and %script tags in the Haml code, and look at the paths given in :src and :href.

It is:

:src => "javascript/actions.js"

and

:href => "css/styles.css" 

Not:

:src => "public/javascript/actions.js"

and

:href => "public/css/styles.css"

even though the script and styles are in the public folder.

Nor:

:src => "../public/javascript/actions.js" 

and

:href => "../public/css/styles.css"

even though the script and styles are in ../public/javascript/ or ../public/css/ relative to index.haml.

Now that you have a public folder containing the script and styles, you can link to them with the method mentioned above.