Rails 3 & jQuery - How the two work together to create a web app?

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:

For the content that is download via AJAX, is that content comingfrom a rails partial?... like(app>views>messages>_messagestable.html.erb
Where should the JavaScript reside that knows to fetch the messagescontent and then inject the content into the content panel? (is thatthe application.js?
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?

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 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:

http://stackoverflow.com/questions/172957/detecting-back-button-hash-change-in-url

Hope this helps..

@treeface, that's really helpful info thank you! I feel what's missing is a practical Rails Example app, where it all the pieces mentioned are connected

AnApprentice 2010-09-23 19:26:14

You're welcome. I've never used Rails, so I can't speak to exactly how this would work, but if I were you, I'd look specifically into how Rails handles its URL requests (usually frameworks refer to this as 'routing' or 'routes'). When you've figured out how to present basic pages in Rails, then you can put in a check to see if the request is a basic page request or an AJAX request. On the condition that your page is being normally requested through a GET, you can serve the whole page and the view. If it's an AJAX request, you can return a JSON object with the required HTML inside.

treeface 2010-09-23 20:07:38

That's very interesting. Rails does have that.. routes... I'll have to give that a try... And from a AJAX perspective on the FB messages example above.. Do you suggest delivering a big block of HTML or JSON formatted object that the JavaScript knows how to inject?

AnApprentice 2010-09-23 20:33:04

Indeed...it sounds like you're right on path to figuring this out. You'll want the server to do all the heavy lifting, so you want to be able to take a string from the server and insert it directly into the DOM. Look into loading views as strings in Rails and how to encode JSON objects. Basically, you'll want to return a JSON object that looks like this: {success:true, content:'<div id="example_id"....'}. That way, in your javascript, you can decode the JSON into a JS object and insert it into your content pane like this:

treeface 2010-09-23 22:00:12

var data = $.evalJSON(stringResponseFromServer); if(data.success) { $('#content').html(data.content); }. And then put together any event bindings you feel you need or load in any javascript file you need using the getScript method.

treeface 2010-09-23 22:02:08

Thanks for that. Crazy there isn't a tutorial out there on this.. Here I go !

AnApprentice 2010-09-23 22:05:13

You have no idea how many times I've thought the same thing X-D. Sounds like an opportunity for you to write one...I'm sure lots of people would appreciate it and you'd refine your tactics by writing about it. If you ever do, please post it back here so I can read it and maybe help work out a few kinks (if there are any). Rails/Ruby is 2 or 3 down the line of frameworks/languages I want to learn (hence my inability to help you too specifically), so it would be extremely useful for me to see how some of it is implemented in RoR. Also, if you still have any questions at all, ask away!

treeface 2010-09-23 22:11:54

Oh and I realize now that I forgot to mention that you can use the part after the # **as the URL of the AJAX request**. Then inside the controller function you can determine if it's ajax or not. Pretty snazzy, eh?

treeface 2010-09-23 22:16:18

One last example of a site that was one of the first pioneers of this method... check out what happens when you go to http://www.thesixtyone.com/s/rKCRI2RzPkn/ compared to http://www.thesixtyone.com/#/s/rKCRI2RzPkn/. Exactly the same idea...exactly the same logic :-)

treeface 2010-09-23 22:18:27

ansaurus

tags:

views:

answers:

Rails 3 & jQuery - How the two work together to create a web app?

related questions