• From: Berkeley California
  • Registered: 2011-08-16
  • Posts: 66

Topic: Changing the color of a control after a page is rendered

This shouldn't be too hard, but I can't seem to find a reference to how to do it. (I am new to both Rails and js, so forgive me if this is incredibly lame).

When a user loads my page, I want to highlight the table cell they were last working with when they saved the form last.

I have tried putting "window.onload = InitDay()" near the top of my script (as well as at the end of my script), as well as "window.afterrender = InitDay()" but when the page is loaded, InitDay is called before the page is rendered, so I get an error when InitDay() tries to reference a table cell, I believe because the table has not yet been rendered.
The code in InitDay is:
x=  document.getElementById(lastday)  //lastday is the last day that was being edited and is the name of the appropriate table cell
xx = x.className // this line results in the error 'x is null'
When this code is executed the table calendar is not yet rendered, so I presume this is why 'x is null'.

So, how does one invoke a javassript function to run after a page has completed rendering?

Thanks in advance for any help.  --Fred

Last edited by fredrated (2012-01-13 13:44:40)

  • From: Los Angeles CA
  • Registered: 2008-03-17
  • Posts: 1,701

Re: Changing the color of a control after a page is rendered

Because jquery is now loaded by default (assuming you're on rails 3.1.X)

You do it like this,  put this is the <head> section of your page
<script type="text/javascript">
  $(document).ready(function() {
    $('#element_id_to_change').css({color:yellow});
  });
</script>

You can either put it directly in the page inside the script tags,  or use the new assets pipeline feature.  In that case just put it in a whatever.js file and put that in app/assets/javascripts,  so long as you have

<head>
<%= javascript_include_tag "application" %>
</head>

It will get loaded.

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.
  • From: Berkeley California
  • Registered: 2011-08-16
  • Posts: 66

Re: Changing the color of a control after a page is rendered

Thanks for your reply.
In attempting to use the code you provide, I did the following:

1. Instead of creating a new <script></script> section on the page, I added the following to the end of my <script> section:
$(document).ready(InitDay());
(my script is inline because I could not get code like:  var MyProjects = <%= @my_projects %>;
to execute and create the line var MyProjects = 3; when the code was called from a source file)
The result is that practically none of my form loads at all.  No error messages from firebug.

2. I added a new <script> section following the first script section that has all of my js code, with $(document).ready(InitDay()); being the only code in the new script section.  Again, almost none of my form now loads.

3. At the end of my already existing <script> section I added the following:
$(document).ready(function() {
  currday=document.getElementById("employee_last_day_edited").value;
  var x=document.getElementById(currday);
  var xx=x.className;
  switch(xx)
  {
  case "weekday":
    $(x).css({backgroundColor:cadetblue});
    break;
  case "weekend":
    $(x).css({backgroundColor:green});
    break;
  case "holiday":
    $(x).css({backgroundColor:firebrick});
    break;
  }
});
However, this results in the error:
$(document).ready is not a function

So I am stuck and unable to figure out how to implement your suggestion.

Thanks,  -Fred

P.S. I am using rails 3.0.7

Last edited by fredrated (2012-01-13 17:28:49)

  • From: Los Angeles CA
  • Registered: 2008-03-17
  • Posts: 1,701

Re: Changing the color of a control after a page is rendered

OK,  first thing I'd recommend is to upgrade to rails >= 3.1.X

Between 3.0.X and 3.1.X there were a lot of changes regarding jquery.

It appears that jquery isn't getting loaded!

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.
  • From: Berkeley California
  • Registered: 2011-08-16
  • Posts: 66

Re: Changing the color of a control after a page is rendered

I would love to upgrade but at this point I would rather get something, anything, to work, and in my (limited admittedly) experience upgrading will be fraught.

So I downloaded jquery.js 1.7.1, copied it into jquery.js and added <%= javascript_include_tag "jquery.js" %> and now jquery loads.

But that is not the end of the story.  The error '$(document).ready is not a function' has gone, only to be replaced by 'element.dispatchEvent is not a function'.  Searching the jquery.js file does not find the string 'dispatchEvent'.  Am I missing something fundamental?  Or something not fundamental?

Thanks for your assistance. --Fred

  • From: Los Angeles CA
  • Registered: 2008-03-17
  • Posts: 1,701

Re: Changing the color of a control after a page is rendered

Upgrading from 3.0.X to 3.1.X is pretty easy.

Once you do,  then you don't even worry about query versions,  rails serves up the correct version automatically.  All you have to do is put:


<%= stylesheet_link_tag    "application" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>

In the head section of your app/views/layouts/application.html.erb file, and rails will take care of the rest.

I think your problem right now is that in addition to query.js,  rails also requires query_ujs.js,  and you either don't have query_ujs.js,  or rails is serving up the correct version of it,  but you're overwriting the correct version of query.js with the 1.7.1 version.  I'm not sure but I think the correct version is OLDER than what you downloaded.

Try it,  I think you'll have it working in no time!

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.