HowTo; Rails 3, having Tabs that load content via jQuery ... No Page Refesh

rubyonrails-talk
1

Hello, I'm interested in learning the correct/smart approach for implementing a web page with tabs and a content panel... When the tab is clicked by the user the tab's content is fetched and inserted with jQuery... no page refresh...

Example, Facebook, when you click Photos or Events, it doesn't refresh the browser, just replaces the content with AJAX in the page's content panel.

Any pointers, tips, tutorials? thanks!

2

nobosh wrote:

Hello, I'm interested in learning the correct/smart approach for implementing a web page with tabs and a content panel... When the tab is clicked by the user the tab's content is fetched and inserted with jQuery... no page refresh...

Example, Facebook, when you click Photos or Events, it doesn't refresh the browser, just replaces the content with AJAX in the page's content panel.

Any pointers, tips, tutorials? thanks!

This is fairly simple Ajax. What part do you need help with?

And remember to make it degrade gracefully: the links should still work (as conventional page links) with JS turned off, and each tab should have its own URL (abusing the #fragment portion of the URL for this may be useful).

Best,

3

nobosh wrote: > Hello, I'm interested in learning the correct/smart approach for > implementing a web page with tabs and a content panel... When the tab > is clicked by the user the tab's content is fetched and inserted with > jQuery... no page refresh...

> Example, Facebook, when you click Photos or Events, it doesn't refresh > the browser, just replaces the content with AJAX in the page's content > panel.

> Any pointers, tips, tutorials? thanks!

This is fairly simple Ajax. What part do you need help with?

Thanks Marnen. Right now 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 coming from a rails partial?... like (app>views>messages>_messagestable.html.erb 2. Where should the JavaScript reside that knows to fetch the messages content and then inject the content into the content panel? (is that the application.js? 3. Once the messages content (_messagestable.html.erb) is injected into the content panel, it will require new JavaScript functions specific to that content... Where should that live?

Thanks

4

nobosh wrote:

> Any pointers, tips, tutorials? thanks!

This is fairly simple Ajax. �What part do you need help with?

Thanks Marnen. Right now 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.

Apparently you need to understand how Ajax works. This has nothing to do with Rails specifically. I'd advise finding a good Ajax tutorial (don't know of one to recommend off the top of my head).

Basically, the major concept behind Ajax is that JavaScript can tell your browser make asynchronous HTTP requests. Your Web server will process those requests just like any other HTTP request, but then the JavaScript takes back over and processes whatever got returned from the server.

My specific questions are: 1. For the content that is download via AJAX, is that content coming from a rails partial?... like (app>views>messages>_messagestable.html.erb

That's usually what you'd want to do. You could also return JSON and process it on the client side, if you're more interested in data manipulation than display.

2. Where should the JavaScript reside that knows to fetch the messages content and then inject the content into the content panel? (is that the application.js?

Probably not. It depends on the structure of your application, but you'll normally want a page-specific JS file to do this.

3. Once the messages content (_messagestable.html.erb) is injected into the content panel, it will require new JavaScript functions specific to that content... Where should that live?

Probably in the same page-specific JS file. Again, there's no one answer; put it wherever your logic flow and refactoring dictate.

And for the love of God, provide a graceful degradation path so that people without JS can use as much of your app as possible. (Yes, in 2010, there are still a surprising number of users who cannot support JavaScript.)

Thanks

Best,

5

Thanks Marnen. I feel ok about how AJAX works perhaps I wasn't asking the question well enough. I did a little more digging and can show an example that might help clear out what I'm working to understand in Rails 3....

The goal, is to be able to inject html content into a contentPanel on a page w/o page refresh (like Facebook, clicking messages)

In my case I want to inject the Books view into the contentPanel w/o the layout, so in the Books controller I added:

def index respond_to do |format|   format.html   format.js { render :layout => false } end end

Then in my application.js file, I have the following function being triggered:

jQuery.ajaxSetup({ 'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")} })

$.ajax({   url: '/notes',   success: function(data) {     $('.contentCol').html(data);     //alert('Load was performed.');    } });

I also added a index.js.erb file, right now it just says: You found me!

What's strange is I want to inject the books view without the layout in the contentPanel div, so it doesn't seem right to be having that in a index.js.erb file.....

Does this help? Can't wait to hear your feedback, I've been trying to tackle this one all morning.

Thanks!

6

This seems to work. but feels like a hack... Thoughts anyone?

Updated the application.js to run:

$.ajax({ url: '/books', });

Created a _index.html.erb that has the books view (just copied it from index.html.erb so I had a partial.

Then in the index.js.erb, added this: $(".contentCol").html("<%=escape_javascript(render :partial =>"books/ index")%>");

My books controller is the same as the last post...

Thoughts? is this perfect? Crap? Hacky? etc? thxs!!!

7

nobosh wrote:

Thanks Marnen. I feel ok about how AJAX works perhaps I wasn't asking the question well enough. I did a little more digging and can show an example that might help clear out what I'm working to understand in Rails 3....

I've never used Rails 3, and I do little enough Ajax development that I have to check references every time. But with that in mind...

The goal, is to be able to inject html content into a contentPanel on a page w/o page refresh (like Facebook, clicking messages)

In my case I want to inject the Books view into the contentPanel w/o the layout, so in the Books controller I added:

def index respond_to do |format|   format.html   format.js { render :layout => false } end end

This is almost certainly not what you want. Even on Ajax requests, you're requesting HTML, not JavaScript, so you're still dealing with the format.html case. Just test request.xhr? to figure out if it was responding to an Ajax call.

Then in my application.js file, I have the following function being triggered:

jQuery.ajaxSetup({ 'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")} })

$.ajax({   url: '/notes',   success: function(data) {     $('.contentCol').html(data);     //alert('Load was performed.');    } });

I also added a index.js.erb file, right now it just says: You found me!

The .js says it's JavaScript. That's your cue to realize that you shouldn't be doing it that way if you're wanting HTML. (Actually, I believe js.erb is usually a sign of a design problem.)

What's strange is I want to inject the books view without the layout in the contentPanel div, so it doesn't seem right to be having that in a index.js.erb file.....

Exactly. See above.

Does this help? Can't wait to hear your feedback, I've been trying to tackle this one all morning.

Thanks!

Best,

8

Thanks Marnen but it sounds like I could use some help from a Rails 3 / AJAX guru on this one. Anyone?

9

nobosh wrote:

Thanks Marnen but it sounds like I could use some help from a Rails 3 / AJAX guru on this one. Anyone?

Please follow my advice first. It will get you most of the way there. Right now you're on the wrong path.

Best,