Finding HTML attributes with jQuery in Rails 3.1

Rails
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:

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
2

On Sep 10, 12:18pm, dwormuth [email protected] 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. 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

3

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 DOM element. Any idea on that part?

Dave

On Sep 10, 9:37am, Frederick C. [email protected]

4

Frederick C. wrote in post #1021129:

On Sep 10, 12:18pm, dwormuth [email protected] 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:

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.:

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{}
format.html {}
end

will cause a data-remote=“true” ajax request to hit the format.js block,
and by default render the page action_name.js.erb, while an ajax
request like this:

$(“#services”).load(‘action_name’, data);

will hit the format.html block, and by default render the page
action_name.html.erb.

If you want to avoid having to add query strings to all the urls in the
 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:

Some view:

Training
Running
Services

And in the controller:

def action_name

respond_to do |format|

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

end
5

On Sep 10, 8:17pm, 7stud – [email protected] wrote:

(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