How can I re-render javascript onchange of a text field?

Question

I am not a computer scientist, but a mechanical engineer by trade. Therefore, I apologize in advance if I do not use the correct words to describe things. I will try my best to be clear.

I'm working on a Rails site that displays the power output of a customer's solar power inverter. On the page where the power output is plotted (with javascript) I would like for the javascript (with embedded ruby) on that page to be re-rendered onchange of a text field (which has a date in it). As in when the customer wants to view their power output data for a different date, the javascript for this page will be re-rendered accordingly.

I was originally trying to use render :update and page.replace_html in a controller action that would be called onchange of the text field, but after further research found that this is not considered good practice? Also and more importantly, I couldn't make it work (I'm so ashamed. Thank you so much to those responders who tried to help me!).

I watched Railscast #136 and am trying to adapt that information to what I need.

The page is poweroutput.html.erb . All of my javascript is within script tags in the main html file. The html for the text field element on poweroutput.html.erb is as follows (It does not work):

<%= text_field_tag(
      'dt', nil,
      {  :id => 'date-field',
         :class => 'dateformat-d-dt-m-dt-Y',
         :onchange => remote_function(
             :url => {:controller => 'pages', :action => 'poweroutput'})
      })
%>

So I thought that the above would basically just refresh/re-render the page onchange of the text field, but nothing happens.

Please help as I am tearing my hair out. I think part of my problem must be that I don't understand what the underlying Ajax function that is being called by the remote_function method is doing. If you can shed some light on this OR suggest a completely different method of re-rendering javascript onchange of a text field, I'd be so grateful!

Answer 1

Two things that I think might be wrong here:

1) Wrap your partial with div, as AJAX calls results render to divs:

<script type="text/javascript">
   <div id="poweroutputscript_partial">
     <%= render 'javascripts/poweroutputscript.html.erb' %>
   </div>
</script>

2) In your action, specify full path to the partial:

page.replace_html "poweroutputscript_partial", :partial => 'javascripts/poweroutputscript'

Answer 2

First I would use firebug or similar to check that the request was being sent when the text field changes. Next I would check to see what the response is. If it's a 500 error, check the application logs for a stack trace.

My guess is that the response will be a 500 error, probably because your update_poweroutput function is trying to render a partial that doesn't exist, I think you need to specify

:partial => 'javascripts/poweroutputscript.html.erb'

unless, of course, you're rendering a different partial that does exist in the pages view folder. In this case, are you setting all the necessary variables in the controller?