0

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

每次我更改我的第一个下拉列表时，它都会调用我的 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>');

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

/controllers/arrangements_controller.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) %>

资产/javascripts/arrangements.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();
});

这是怎么回事？

4

1 回答 1

0

我想到了。我没有发布我的整个 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 ...

于 2013-03-11T23:28:51.267 回答