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

nobosh · September 23, 2010, 5:08pm

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!

nobosh · September 23, 2010, 5:37pm

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,

Marnen Laibow-Koser
http://www.marnen.org
[email protected]

nobosh · September 23, 2010, 5:58pm

On Sep 23, 8:37 am, Marnen Laibow-Koser [email protected] 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 - log in or sign up) 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 coming
from a rails partial?.. like
(app>views>messages>_messagestable.html.erb
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?
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

nobosh · September 23, 2010, 8:13pm

nobosh wrote:

On Sep 23, 8:37ï¿½am, Marnen Laibow-Koser [email protected] 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 - log in or sign up) 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:

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.

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.

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,

Marnen Laibow-Koser
http://www.marnen.org
[email protected]

nobosh · September 24, 2010, 1:29am

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

nobosh · September 24, 2010, 12:57am

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!

nobosh · September 24, 2010, 2:00am

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

nobosh · September 24, 2010, 2:16am

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,
–Â
Marnen Laibow-Koser
http://www.marnen.org
[email protected]

nobosh · September 24, 2010, 1:51am

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,
–Â
Marnen Laibow-Koser
http://www.marnen.org
[email protected]