2013-03-11 53 views
0

我试图模仿这个http://samuelmullen.com/2011/02/dynamic-dropdowns-with-rails-jquery-and-ajax/使用ajax进行动态下拉。Rails ajax调用不正确地呈现我的format.js文件

每次我改变我的第一个下拉列表,它会调用我的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,如果我扩大从控制台通话后,我点击响应选项卡,我看到了我的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) %> 

资产/ Java脚本/ 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(); 
}); 

什么用的了这个?

+0

你可以告诉我们让POST调用timeslots_by_location.js的JS吗? – Steve 2013-03-11 23:15:02

+0

以该信息更新。 – Catfish 2013-03-11 23:18:52

回答

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 ..