Scribd
Cargar
20 vistas

Apoyo Lectura - Javascript y UJS

Este documento describe el uso de Javascript y UJS en Rails. UJS permite implementar funcionalidades como ajax automático, CSRF tokens, acciones no-GET en links, diálogos de confirmación y evitar doble click sin código adicional. La librería rails-ujs integra estas funcionalidades en Rails desde la versión 5.1. También presenta casos comunes de uso como evitar doble click, diálogos de confirmación, acciones no-GET y llamadas AJAX.

Cargado por

Orlando Soto
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
20 vistas

Apoyo Lectura - Javascript y UJS

Este documento describe el uso de Javascript y UJS en Rails. UJS permite implementar funcionalidades como ajax automático, CSRF tokens, acciones no-GET en links, diálogos de confirmación y evitar doble click sin código adicional. La librería rails-ujs integra estas funcionalidades en Rails desde la versión 5.1. También presenta casos comunes de uso como evitar doble click, diálogos de confirmación, acciones no-GET y llamadas AJAX.

Cargado por

Orlando Soto
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 39

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

También podría gustarte