2013-03-11 76 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 ..