Rails - Sep 2011 - Finding HTML attributes with jQuery in Rails 3.1

I''m having trouble wrapping my head around the proper syntax to have
jQuery (in an .js file) grab an HTML attribute and use the value of
that attribute to load a partial.

HTML fragment:
<a href="/toggle" data-remote="true"
section="training">

jQuery string (now setting a static partial, I need this to be
dynamic)
$("#services").html("<%= escape_javascript(render(:partial
=>
"operations" )) %>").show()

I want the value of "section" as that corresponds to the name of the
partial. I''ve tried to look at this in Firebug, but I''m not
able to
set the proper breakpoint so I can see the context when the jQuery
string is evaluated.

What I want is something like:

foo = $(this).data("section")

$("#services").html("<%= escape_javascript(render(:partial
=> foo ))
%>").show()

or

$("#services").html("<%= escape_javascript(render(:partial
=> $
(this).data("section") )) %>").show()

Thank you for you time

-- 
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 10, 12:18 pm, dwormuth
<dworm...-cIpcPs7DjqbWs/AcZQh2Cw@public.gmane.org>
wrote:
> I''m having trouble wrapping my head around the proper syntax to
have
> jQuery (in an .js file) grab an HTML attribute and use the value of
> that attribute to load a partial.
>
> HTML fragment:
> <a href="/toggle" data-remote="true"
section="training">
>
> jQuery string (now setting a static partial, I need this to be
> dynamic)
> $("#services").html("<%=
escape_javascript(render(:partial =>
> "operations" )) %>").show()
>
> I want the value of "section" as that corresponds to the name of
the
> partial. I''ve tried to look at this in Firebug, but I''m
not able to
> set the proper breakpoint so I can see the context when the jQuery
> string is evaluated.
>
> What I want is something like:
>
> foo = $(this).data("section")
>
> $("#services").html("<%=
escape_javascript(render(:partial => foo ))
> %>").show()
>
> or
>
> $("#services").html("<%=
escape_javascript(render(:partial => $
> (this).data("section") )) %>").show()
>
This isn''t possible. Whatever is in your <%= %> bits is evaluated
when
the response is served by your browser. It can''t use information that
will only come into existence once the user has started to interact
with the page in the browser. You''d either need to have all those
partials hidden somewhere on the page so that the js can find them or
make an Ajax request once you know which partial is needed.

Fred




> Thank you for you time
-- 
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 for the quick response. I could use a switch/case structure to
handle the

$("#services").html("<%= escape_javascript(render(:partial
=> "a" ))
%>").show()

call as there are only 6 partials I need. I have 6 links on the page
that only vary by the "section" value.

I still need some guidance on pulling out the value of the "section"
attribute from the <a> DOM element. Any idea on that part?

Dave

On Sep 10, 9:37 am, Frederick Cheung
<frederick.che...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> On Sep 10, 12:18 pm, dwormuth
<dworm...-cIpcPs7DjqbWs/AcZQh2Cw@public.gmane.org> wrote:
>
>
>
>
>
> > I''m having trouble wrapping my head around the proper syntax
to have
> > jQuery (in an .js file) grab an HTML attribute and use the value of
> > that attribute to load a partial.
>
> > HTML fragment:
> > <a href="/toggle" data-remote="true"
section="training">
>
> > jQuery string (now setting a static partial, I need this to be
> > dynamic)
> > $("#services").html("<%=
escape_javascript(render(:partial =>
> > "operations" )) %>").show()
>
> > I want the value of "section" as that corresponds to the
name of the
> > partial. I''ve tried to look at this in Firebug, but
I''m not able to
> > set the proper breakpoint so I can see the context when the jQuery
> > string is evaluated.
>
> > What I want is something like:
>
> > foo = $(this).data("section")
>
> > $("#services").html("<%=
escape_javascript(render(:partial => foo ))
> > %>").show()
>
> > or
>
> > $("#services").html("<%=
escape_javascript(render(:partial => $
> > (this).data("section") )) %>").show()
>
> This isn''t possible. Whatever is in your <%= %> bits is
evaluated when
> the response is served by your browser. It can''t use information
that
> will only come into existence once the user has started to interact
> with the page in the browser. You''d either need to have all those
> partials hidden somewhere on the page so that the js can find them or
> make an Ajax request once you know which partial is needed.
>
> Fred
>
>
>
> > Thank you for you time
-- 
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.

Frederick Cheung wrote in post #1021129:
> On Sep 10, 12:18pm, dwormuth
<dworm...-cIpcPs7DjqbWs/AcZQh2Cw@public.gmane.org> wrote:
>> "operations" )) %>").show()
>> $("#services").html("<%=
escape_javascript(render(:partial => foo ))
>> %>").show()
>>
>> or
>>
>> $("#services").html("<%=
escape_javascript(render(:partial => $
>> (this).data("section") )) %>").show()
>>
>
> This isn''t possible. Whatever is in your <%= %> bits is
evaluated when
> the response is served by your browser.
Wrong(a typo?).  The way it works is:

1) The browser makes a request.
2) The server prepares the response, and evaluates the <% ... %> bits.
3) The server sends the response to the browser.
4) The browser takes action based on the response.

The browser certainly doesn''t evaluate the <% ... %> bits.
> It can''t use information that
> will only come into existence once the user has started to interact
> with the page in the browser. You''d either need to have all those
> partials hidden somewhere on the page so that the js can find them or
> make an Ajax request once you know which partial is needed.
>
The link does send an ajax request--that is what the attribute:

  data-remote="true"

means.


The problem with this js:

$("#services").html("<%= escape_javascript(render(:partial
=>
"operations" )) %>").show()

