Ariel Rodriguez Romero

Improve rails remote requests

When using Rails, it’s extremely convenient to use :remote requests. You can make any link or form to submit an ajax request with some data, out of the box, just adding a parameter to the link_to helper or other of the form elements.

<%= link_to 'Delete', delete_path, remote: true %>

or with some form element:

<%= form_tag delete_path, remote: true, method: :post do ... end %>

All this is very good, but most of the time you need to make modifications to the page after the request is completed successfully. These changes can be applied by listening to the event ajax:success on the link or form elements marked as remote; however if the changes are simple, like removing, adding a class or replacing the content of an element, it’s better if they are sent from the server using some convention.

An option would be to encode all these calls into the JSON response, for example if you wanted to hide the elements marked with the class .js-hide then the response could be something like:

	"page": {
		"hide": ".js-hide"

and to replace the HTML of an element marked with the class .js-foo we could use:

	"page": {
		"html": {
			".js-foo": "<h1>New content here</h1>"

But this isn’t all, we have to add some code on the client side to process these responses upon successful requests.

$document.on 'ajax:success', '[data-remote="true"]', (e, data)->
  # get the object with the instructions
  options =
  for method in ['hide', 'show', 'remove']

  for method in ['html', 'append']
    if options[method]
      $.each options[method], (element, content)->

Related posts

Deploying a serverless NextJS App

We migrated to NextJS recently and started using ZEIT to deploy our frontend. We required some configuration and even found a bug on ZEIT’s platform in the process.

Set up end-to-end tests with jest-pupeteer and NextJS

This contains details and the configuration files required to setup jest-pupeteer for end-to-end testing in a NextJS app.

Get route information from Google Flights

Simple strategy to scrape information from google flights (with manual work). It’s helpful if you don’t need a lot of information.