Updating Multiple Fields with Ajax

A few months ago I was working out how to deal with multiple database entries at the same time.  We were using a CSV file to import clients.  Each client could have multiple account numbers.  For each account number, there would be an additional line with all the same info, except for the account number.

In other words, after uploading, there would be multiple clients with the same info but each with different account numbers.  I created another view to merge these clients into one client, but I needed a way to update each client without an http request for each one.

This app is a very simple mockup of how to update multiple objects in your database from a single view.  It uses jquery and ajax to send a request to the database each time you change a value in the select box.  Change the select box values, then click on the “All Users” link to see the changes.

In order to get the ajax to work with strong params, I had to use params.fetch in the update action in the controller

The code is on github here.

Atom Text Snippets

Text editors are powerful tools to increase your efficiency.  I’ve finally gotten around to learning about customizing Atom’s text snippets, and I have a few tips to share here.

In all the time I’ve been learning to code, I have tried to avoid optimizing my text editor or even learning too much about its functionality.  I believe in muscle memory.  Typing code, over and over, helps me to internalize the syntax and structure of a programming language.  This is not entirely scientific on my part, but I come from a background of first learning to play guitar, and then practicing martial arts for many years.  Both of these disciplines require hours of repetition, day after day.

When I started learning to code, I found that Zed Shaw’s Learn Ruby the Hard Way gave me the most bang for my buck (yes, I know it’s free) because he requires you to type out the code, and then reread it, instead of just reading about the concepts.

But at some point, learning becomes doing, and now I find myself getting paid to reskin an app.  This requires entering the same code in multiple places across many files.  Providing value to my client requires speed.

Ag is a useful tool for finding the code I want to change (if you aren’t using it, stop reading this and start reading this).  But knowing is only half the battle.  I also have to go into each file, delete the old code, and type in the new.

Snippets allow you to type a short abbreviation, and expand that to whatever you want.  As an example, I have the following code in my snippets.cson file:

example-snippet

This allows me to open a new file, save it as an html file, and then type ‘html5sk’ and hit enter.  An tabbed-in html page appears in a puff of smoke!

The atom/snippets page really has all the information you’ll need to get things set up, and there are several tutorials out there as well.  But setup can be a little finicky.  One of the most useful bits of information is figuring out what context your snippets need – especially with Rails.  I struggled with this for a while, because ‘.text.html’ seems to work in some cases but not others, ‘.text.erb’ works in a different set of cases, and so on.

The easy way to determine this is to open a file that you want to use a snippet in.  Then hit ctrl-shift-p.  A box will open up at the top.  Type “Editor: Log” and you’ll see “Editor: Log Cursor Scope”.  Click on that or hit enter if it’s highlighted, and you’ll see the scope for that file.

Also, don’t forget to put a dot before the scope in your cson file, eg ‘.text.html.ruby’.

With a little experimentation you should be well on your way!

Meteor and Rails Compared

I’ve started playing with Meteor.  I’ve done several tutorials for it in the past, and even went to Meteor SpaceCamp in 2015, but now I am actually building things.

I’ve been contributing to the new CodeBuddies website (original here, kudos to Linda for building the site and the community!) and I’m building a workout log for myself (mainly as a learning experience).

Meteor is something like Rails:  a way to get started fast and have a working web app with minimum code.  It’s more opinionated:  currently it uses Mongo as the database straight out of the box.  It also has less convention than rails:

  • There is no accepted folder structure (although there are some basic rules that can help you organize your own code).
  • ActiveRecord is a great help in setting up associations – Mongo is much more free form
  • Mongo has no set schema – items in the same collection (aka”table” in SQL) can have different fields from each other
  • There are no form helpers – everything is javascript and html, and you have to write all events and helpers yourself

There are also some changes to look forward to, or maybe dread if you’ve done a lot of development with Meteor already.

HAML and Rails View Helpers

I hit another little snag last night with HAML.  Take a look at this page:

formYou can see that the bootstrap formatting on the second form input is wrong and the page is rendering a default html form.  The first form is working right.  Here’s the HAML:

form code

The correct code is on lines 8 and 9.  The incorrect code is on lines 11 and 12. This is something that is obvious once you understand it, but not so obvious at first.  With HAML, you can create a class for a div by typing

.className

So it seems like if you want to create a text box input, you could just type

.form-control

But what this actually does is create a div with the class “form-control”:

incorrect html

The input is created without a class within that div. Thus, a plain html input box.

form_for, .label,  and other rails view helpers are Ruby code that generate HTML. So you have to prefix them like so, with the class declaration within the attributes hash:

=f.text_field :first_name, class: "form-control"

Like I said, obvious once you understand it. But it took me a while to figure out.

Building an Index Page with HAML

HAML is a simple templating language for Ruby. I finally decided to pick it up today.

I started with one of the simplest views in my rails app, an index page that lists all employees. Here’s the original code, in erb:

erb index

And here’s what I came up with in Haml:

haml

The thing to notice here is that I had to create new divs for each bit of Ruby code.

 .row
 .col-md-3= e.full_name link_to "Edit", edit_employee_path(e) link_to "Delete", e, method: :delete

just won’t work in HAML. Which is fine, but it took me a little while to figure it out. Most of the tutorials I found didn’t really explain this, and the reference didn’t have any examples of how to put multiple lines of Ruby into a div either. Turns out it’s because you can’t, apparently.

Overall I’m finding HAML to be really nice.  It’s simple, quick to pick up (20 minutes for the basics, seriously), and cuts down on typing quite a bit.

Problem Solving Rails and React

I’ve decided to add React to a Rails app I built.  Right now I am trying to create a select box in a form.  The form creates new Transactions.  Each Transaction belongs_to one Program and one Account.

Currently I have the Transactions showing up, along with a form and delete actions.  But I am having some trouble.

The first bit of trouble is that I’m using CoffeeScript, which is new to me.  React uses JSX and vanilla JavaScript.  So translating to CoffeScript is confusing, although not impossible.

The next layer of trouble is how to create a select box in React.  React has no form_for or options_for_select helpers.   I have figured out how to create a select box, but I need it to be populated by the database table Programs.

The third layer of difficulty is how to deal with associations.  I can’t type Transaction.program.name in the view like I can in Rails, and I can’t use a raw SQL query in the JavaScript.

To help wrap my head around the problem, I decided to follow Justin Weiss’s fabulous advice, and build a mini-app.  This simplified the problem for me, by taking it down to the simplest level that I was having trouble with – how to access associations in a rails app, using React.  Thanks to this excellent tutorial, and with a bit of muddling around, I’ve figured out how to access associations.  Now I have to figure out how to put this into a select box with coffeescript.

Angular and Rails

This is a list of resources for building Angular frontends with a Rails Backend.

I’m hoping to do a hangout on codebuddies.org sometime in the next couple weeks to work through one of these tutorials.

I’m also interested in using React with Rails, so I’m bookmarking a few tutorials for that here as well:

Submit Button Only Working on Page Refresh

I had an interesting problem today.  A submit button in a form wasn’t working – unless I reloaded the page.  I spent some time researching and found a few answers – for one person they hadn’t closed a tag properly. Someone else suggested it had something to do with turbolinks.  Another answer said that the submit button needed to be nested within the form. Here was the original code:

submit button not workingI checked the page source, and indeed, the submit button was within the form tags.

As it turns out, the div has an effect. The submit button is within a separate div, within the form tags.  When I changed the code to what’s below, it started working.

submit button working