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 = data.page
  
  for method in ['hide', 'show', 'remove']
    $(options[method])[method]()

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

Related posts

Hiding state, simplifying modal dialogs usages

Render props is a very powerful technique in React, here it’s applied to Modal Dialogs to simplify their usage. There’re examples with react-modal.

Problems with my laptop HP Envy 15t-as100

My laptop died suddenly after 19 months, I tried to fix it. This is the story.

Jekyll: Re-designing my personal blog.

Finally! I updated the blog. I talk about the entire process here.