is that this html:

<a href="/toggle" data-remote="true"
section="training">

sends a GET request to the server using ajax (data-remote="true"), but
as you can see, the url "/toggle'' does not have a query string
attached,
e.g.:

<a href="/toggle?section=training" data-remote="true"
section="training">

Without a query string, the server has no way of knowing which html
element sent the GET request.  Although, somehow the server does know
that the request is from an html element that has an attribute
data-remote="true".  Rails treats other ajax requests differently: a
respond_to block like this:

respond_to do |format|
  format.js{render :partial => ''a_partial_name''}
  format.html {}
end

will cause a data-remote="true" ajax request to hit the format.js
block,
while an ajax request like this:


$("#services").load(''action_name'', data);

will hit the format.html block.


If you want to avoid having to add query strings to all the urls in the
<a> tags, you can use js to intercept the click on the link.  js can
read the attributes of the html element that was clicked, and then js
can send an ajax request for the proper html page based on the
''section''
attribute.  When the js gets the response from the server, it can insert
the returned html into the current page.


app/views/layouts/application.html.erb:

<script type=''text/javascript'' >

  $(document).ready(function() {

      $(".insert").click(function(event) {
        var section = $(this).attr("section");
        var data = "section=" + section;

        $("#services").load(''action_name'', data);

        event.preventDefault(); //prevents going to href in <a> tag
      });


  });

</script>


And in the controller:

  def action_name

    respond_to do |format|

      format.html{
        if request.xhr?
          render :partial => params[:section]
        end
      }

    end

-- 
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 10, 8:17 pm, 7stud --
<li...-fsXkhYbjdPsEEoCn2XhGlw@public.gmane.org>
wrote:
> Frederick Cheung wrote in post #1021129:
>
> > On Sep 10, 12:18pm, dwormuth
<dworm...-cIpcPs7DjqbWs/AcZQh2Cw@public.gmane.org> wrote:
> >> "operations" )) %>").show()
> >> $("#services").html("<%=
escape_javascript(render(:partial => foo ))
> >> %>").show()
>
> >> or
>
> >> $("#services").html("<%=
escape_javascript(render(:partial => $
> >> (this).data("section") )) %>").show()
>
> > This isn''t possible. Whatever is in your <%= %> bits is
evaluated when
> > the response is served by your browser.
>
> Wrong(a typo?).  The way it works is:
>
Yeah, that "browser" should be "server"

Fred


> 1) The browser makes a request.
> 2) The server prepares the response, and evaluates the <% ... %>
bits.
> 3) The server sends the response to the browser.
> 4) The browser takes action based on the response.
>
> The browser certainly doesn''t evaluate the <% ... %> bits.
>
> > It can''t use information that
> > will only come into existence once the user has started to interact
> > with the page in the browser. You''d either need to have all
those
> > partials hidden somewhere on the page so that the js can find them or
> > make an Ajax request once you know which partial is needed.
>
> The link does send an ajax request--that is what the attribute:
>
>   data-remote="true"
>
> means.
>
> The problem with this js:
>
> $("#services").html("<%=
escape_javascript(render(:partial =>
> "operations" )) %>").show()
>
> is that this html:
>
> <a href="/toggle" data-remote="true"
section="training">
>
> sends a GET request to the server using ajax
(data-remote="true"), but
> as you can see, the url "/toggle'' does not have a query
string attached,
> e.g.:
>
> <a href="/toggle?section=training"
data-remote="true"
> section="training">
>
> Without a query string, the server has no way of knowing which html
> element sent the GET request.  Although, somehow the server does know
> that the request is from an html element that has an attribute
> data-remote="true".  Rails treats other ajax requests
differently: a
> respond_to block like this:
>
> respond_to do |format|
>   format.js{render :partial => ''a_partial_name''}
>   format.html {}
> end
>
> will cause a data-remote="true" ajax request to hit the format.js
block,
> while an ajax request like this:
>
> $("#services").load(''action_name'', data);
>
> will hit the format.html block.
>
> If you want to avoid having to add query strings to all the urls in the
> <a> tags, you can use js to intercept the click on the link.  js can
> read the attributes of the html element that was clicked, and then js
> can send an ajax request for the proper html page based on the
''section''
> attribute.  When the js gets the response from the server, it can insert
> the returned html into the current page.
>
> app/views/layouts/application.html.erb:
>
> <script type=''text/javascript'' >
>
>   $(document).ready(function() {
>
>       $(".insert").click(function(event) {
>         var section = $(this).attr("section");
>         var data = "section=" + section;
>
>         $("#services").load(''action_name'',
data);
>
>         event.preventDefault(); //prevents going to href in <a> tag
>       });
>
>   });
>
> </script>
>
> And in the controller:
>
>   def action_name
>
>     respond_to do |format|
>
>       format.html{
>         if request.xhr?
>           render :partial => params[:section]
>         end
>       }
>
>     end
>
> --
> 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.