Working with JavaScript in Rails

• UJS (Unobtrusive JavaScript): 主要的两个原则
  • HTML JS 分离 (separation of functionality (the behavior layer) from a Web page's structure/content and presentation)
  • 锦上添花，没JS也能用 (progressive enhancement to support user agents that may not support certain JavaScript functionality and users that have disabled JavaScript)
• Rails内嵌JS
  • 通过 data-* 属性关联
  • local: false | remote: true -> data-remote='true'
  • data-url , data-params, data-method, data-type
  • data: {confirm: "Are your sure?"} -> data-confirm
  • data: {disable_with: "Saving..."} -> data-disable-with

• Rails-ujs event handlers

  • Rails 5.1 introduced rails-ujs and dropped jQuery as a dependency.
  • Unlike the version with jQuery, all custom events return only one parameter: event. In this parameter, there is an additional attribute detail which contains an array of extra parameters.

  document.body.addEventListener("ajax:success", (event) => {
    const [data, status, xhr] = event.detail;
  });
  

  • Event list:

  Event name	Extra parameters (event.detail)	Fired
  ajax:before		Before the whole ajax business.
  ajax:beforeSend	[xhr, options]	Before the request is sent.
  ajax:send	[xhr]	When the request is sent.
  ajax:stopped		When the request is stopped.
  ajax:success	[response, status, xhr]	After completion, if the response was a success.
  ajax:error	[response, status, xhr]	After completion, if the response was an error.
  ajax:complete	[xhr, status]	After the request has been completed, no matter the outcome.

  • You can stop execution of the Ajax request by running event.preventDefault() from the handlers methods ajax:before or ajax:beforeSend.Note, you should use return false to prevent an event for jquery-ujs and event.preventDefault() for rails-ujs.
  • Turbolinks: Turbolinks attaches a click handler to all tags on the page. Turbolinks will make an Ajax request for the page, parse the response, and replace the entire of the page with the of the response.
  • If you want to disable Turbolinks for certain links, add a data-turbolinks=false attribute to the tag

  <a href="..." data-turbolinks="false">No turbolinks here</a>.
  

  • Page change events: load -> turbolinks:load

  document.addEventListener("turbolinks:load", () => {
    alert("page has loaded!");
  });
  

• Server side

  • return JSON
    1. format.json
    2. JS generate HTML based on JSON data
  • return HTML
    1. format.js
    2. return HTML directly

      // foo.js.erb
      var users = document.querySelector("#users");
      users.insertAdjacentHTML("beforeend", "<%= j render(@user) %>");
  

How to Use AJAX With Ruby on Rails

• Client make a AJAX request

  // JS style
  $.get( "/vegetables", function(data) {
    alert("Vegetables are good for you!");
  });
  // Rails style
  Rails.ajax({
    url: "/books",
    type: "get",
    data: "",
    success: function(data) {},
    error: function(data) {}
  })

• Server side

  • Solutions
    1. Solution 1: SJR (Server-Generated Javascript). Use js.erb to generate HTML, nothing to do in client.
    2. Solution 2: use JSON but the response is the new HTML to use.
    3. Solution 3: user JSON to return data only. Javascript update HTML using that data. e.g. React. (Rails负责生成数据，Client生成HTML)
  • Solution 1

  // Javascript view example:
  Rails.$('.random-number')[0].innerHTML = ("<%= j (render partial: 'random') %>")
  // jQuery example:
  $('.random-number').html("<%= j (render partial: 'random') %>")
  //  `j` is an alias for `escape_javascript`
  

  • Solution 2

  # controller
  render json: { html: render_to_string(partial: 'random') }
  # client JS
  Rails.ajax({
    url: "/books",
    type: "get",
    success: function(data) { Rails.$(".random-number")[0].innerHTML = data.html; }
  })
  

  Others

• Rails - display results of index and show actions via ajax

• Traditional way of performing AJAX operation in Rails

• Ajax Call for load more button in Rails

• Hide Load More buttons when all items have been rendered in Ruby on Rails