Question

I’m having a problem where I try to render a partial through a js.erb after I obtain some data from my controller. I’ve tried a number of different things, I just can’t get the partial to render. The log file shows the partial rendering with a 200 OK message, but nothing happens on the page. This post is similar to the problem I am having:

Rails 3 – render partial js.erb

I have tried to follow the guidance this post, but I’m still having trouble.

Here is my partial with the form __left_date_filter.html.erb =>

    <%= form_tag({:controller => 'events', :action => 'dateFilter'}, :class => 'date_form', :remote => true) do %>
    <%= datepicker_input "event", :start_date, :class => 'dateFilter', :dateFormat => 'mm/dd/y' %>
    <%= datepicker_input "event", :end_date, :class => 'dateFilter', :dateFormat => 'mm/dd/y' %>
    <%= submit_tag "Submit" %>
    <% end %> 

Here is the generated HTML =>

    <form accept-charset="UTF-8" action="/events/dateFilter" class="date_form" data-remote="true" method="post">
    <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="&#x2713;" />
    <input name="authenticity_token" type="hidden" value="x4cbSoYnUu2+W6qvtPnKXvXR8Tp3Yh7BP9W0RMyR02g=" /></div>
    <input class="dateFilter" id="event_start_date" name="event[start_date]" size="30" type="text" /><script type="text/javascript">

    //<![CDATA[
    jQuery(document).ready(function(){jQuery('#event_start_date').datepicker({"dateFormat":"mm/dd/y"})});
    //]]>
    </script>
   <input class="dateFilter" id="event_end_date" name="event[end_date]" size="30" type="text" /><script type="text/javascript">
   //<![CDATA[
   jQuery(document).ready(function(){jQuery('#event_end_date').datepicker({"dateFormat":"mm/dd/y"})});
   //]]>
</script>
    <input name="commit" type="submit" value="Submit" />

Here is the dateFilter.js.erb =>

$('#content').html("<%= escape_javascript(render(:partial => 'dateFilter')) %>");

Here is the events_controller =>

 def dateFilter

   eventIn = params[:event]
   start_date = Date.parse(eventIn[:start_date])
   end_date = Date.parse(eventIn[:end_date])
   sql = *redacted*

   @events = Event.find_by_sql(sql)

   respond_to do |format|
      format.html
      format.json
      format.js
  end
end

Here is the application.js =>

$(document).ready(function() {

  $('#date_form').submit(function (){  

    $.ajax({
     type: 'POST',
     url: "/events/dateFilter", 
     beforeSend: function (xhr) {xhr.setRequestHeader("Accept", "text/javascript");},
     data: { 'start_date' : $("input[name='event[start_date]']").datepicker(), 'end_date' : $("input[name='event[end_date]']").datepicker()}
     success: function(data) { $('#content').html(response); }
    });

 });

This is log data from the server =>

    Started POST "/events/dateFilter" for 127.0.0.1 at 2012-12-20 12:18:57 -0500
    Processing by EventsController#dateFilter as JS
    Parameters: {"utf8"=>"✓", "authenticity_token"=>"x4cbSoYnUu2+W6qvtPnKXvXR8Tp3Yh7BP9W0RMyR02g=", "event"=>{"start_date"=>"07/01/12", "end_date"=>"07/02/12"}, "commit"=>"Submit"}

     **shows SQL Statement getting all records**

    Rendered events/_dateFilter.html.erb (89.1ms)
    Rendered events/dateFilter.js.erb (90.7ms)
    Completed 200 OK in 212ms (Views: 80.5ms | ActiveRecord: 128.2ms)

Then finally, the page I wish to render _dateFilter.html.erb =>

<div class="content">
<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th><%= sortable  "event_id" %></th>
      <th><%= link_to "Time Created", :sort => "event_date_time_local" %></th>
      <th><%= link_to model_class.human_attribute_name(:event_type_id), :sort => "event_type" %></th>
      <th><%= link_to model_class.human_attribute_name(:severity_id), :sort => "severity_name" %></th>
      <th><%= link_to "Examined", :sort => "event_examined" %></th>
      <th><%= link_to model_class.human_attribute_name(:action_required), :sort => "action_required" %></th>
      <%#<th><%= model_class.human_attribute_name(:comments) </th>%>
      <th><%= link_to model_class.human_attribute_name(:initials), :sort => "initials" %></th>
      <th><%= link_to "Ticket ID", :sort => "taskid" %></th>
    </tr>
  </thead>
</div>

I’m just not sure why it is telling me that it rendered the partial properly, but then nothing happens on my page. I’m not very familiar with JQuery, so there is probably something wrong in my application.js or my datefilter.js.erb files.

Answer 1

A few things:

• The ajax call is not necessary if you are using :remote => true in your form_tag. JQuery will handle the call to Rails automatically. You should be able to comment out the code in application.js.
• Make sure you have a div that has id="content" in your HTML already.
• It’s not clear where you are getting a lot of the ruby variables in your _dateFilter.html.erb. Could you start with a simple partial to see if it works, and then you can start adding in details from the @events variable passed from the controller:

.

<div class="content">
 <table>
    <thead>
       <tr>
          <th>Test</th>
       </tr>
    </thead>
 </table>
</div>