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

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

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

Frederick Cheung wrote in post #1021129:

"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

Frederick Cheung wrote in post #1021129:

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