Javascript y UJS _

Trabajando con Javascript en Rails

 Conceptos

UJS es una técnica en la cual no se mezcla el código javascript con HTML, esto quiere decir que no
existe código inline, como por ejemplo onclick.
 rails-ujs

La librería rails-ujs nos permite implementar funcionalidades sin necesidad de escribir código extra:

● Ajax automático en formularios.

● Agregar tags CSRF en requests del tipo AJAX.
● Acciones que no son del tipo GET en links.
● Diálogos de confirmación.
● Evitar doble click en botones submit.
 rails-ujs

Originalmente fue escrita sobre jQuery bajo el nombre de jquery-ujs. Tiempo después se quitó la
dependencia de jQuery para ser integrada a Rails desde la versión 5.1 en adelante.
 Casos de usos más comunes

Con rails-ujs podemos implementar 1. Evitar doble click

funcionalidades de manera simple: 2. Diálogos de confirmación
3. Acciones que no son del tipo GET en links
4. Llamadas AJAX en links
 Evitar doble click

¿Cómo? Resultado

Tan simple como agregar el atributo El atributo data-disable="true" deshabilitará el

data-disable botón después del primer click e ignorará todos
los click siguientes.
 Evitar doble click

<%= submit_tag "Create Product", data: { disable: true } %>

<input type="submit" value="Create Product" data-disable="true">

 Evitar doble click

cambiar el texto después de hacer click

<%= submit_tag "Create Product", data: { disable_with: "Creating product..." } %>

Evitar doble click
 Diálogos de confirmación

¿Cómo? Resultado

Tan simple como agregar el atributo El atributo data-confirm="TEXT" genera un

data-confirm diálogo de confirmación
 Diálogos de confirmación

<%= submit_tag "Create Product", data: { confirm: "Do you want to create the
product?" } %>

<input type="submit" value="Create Product" data-confirm="Do you want to create the

product?">
Diálogos de confirmación
 Acciones que no son del tipo GET en links

¿Cómo? Resultado

Tan simple como agregar el atributo Un enlace puede ejecutar acciones del tipo
data-method DELETE por ejemplo.
 Acciones que no son del tipo GET en links

<%= link_to "Delete product", product_path(product), data: { method: "delete" } %>

<a href="/products/1" data-method="delete">Delete product</a>

 Acciones que no son del tipo GET en links

¿Cómo funciona? Paso 1 ¿Cómo funciona? Paso 2

Enlaza el evento click en los elementos del tipo Cuando un link es clickeado, la acción por
<a></a> que tienen el atributo data-method defecto es interrumpida y rails-ujs crea por un
formulario.
 Llamadas AJAX en links

¿Cómo? Resultado

Tan simple como agregar el atributo rails-ujs inicia una petición AJAX y se disparan
data-remote una serie de eventos.
 Llamadas AJAX en links

<%= link_to "Delete Product", product_path(product), data: { method: "delete",

remote: true } %>

<a href="/products/1" data-method="delete" data-remote="true">Delete Product</a>

 Eventos UJS

● ajax:before ● ajax:success
● ajax:beforeSend ● ajax:error
● ajax:send ● ajax:complete
● ajax:stopped
Aplicaciones avanzadas con
Javascript
 Infinite scroll

Consiste básicamente en detectar cuando se ha llegado al límite inferior de la página o sección y

luego hacer una llamada AJAX
 Infinite scroll

Lógica en controlador: include HTTParty

class WelcomeController < ApplicationController
def index
@content = HTTParty.get('https://loripsum.net/api')
respond_to do |format|
format.html
format.js
end
end
end
 Infinite scroll

Definición de rutas: root "welcome#index"

resources :products
 Infinite scroll

Vista: <!-- app/views/welcome/index.html.erb -->

<h1>Lorem Ipsum Content</h1>

<div class="content">
<%= raw @content %>
</div>
 Infinite scroll

Código Javascript: // app/assets/javascript/welcome.js

document.addEventListener('scroll', function (event) {

if (document.documentElement.scrollHeight ==
document.documentElement.scrollTop +
window.innerHeight) {
loadNextData();
}
});
 Infinite scroll

Código Javascript: // app/assets/javascript/welcome.js

function loadNextData(){
Rails.ajax({
url: "/",
type: "get",
data: "format=js",
success: function(data) {},
error: function(data) {}
})
}
 Infinite scroll

Vista js.erb: // app/views/welcome/index.js.erb

document.querySelector('.content').innerHTML += "<%= j
@content %>"
Infinite scroll
 Restricción de tiempo en formularios

Transcurrido cierto periodo de tiempo ya no se pueda completar un formulario debido a que uno de
los inputs, por ejemplo, corresponde a un token que tiene tiempo de expiración.
 Turbolinks

Sirve para mejorar el performance de la navegación y facilitar el trabajo con los renders desde una
aplicación Rails.
 Turbolinks

turbolinks:load se dispara cuando toda la página esté cargada

document.addEventListener("turbolinks:load", function() {
// do something
})
 Restricción de tiempo en formularios

document.addEventListener("turbolinks:load", function() {
const timeout = 10000;
setTimeout(function(){
// do somethig
}, timeout)
})
 Restricción de tiempo en formularios

obtener la lista de elementos que están dentro del formulario

let inputs = Rails.$("form input, form textarea")

 Restricción de tiempo en formularios

document.addEventListener("turbolinks:load", function() {
const timeout = 10000;//milliseconds
setTimeout(function(){
//disable all inputs
let inputs = Rails.$("form input, form textarea");
inputs.forEach(input => {input.disabled = true})
}, timeout);
})
Restricción de tiempo en formularios
 Restricción de tiempo en formularios

Agregar elementos en el HTML para mostrar el contador

<div class="field">
<span id="message">Form will lock in </span>
<span id="minutes"></span>:<span id="seconds"></span>
</div>
 Restricción de tiempo en formularios
function displayTimer(miliseconds) {
let end = seconds / 1000;
let min = Rails.$("#minutes")[0];
let sec = Rails.$("#seconds")[0];

if (end > 0) {
let ticker = setInterval(function(){
end--;
if (end <= 0) { clearInterval(ticker); }

let secs = end;

let mins = Math.floor(secs / 60); // 1 min = 60 secs
secs -= mins * 60;

min.innerHTML = ("00" + mins).slice(-2);

sec.innerHTML = ("00" + secs).slice(-2);
}, 1000);
}
}
 Restricción de tiempo en formularios
document.addEventListener("turbolinks:load", function() {
const timeout = 90000;//milliseconds

displayTimer(timeout); //calling timer

setTimeout(function(){
//disable all inputs
let inputs = Rails.$("form input, form textarea");
inputs.forEach(input => {input.disabled = true});
}, timeout);
})
Restricción de tiempo en formularios