Rails ajax调用无法正确呈现我的format.js文件

Question

我正在尝试模仿这个http://samuelmullen.com/2011/02/dynamic-dropdowns-with-rails-jquery-and-ajax/来使用ajax生成动态下拉列表。

每次我更改第一个dropdown时，它都会调用ajax函数并进入正确的js.erb文件，如下面的日志条目所示，但它不会在控制台中记录任何内容。

日志条目：

"available slots = 20"


Started POST "/arrangements/timeslots_by_location" for 127.0.0.1 at 2013-03-11 17:59:25 -0500
Processing by ArrangementsController#timeslots_by_location as JS
  Parameters: {"id"=>"3"}
  User Load (0.4ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 LIMIT 1
   (2.8ms)  SELECT COUNT(*) FROM `timeslots` WHERE (location_id = '3' AND arrangement_id is null)
  Timeslot Load (0.4ms)  SELECT `timeslots`.* FROM `timeslots` WHERE (location_id = '3' AND arrangement_id is null) ORDER BY timeslot ASC
  Rendered arrangements/timeslots_by_location.js.erb (6.3ms)
Completed 200 OK in 19ms (Views: 11.3ms | ActiveRecord: 3.6ms)
"available slots = 20"


Started POST "/arrangements/timeslots_by_location" for 127.0.0.1 at 2013-03-11 17:59:25 -0500
Processing by ArrangementsController#timeslots_by_location as JS
  Parameters: {"id"=>"3"}
  User Load (0.4ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 LIMIT 1
   (0.4ms)  SELECT COUNT(*) FROM `timeslots` WHERE (location_id = '3' AND arrangement_id is null)
  Timeslot Load (0.5ms)  SELECT `timeslots`.* FROM `timeslots` WHERE (location_id = '3' AND arrangement_id is null) ORDER BY timeslot ASC
  Rendered arrangements/timeslots_by_location.js.erb (9.4ms)
Completed 200 OK in 22ms (Views: 16.8ms | ActiveRecord: 1.3ms)

/views/arrangements/timeslots_by_location.js.erb

console.log('testing');
$("#arrangement_timeslot_id").html('<option value="2">TEST</option>');

在firebug中，如果我从控制台展开post调用，我单击response选项卡并看到我的javascript代码，但它实际上并没有登录到控制台，也没有将我的选项添加到我的下拉列表中。

/controllers/arrangements_CONTROLER.rb

# Gets the available timeslots based on the location selected
  def timeslots_by_location
    if params[:id].present?
        @available_timeslots = Timeslot.where('location_id = ? AND arrangement_id is null', params[:id]).order('timeslot ASC')
    else
        @available_timeslots = []
    end
    p "available slots = #{@available_timeslots.size}"

    respond_to do |format|
        format.js 
    end
  end

视图/排列/_form.html.erb

<%= collection_select(:arrangement, :location_id, Location.all, :id, :name) %>

assets/javascripts/arparements.js

// Setup ajax calls to hit the format.js respond_to in my controller
jQuery.ajaxSetup({
    'beforeSend': function(xhr) { 
        xhr.setRequestHeader("Accept", "text/javascript");
    }
});    

// function that gets called when the location dropdown changes
$.fn.subSelectWithAjax = function() {
  var that = this;

  this.change(function() {
      $.post('/arrangements/timeslots_by_location', {id: that.val()}, null, "script");
  });
}

// Call the subSelectWithAjax function when the location dropdown changes
$(document).ready(function() {
    $("#arrangement_location_id").subSelectWithAjax();
});

这是怎么回事？

Answer 1

我想通了。我还没有发布我的整个timeslots_by_locations.js.erb文件。

这个片段就在里面：

console.log('test = <%= options_for_select(@available_timeslots.map {|sc| [sc.timeslot, sc.id]}).gsub(/n/, '').html_safe %>');

.gsub(/n/, '')应该是.gsub(/\n/, '')，所以它导致了<option ..标记为<optio ..。