Agrega la dependencia en app/assets/javascripts/application.js:
1
//= require rails-ujs
2
//= require turbolinks
3
//= require jquery
4
//= require_tree .
Copied!
CoffeeScript
Por defecto Ruby on Rails utiliza CoffeeScript, un lenguaje que Rails convierte automáticamente a JavaScript.
Cada vez que creas un controlador se crea un archivo en app/assets/javascripts con el nombre del controlador y la extensión .coffee.
Si quieres utilizar JavaScript puedes cambiar la extensión del archivo a .js.
Para deshabilitar CoffeeScript por completo simplemente remueve la gema coffee-rails del Gemfile.
CoffeeScript es un lenguaje muy interesante que está por fuera del alcance del curso pero que puedes investigar por tu propia cuenta iniciando por la página oficial.
Uso
Existen varias partes donde puedes escribir tu código JavaScript en Ruby on Rails: al final de cada vista, en el archivo .js de cada controlador o utilizando vistas de JavaScript.
Al final de cada vista
La forma más fácil de utilizar jQuery en tu aplicación es incluir el código JavaScript al final de cada vista. Por ejemplo:
1
<buttonclass="show-btn">Mostrar alerta</button>
2
3
<script>
4
$('.show-btn').on('click',function(){
5
alert("Esta es una prueba");
6
});
7
</script>
Copied!
Sin embargo, esta forma no es muy recomendada porque estamos mezclando el código HTML y ERB con el código JavaScript.
En el archivo .js
La forma en que recomendamos incluir el código JavaScript de tu aplicación es en el archivo .js que se crea para cada controlador.
Sin embargo, es importante entender lo siguiente: Ruby on Rails empaqueta todos los archivos .js en un solo archivo y ese archivo solo se carga la primera vez que el usuario entra a la aplicación, lo que presenta varios retos a la hora de escribir tu código JavaScript.
Lo que recomendamos es crear una función constructora en el archivo .js e invocarla desde la vista en la que lo necesitas.
Por ejemplo, imagina que tenemos un controlador ProductsController y necesitamos ubicar un código en la vista index.html.
Primero, en el archivo .js crearíamos una función constructora llamada ProductsView:
1
functionProductsView(){
2
$('.show-btn').on('click',function(){
3
alert("Esto es una prueba");
4
});
5
}
Copied!
Y en la vista la invocaríamos de la siguiente forma:
1
<buttonclass="show-btn">Mostrar alerta</button>
2
3
<script>
4
newProductsView();
5
</script>
Copied!
De esa forma sólo se ejecuta el código JavaScript necesario en la vista y no debemos preocuparnos por esperar a que el DOM esté cargado.
Vistas de JavaScript
Rails hace muy fácil hacer llamados AJAX a tu aplicación y actualizar la página sin necesidad de refrescarla utilizando vistas de JavaScript.
Puedes agregarle remote: true a cualquier link_to, button, form_for o form_tag para indicarle a Rails que esto debe ser un llamado AJAX. Por ejemplo:
Por ejemplo, como en el link anterior estamos llamando products_path, es decir, el index de ProductsControllers, crearíamos una vista app/views/products/index.js.erb con contenido JavaScript:
1
alert("Hola Mundo!");
2
3
// borremos todos los párrafos
4
$('p').remove();
Copied!
En este post de Make it Real aprenderás a utilizar esta técnica para mostrar formularios dentro de modales de Bootstrap.