[Anderson Paraibano]

Ao desenvolver aplicativos da web com Ruby on Rails, é comum encontrar a necessidade de atualizar partes específicas da página sem recarregar a página inteira. Isso é possível graças à combinação de tecnologias como JavaScript, jQuery, AJAX e a extensão .js.erb do Rails. Neste artigo, exploraremos como utilizar essas tecnologias para realizar atualizações dinâmicas em uma mesma rota, com diferentes ações.

O Ruby on Rails é um framework de desenvolvimento web que segue o padrão MVC (Model-View-Controller), tornando a criação de aplicativos da web mais rápida e eficiente. O Rails inclui suporte nativo para AJAX, que é uma técnica assíncrona de comunicação entre o navegador e o servidor, permitindo atualizações de conteúdo sem recarregar a página completa.

Ao utilizar AJAX com o Rails, podemos enviar requisições para o servidor e receber respostas em formato JavaScript. O Rails fornece uma sintaxe especial para renderizar essas respostas utilizando arquivos .js.erb. Esses arquivos combinam JavaScript com código Ruby embutido, permitindo que a resposta seja construída de forma dinâmica.

Para começar, é necessário adicionar a biblioteca jQuery ao seu projeto Rails. O jQuery simplifica a manipulação do DOM (Document Object Model) e facilita o uso de AJAX. Você pode adicionar o jQuery ao seu projeto através de uma CDN (Content Delivery Network) ou instalando-o localmente.

Após configurar o jQuery, podemos prosseguir criando a funcionalidade AJAX. Vamos supor que temos um botão que, quando clicado, deve realizar uma ação específica na mesma rota. Primeiro, devemos associar um evento de clique ao botão, utilizando o jQuery, para que ele execute uma função JavaScript quando clicado:

javascript
Copy code
$(‘#meu-botao’).click(function() {
// Lógica do AJAX aqui
});
Dentro da função, utilizaremos o método $.ajax para enviar uma requisição ao servidor. Podemos definir a URL, o método HTTP e outras opções da requisição, como parâmetros de dados. Neste exemplo, vamos assumir que queremos realizar uma requisição POST na mesma rota:

javascript
Copy code
$(‘#meu-botao’).click(function() {
$.ajax({
url: ‘<%= url_for(controller: “meu_controller”, action: “minha_acao”) %>’,
method: ‘POST’,
dataType: ‘script’
});
});
Observe que utilizamos uma tag <%= … %> para inserir código Ruby na URL. Essa tag será processada pelo Rails e substituída pelo valor correto durante a renderização da página.

Ao enviar a requisição para o servidor, estamos especificando que esperamos uma resposta em formato JavaScript (dataType: ‘script’). Isso indica que queremos utilizar um arquivo .js.erb para renderizar a resposta.

Agora, no controlador Rails, podemos definir a ação minha_acao para responder a essa requisição AJAX. Vamos supor que desejamos atualizar um elemento específico na página com uma mensagem de sucesso:

ruby
Copy code
class MeuController < ApplicationController
def minha_acao
# Lógica da ação aqui

respond_to do |format|
format.js
end
end
end
Neste exemplo, estamos utilizando o método respond_to para indicar que queremos responder a uma requisição AJAX. Ao chamar format.js, o Rails irá procurar por um arquivo .js.erb correspondente ao nome da ação. No caso, seria minha_acao.js.erb.

Agora podemos criar o arquivo minha_acao.js.erb na pasta views/meu_controller e escrever o código JavaScript necessário para atualizar o elemento na página:

javascript
Copy code
$(‘#meu-elemento’).text(‘Atualização dinâmica realizada com sucesso!’);
Nesse exemplo simples, estamos apenas atualizando o texto de um elemento com o ID meu-elemento. No entanto, você pode executar qualquer código JavaScript válido nesse arquivo .js.erb, possibilitando atualizações mais complexas na página.

Em resumo, ao combinar Ruby on Rails, AJAX, jQuery e arquivos .js.erb, é possível realizar atualizações dinâmicas em uma mesma rota, com diferentes ações. O Rails fornece uma estrutura eficiente para lidar com requisições assíncronas e facilita a renderização dinâmica das respostas usando arquivos .js.erb. Essa combinação de tecnologias é uma ferramenta poderosa para criar aplicativos web interativos e responsivos.

[Autor]

Posts