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

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

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

<div class="hidden" id="firstThemeContent">   <%= render :partial => 'tag', :all => 'the', :other => 'stuff' %> </div>

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,

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?

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();.

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.

$("#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}:

<div class="hidden" id="firstThemeContent"> <%= render :partial => 'tag', :all => 'the', :other => 'stuff' %> </div>

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.

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.

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.

William K. Hatch Jr. 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.

<div class="hidden" id="firstThemeContent"> <%= render :partial => 'tag', :all => 'the', :other => 'stuff' %> </div>

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,