UJS not getting executed upon return, in production only. Works in development

Rails
1

Hello all,

I’ve got an action that’s somewhat heavy (slow) that returns …js.erb.
The action completes fine, and I can see the results in firebug in the
console, but the javascript isn’t being executed, on the production
(more like production test) box. It works fine locally in development
env, and if I copy and paste the returned stuff from the firebug console
response it will execute just fine. Here’s the js erb:

$("#<%=@element_id%>").fadeOut();
$("#<%=@element_id%>").hide(100);
$("#FirstTheme").append("<%= escape_javascript(render(:partial => ‘tag’,
:locals=>{:entity_id=>@entity_id, :theme_id=>@theme_id,
:entity=>@entity, :element_id=>@element_id, :parent_id=>@parent_id,
:tag=>@tag})) %>");
$("#ObsList").html("<%=
escape_javascript(render(:partial=>‘explore/observation’,
:collection=>@observations))%>");

I’m using jquery 1.4.2, rails 3. I’m not a jquery expert, so I’m
scratching my head as where to look for debugging this. Thanks for any
pointers.

Bill

2

William K. Hatch Jr. wrote:

Hello all,

I’ve got an action that’s somewhat heavy (slow) that returns …js.erb.

You should probably fix that. Dynamically generated JS is usually a
design problem IMHO.

The action completes fine, and I can see the results in firebug in the
console, but the javascript isn’t being executed, on the production
(more like production test) box. It works fine locally in development
env, and if I copy and paste the returned stuff from the firebug console
response it will execute just fine. Here’s the js erb:

And here are my suggestions for doing it with static JS, which might
perhaps solve your problem.

$(“#<%=@element_id%>”).fadeOut();
$(“#<%=@element_id%>”).hide(100);

If you don’t know the element ID in advance, just assign it a known
class name when the HTML is generated. Then you can do
$(“.fade”).fadeOut();.

$(“#FirstTheme”).append(“<%= escape_javascript(render(:partial => ‘tag’,
:locals=>{:entity_id=>@entity_id, :theme_id=>@theme_id,
:entity=>@entity, :element_id=>@element_id, :parent_id=>@parent_id,
:tag=>@tag})) %>”);

That’s awful! The right way to do this is to have something like the
following in your .html.erb file (or rather, equivalent Haml), where
your CSS defines .hidden {display: none}:

<%= render :partial => 'tag', :all => 'the', :other => 'stuff' %>

then in the static JS

$(“#FirstTheme”).append($(“#firstThemeContent”).innerHTML)

Again, no js.erb necessary.

$(“#ObsList”).html(“<%=
escape_javascript(render(:partial=>‘explore/observation’,
:collection=>@observations))%>”);

Use the same technique as above.

This should clean up your JavaScript considerably and may help you
isolate the problem, if it does not get rid of it entirely.

Also, most people use lowercase (either dashed-lower-case or
lowerCamelCase) for their DOM IDs.

Best,

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

3

On Sep 24, 2010, at 12:27 PM, Marnen Laibow-Koser wrote:

William K. Hatch Jr. wrote:

Hello all,

I’ve got an action that’s somewhat heavy (slow) that returns …js.erb.

You should probably fix that. Dynamically generated JS is usually a
design problem IMHO.

What??? It’s the response for an ajax request; I don’t understand what
you’re saying here. How else would I take data driven content and insert
it into the dom?

$("#<%=@element_id%>").fadeOut();
$("#<%=@element_id%>").hide(100);

If you don’t know the element ID in advance, just assign it a known
class name when the HTML is generated. Then you can do
$(".fade").fadeOut();.

Again, this isn’t when the html is initially generated. I think I wasn’t
clear: this is an ajax request; not an html request.

<%= render :partial => 'tag', :all => 'the', :other => 'stuff' %>

then in the static JS

$("#FirstTheme").append($("#firstThemeContent").innerHTML)

Again, this content wouldn’t exist at the time of the page load, so it’s
not possible for it to be there in the first place.

isolate the problem, if it does not get rid of it entirely.

Also, most people use lowercase (either dashed-lower-case or
lowerCamelCase) for their DOM IDs.

well, the shop i’m doing it for uses camel case caps for the id’s, and
lowercase dashed on class names.

Sorry, but I think you’re completely missing the point, probably because
I didn’t explain it well.

All of this works, has worked fine, in development. The issue is it’s
not getting rendered by the browser even though it is being returned to
the browser, in production, on the server. So, request comes in, gets
processed, javascript gets returned to the browser, and if in
development, the appropriate elements update and content is inserted. If
in production, request comes in, gets processed, javascript gets
returned to the browser, and nothing happens.

4

William K. Hatch Jr. wrote:

On Sep 24, 2010, at 12:27 PM, Marnen Laibow-Koser wrote:

William K. Hatch Jr. wrote:

Hello all,

I’ve got an action that’s somewhat heavy (slow) that returns …js.erb.

You should probably fix that. Dynamically generated JS is usually a
design problem IMHO.

What??? It’s the response for an ajax request; I don’t understand what
you’re saying here. How else would I take data driven content and insert
it into the dom?

I know it’s an Ajax response. Your Ajax responses should generally be
data (HTML or JSON) to be processed on the client side, not code.

$(“#<%=@element_id%>”).fadeOut();
$(“#<%=@element_id%>”).hide(100);

If you don’t know the element ID in advance, just assign it a known
class name when the HTML is generated. Then you can do
$(“.fade”).fadeOut();.

Again, this isn’t when the html is initially generated.

Doesn’t matter in the least.

I think I wasn’t
clear: this is an ajax request; not an html request.

An Ajax request is (or can be) an HTML request; it’s really no
different than a non-Ajax request from your server’s point of view.

<%= render :partial => 'tag', :all => 'the', :other => 'stuff' %>

then in the static JS

$(“#FirstTheme”).append($(“#firstThemeContent”).innerHTML)

Again, this content wouldn’t exist at the time of the page load, so it’s
not possible for it to be there in the first place.

Irrelevant. Your client-side static JS should fire the Ajax request,
then process the returned HTML fragment or JSON packet to put it into
the DOM.

isolate the problem, if it does not get rid of it entirely.

Also, most people use lowercase (either dashed-lower-case or
lowerCamelCase) for their DOM IDs.

well, the shop i’m doing it for uses camel case caps for the id’s, and
lowercase dashed on class names.

Sorry, but I think you’re completely missing the point, probably because
I didn’t explain it well.

As far as I can tell, I am not missing the point at all. I hate to say
it, but I think you are, in that you seem to be under a misapprehension
as to how to use Ajax efficiently.

What do you think I’m missing?

All of this works, has worked fine, in development. The issue is it’s
not getting rendered by the browser even though it is being returned to
the browser, in production, on the server. So, request comes in, gets
processed, javascript gets returned to the browser, and if in
development, the appropriate elements update and content is inserted. If
in production, request comes in, gets processed, javascript gets
returned to the browser, and nothing happens.

So stop returning JS to the browser! That’s not the way to do Ajax well
IMHO. See my suggestions above.

Best,
–Â
Marnen Laibow-Koser
http://www.marnen.org
[email protected]