Question

I need helping understanding the end to end flow in Rails.

I could use help with the following example.. Lets take Facebook.

When you’re on Facebook.com, and click MESSAGES, the URL changes to (facebook.com/?sk=messages) and then AJAX is used to download the HTML/ JS content which is injected with JavaScript into the content pannel… No browser refresh which is what I’m after.

My specific questions are:

1. For the content that is download via AJAX, is that content comingfrom a rails partial?… like(app>views>messages>_messagestable.html.erb
2. Where should the JavaScript reside that knows to fetch the messagescontent and then inject the content into the content panel? (is thatthe application.js?
3. Once the messages content (_messagestable.html.erb) is injectedinto the content panel, it will require new JavaScript functionsspecific to that content… Where should that live?

Answer 1

Presumably Rails works just like any other major framework out there. Typically, you want your AJAX and GET requests to work nicely together. So imagine you have this url:

http://www.example.com/messages

Going here will load up the messages section of your site without having to make an AJAX call. However, if you go to:

http://www.example.com/#/messages

You will land on http://www.example.com and you can use AJAX to send the “/messages” part off to your server where it can interpret it as a request to that controller to get that messages view (or however you’ve got it set up). This is a technique that I’ve seen referred to as hijax because you can pepper your page with actual anchor elements that link correctly to

http://www.example.com/messages

or

http://www.example.com/maps

But in your javascript, you can cancel the operation of the link and redirect the browser to:

http://www.example.com/#/messages

or

http://www.example.com/#maps

Now since you have that other javascript function listening for changes in the hash tag, it does the same thing as if you had simply gone to that link directly…that is sending “/maps” off to the server, have the server interpret it, and kick back the required content HTML that you want to fill the page with. This way search engines can crawl your site and you can have a user experience that works great for people with and without javascript.

Now for loading additional Javascript functionality after a page has already loaded, you could, I believe, simply use Javascript to insert a new tag, and add the source to wherever your new script resides. You can do this easily using jQuery’s .getScript() method:

http://api.jquery.com/jQuery.getScript/

As to where all this script resides…I guess that’s up to you or Rails. The ability to parse the URL hash is something you definitely need to make it all come together. For this, you have the option of a number of jQuery libraries:

Detecting Back Button/Hash Change in URL

Hope this helps..