How to use rails-ujs - 10 common examples

onDelete() {
      if (
        window.confirm(
          `Remove ${this.gameInLibrary.game.name} from your library?`
        )
      ) {
        // Post a delete request to the game purchase endpoint to delete the game.
        fetch(this.gameInLibrary.url, {
          method: 'DELETE',
          headers: {
            'X-CSRF-Token': Rails.csrfToken(),
            Accept: 'application/json'
          },
          credentials: 'same-origin'
        }).then(response => {
          if (response.ok) {
            // Emit a delete event to force the parent library component to
            // refresh.
            this.$emit('delete');
          }
        });
      }
    }
  },

/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb

import 'jquery'
window.$ = window.jQuery = require('jquery');

import 'bootstrap'

import Rails from 'rails-ujs';
Rails.start();
window.Rails = Rails;
import Turbolinks from 'turbolinks';
window.Turbolinks = Turbolinks;
Turbolinks.start();

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
const application = Application.start()
const context = require.context("./controllers", true, /\.js$/)
application.load(definitionsFromContext(context))

import * as ActiveStorage from "activestorage"
ActiveStorage.start()

// Does not process requires when imported like this
import '../packs/src/subscriptions'

// Polyfills.
import 'core-js/fn/array/from';
import 'whatwg-fetch';

// Set up rails-ujs.
import Rails from 'rails-ujs';
Rails.start();

// Scripts.
import 'javascripts/alert';
import 'javascripts/nav';
import 'javascripts/profile';

// Styles.
import 'bootstrap/dist/css/bootstrap';
import 'stylesheets/layout';
import 'stylesheets/nav';
import 'stylesheets/simple_captcha';

const Rails = require('rails-ujs');
Rails.start();

import Turbolinks from "turbolinks";
Turbolinks.start();

// import Filter from 'components/filter'

import WebpackerReact from 'webpacker-react'

import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css';
// import 'codemirror/theme/railscasts.css'
import 'codemirror/mode/htmlmixed/htmlmixed';

// WebpackerReact.setup({Filter})

import "./../src/application.css"

// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb

import Rails from "rails-ujs";
import Turbolinks from "turbolinks";
import ActionCable from "actioncable";
import "src/collaborative_editor/index";

window.App || (window.App = {});
window.App.cable = ActionCable.createConsumer();

Rails.start();
Turbolinks.start();

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import Rails from 'rails-ujs';
import Turbolinks from 'turbolinks';

Rails.start();
Turbolinks.start();

import 'bootstrap/dist/js/bootstrap';
import 'jquery';
import 'jquery/dist/jquery';
import 'jquery-ujs';
import 'jquery-ujs/src/rails';
import 'leaflet/dist/leaflet';
import 'leaflet-providers/leaflet-providers';
import 'leaflet-toolbar/dist/leaflet.toolbar';
import 'leaflet-distortableimage/dist/leaflet.distortableimage';
import 'leaflet-easybutton/src/easy-button';
import 'sparklines/source/sparkline';
import 'glfx-js/dist/glfx';
import 'webgl-distort/dist/webgl-distort';

// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb

import jQuery from "jquery/dist/jquery";

window.$ = jQuery;
window.jQuery = jQuery;

import Rails from "rails-ujs/lib/assets/compiled/rails-ujs.js";

window.Rails = Rails;
Rails.start();

import "popper.js/dist/popper";
import "bootstrap/dist/js/bootstrap";
import "startbootstrap-sb-admin/js/sb-admin";

import Vue from "vue/dist/vue.esm";
import Vuex from "vuex/dist/vuex.esm";
import BootstrapVue from "bootstrap-vue/dist/bootstrap-vue.esm";

Vue.use(Vuex);
Vue.use(BootstrapVue);

Vue.filter("to_json", function (value) {
  return JSON.stringify(value);
});

let platform_id = this.release.platform.id;
      let developer_ids = Array.from(this.release.developers, developer => developer.id);
      let publisher_ids = Array.from(this.release.publishers, publisher => publisher.id);
      fetch(this.submitPath, {
        method: this.create ? 'POST' : 'PUT',
        body: JSON.stringify({ release: {
          name: this.release.name,
          description: this.release.description,
          game_id: game_id,
          platform_id: platform_id,
          developer_ids: developer_ids,
          publisher_ids: publisher_ids
        }}),
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': Rails.csrfToken()
        },
        credentials: 'same-origin'
      }).then(function(response) {
        if (!response.ok) {
          throw Error(response.statusText);
        }
        return response;
      }).then(function(data) {
        Turbolinks.visit(data.url);
      }).catch(function(error) {
        console.log(error);
      });
    }
  }

validateRemote(event) {
    let input = event.target
    let formData = new FormData()
    formData.append('value', input.value)
    Rails.ajax({
      url: input.dataset.validateUrl,
      type: 'post',
      data: formData,
      success: (data) => {
        console.log(data)
        let field = input.closest('.form-field')
        let message = field.querySelector('.validate-message')

        if (data.valid) {
          field.classList.remove('invalid')
          field.classList.add('valid')
          if (message) {
            message.remove()
          }
        } else {
          field.classList.add('invalid')

visit(event) {
    event.preventDefault()
    Turbolinks.visit(this.element.action + '?' + Rails.serializeElement(this.element))
  }
}