Skip to main content

How to pass a Rails or Sinatra variable into JQuery.

A few days back I got a code challenge for a cool job position. For whatever reason the test was very light on Rails very heavy on JQuery, which I didn't know much about frankly. So in less than 24 hours I had to not only learn enough of it but also make it work into a modal window widget. I got it done, but it wasn't elegant at all. I clobbered it even if it worked.

The first challenge was to get information into webpage from a Rails application, I chose JSON and thought it'd be easy-peasy, but transferring a JSON object is a cross-domain script violation and most browsers won't let it pass. So I learned about JSONp which wraps the JSON object in a JQuery call-back. Lacking the easy Ruby ways of determining what things are, at first I'd no idea what the JSONP object was and just had my Rails app send JSON. Once I figured what it was, it was trivial to get Rails to do it. All I had to do was add: :callback => params[:callback] to the format property in the controller action. A JSONP basically sends a JS object to the server, and then gets it back with your nifty little JSON object inside of it. Because it's the object you sent that comes back, it provides some security as it's not just any input that can come on in.

The real challenge was in learning JQuery which is has a completely different documentation from Ruby and one that's less readable, I think. I wrote it in CoffeeScript which I prefer, but that is no shortcut for learning the JQuery functions. On key thing to know, that doesn't seem obvious at all is that an Object's properties can't call a function, they can *be* a function that calls a function, but not call a function. So open : myfunc() doesn't work but open : -> myfunc() works perfectly fine.

So after (why is it always after) I submitted the code challenge, I found out that there is a JQuery UI that has a very pretty way of doing what I was trying to do. But now with my new found JQuery and Javascript know-how I was able to put it to go work and redid the widget using JQuery UI.

But, I wanted to make it better. I wanted the Sinatra Application hosting the JQuery widget to intelligently pass the url to the JQuery widget. And that's not as simple as it sounds, but it turns out there is a great gem that does exactly that and it's called gon and gon-sinatra.

For the Sinatra app all I needed was two lines:

require 'gon-sinatra' 
Sinatra::register Gon::Sinatra
and now I can set an instance variable to a gon method and then access it as a gon property on the JavaScript side.

Sinatra or erb view:
  gon.jsonp_url = @jsonp_url
    url: gon.jsonp_url

And voilá, now I can set the URL to get the JSON from different websites, maybe localhost in development and somewhere else in production. I'll put the code for the revised widget up on github soon.


Popular posts from this blog

How to configure Ubuntu's keyboard to work like a Mac's

Typing accents on a PC is a complicated Alt + three numbered code affair. One feels like a sorcerer casting a spell. "I summon thee accented é! I press the weird magical key Alt, and with 0191 get the flipped question mark!" For a bilingual person this meant that writing on the computer was a start-and-stop process. With Mac's it a whole lot easier, just Alt + e and the letter you wanted for accents and alt + ? for the question mark. No need to leave the keyboard for the number pad and no need to remember arcane number combinations or have a paper cheat sheet next to the keyboard, as I've seen in virtually every secretaries computer in Puerto Rico.

Linux has a interesting approach to foreign language characters: using a compose key. You hit this key which I typically map to Caps Lock and ' and the letter you want and voilá you get the accent. Kinda makes sense: single quotation mark is an accent, double gets you the ümalaut, works pretty well. Except for the ñ, wh…

Contrasting Styles of Writing: English vs. Spanish

There is interestingly enough a big difference between what's considered good writing in Spanish and English. V.S. Naipul winner of the 2001 Nobel prize for literature publish an article on writing. In it he emphasizes the use of short clear sentences and encourages the lack of adjectives and adverbs. Essentially he pushes the writer to abandon florid language and master spartan communication. This is a desired feature of English prose, where short clipped sentences are the norm and seamlessly flow into a paragraph. In English prose the paragraph is the unit the writer cares about the most.

This is not the case in Spanish where whole short stories (I'm thinking this was Gabriel Garcia Marquez but maybe it was Cortázar) are written in one sentence. Something so difficult to do in English that the expert translator could best manage to encapsulate the tale in two sentences. The florid language is what is considered good writing in Spanish but unfortunately this has lead to what …

Fixing Autocomplete in Github's Atom Text Editor for Ruby

I really like Github's Atom Text Editor. I really like that it's multi-platform allowing me to master one set of skills that is transferable to all platforms and all machines. 

On thing that just burns me of the default set-up in Atom is the Autocomplete feature that seems to change my words as a type them. Because Ruby uses the end of line as a terminus for a statement you usually finish a word with pressing the return button and you get really annoying changes to your finished typed word a la MS Word. I find myself yelling "No that's not what I wrote!" at the screen in busy coffee shops.

I disabled autocomplete for a while but it is a very useful function. Then I found out they changed the package that gave the autocomplete to a new one called "Autocomplete Plus" that gives you more options. All that I needed to change to make autocomplete sane again:

1. Open Atom's Preferences
2. Search the bundled packages for "Autocomplete Plus"

3. Go to t…