Rails 7 esbuild - how to manage global javascript functions?

Question

My goal is to create global functions that I can use throughout my application. I found this answer but couldn't really apply it. The most basic gist of what I am wanting to do is:

# app/javascript/application.js
  // define global function, but don't run it
  function removeFlash(){
    // do stuff
  }

# app/views/.../update.js.slim
|
  // do stuff
  // use the global function after other code is ran
  removeFlash()

I have a rails 7 esbuild created by doing rails new testapp -j esbuild -d postgresql --css bootstrap

I then added a few modules such as jquery and flatpickr via yarn install. My application.js file looks like:

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"
import './vendors/jquery'
import {} from 'jquery-ujs'
import flatpickr from "flatpickr"

$(document).ready(function(){
  console.log('hooray')
})

Within the application.js file I want to define a number of global functions so I can call them whenever needed throughout other files rather than repeating the same code over and over.

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"
import './vendors/jquery'
import {} from 'jquery-ujs'
import flatpickr from "flatpickr"

function addFlash(msg){
  // do stuff
}

function removeFlash(){
  // do stuff
}

function performTask(){
  // do stuff
}

Since my forms are all remote and happen via js, I have multiple files that will need to run that those functions, such as:

# app/views/objects/create.js.slim
- if @obj.errors.any?
  ...
- else
  |
    $("#obj-list").append("#{escape_javascript(render 'obj_row', obj: @obj)}");
    $(".close-modal").click();
    addFlash("Object successfully created.");
    removeFlash();

And this would be duplicated for the update as well as other records.

Apart from just adding a javascript: tag to the bottom of the app/views/layouts/application.html.slim file and declaring all the functions there, I don't understand what the best practice is for handling the above situations.

# app/views/layouts/application.html.slim
doctype html
html
  head
    title TestApp
    ...
  body
    = yield

javascript:
  function addFlash(msg){
    // do stuff
  }
  ...

What is the best way or standard practice to create and use global functions?

Dāvis Namsons · Accepted Answer · 2022-11-13 22:04:56Z

4

A better alternative to the javascript: tag in the views would be to put the function in the window object, like this:

// app/javascript/application.js
  window.removeFlash = function() {
    // ...
  }

Then everywhere you use it, you have to call it as window.removeFlash().

answered Nov 13, 2022 at 22:04

Dāvis Namsons

1661 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thomas Over a year ago

This works, but surely there must be a better way. You should be able to declare javascript inside of your application.js and it should be accessible throughout the project. Why is it that we have to assign this to the window in order to access it?

Collectives™ on Stack Overflow

Rails 7 esbuild - how to manage global javascript functions?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related