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

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!

-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

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
marnen-sbuyVjPbboAdnm+yROfE0A@public.gmane.org
-- 
Posted via http://www.ruby-forum.com/.

-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

On Sep 23, 8:37 am, Marnen Laibow-Koser
<li...-fsXkhYbjdPsEEoCn2XhGlw@public.gmane.org>
wrote:
> 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


> 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-Koserhttp://www.marnen.org
> mar...-sbuyVjPbboAdnm+yROfE0A@public.gmane.org
> --
> Posted viahttp://www.ruby-forum.com/.
-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

nobosh wrote:
> On Sep 23, 8:37�am, Marnen Laibow-Koser
<li...-fsXkhYbjdPsEEoCn2XhGlw@public.gmane.org> 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,
--
Marnen Laibow-Koser
http://www.marnen.org
marnen-sbuyVjPbboAdnm+yROfE0A@public.gmane.org
-- 
Posted via http://www.ruby-forum.com/.

-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

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!



On Sep 23, 11:13 am, Marnen Laibow-Koser
<li...-fsXkhYbjdPsEEoCn2XhGlw@public.gmane.org>
wrote:
> nobosh wrote:
> > On Sep 23, 8:37 am, Marnen Laibow-Koser
<li...-fsXkhYbjdPsEEoCn2XhGlw@public.gmane.org> 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,
> --
> Marnen Laibow-Koserhttp://www.marnen.org
> mar...-sbuyVjPbboAdnm+yROfE0A@public.gmane.org
> --
> Posted viahttp://www.ruby-forum.com/.
-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

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






On Sep 23, 3:56 pm, nobosh
<bhellm...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
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....
>
> 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!
>
> On Sep 23, 11:13 am, Marnen Laibow-Koser
<li...-fsXkhYbjdPsEEoCn2XhGlw@public.gmane.org> wrote:
>
>
>
> > nobosh wrote:
> > > On Sep 23, 8:37 am, Marnen Laibow-Koser
<li...-fsXkhYbjdPsEEoCn2XhGlw@public.gmane.org> 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,
> > --
> > Marnen Laibow-Koserhttp://www.marnen.org
> > mar...-sbuyVjPbboAdnm+yROfE0A@public.gmane.org
> > --
> > Posted viahttp://www.ruby-forum.com/.
-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

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
marnen-sbuyVjPbboAdnm+yROfE0A@public.gmane.org
-- 
Posted via http://www.ruby-forum.com/.

-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

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

On Sep 23, 4:51 pm, Marnen Laibow-Koser
<li...-fsXkhYbjdPsEEoCn2XhGlw@public.gmane.org>
wrote:
> 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-Koserhttp://www.marnen.org
> mar...-sbuyVjPbboAdnm+yROfE0A@public.gmane.org
> --
> Posted viahttp://www.ruby-forum.com/.
-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

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
marnen-sbuyVjPbboAdnm+yROfE0A@public.gmane.org
-- 
Posted via http://www.ruby-forum.com/.

-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.