选择更改时如何使用AJAX更新rails页面内容?

时间:2013-10-26 01:49:44

标签: ruby-on-rails ajax json jquery ruby-on-rails-4

我有一个属于课程的@course表格,每节课都有__ grady_items。通过下拉菜单选择lesson_id。当用户更改课程选择时,必须更新表示每个gradable_item的嵌套输入。这可以通过页面刷新并将lesson_id作为url参数传递...因此,课程gradable_items作为嵌套输入存在,然后可以对它们进行评分(并保存为graded_items)。但是,似乎AJAX是完美的。

下面的代码不起作用......我想知道我错过了什么。

  • course_lesson_id - 选择课程的选择菜单

  • “/ gradable_items_input?lesson =#{el.val()}” - ajax应该注入到发起函数调用的视图中的gradable_items_inputs.js.erb模板的url。

  • gradable_items_container - AJAX应该注入从模板返回的代码

alert()按预期触发,并且添加了类但未删除...因为我从未获得成功。

我期待发生的是这样的:
选择菜单已更改,这将触发该功能。该函数在lesson_id菜单中获取所选项的id,然后使用lesson_id作为url参数转到gradable_items_inputs url。访问此模板时,它使用gradable_items_inputs操作查询Course控制器中的db。此查询使用url参数为lesson_id过滤记录并填充gradable_items_inputs.js.erb文件。然后,当成功时...... AJAX将来自gradable_items_inputs模板的代码放入div中,其中包含id #gradable_items_container。

我的思维过程是否存在缺陷?我想答案一定是肯定的......因为它不起作用。

  jQuery ->
    el = $("#course_lesson_id")
    el.on "change", ->
    $.ajax "/gradable_items_inputs?lesson=#{el.val()}",
    beforeSend: ->
      $("#ajax_tell").addClass "is-fetching"

    success: (response) ->
      $("#gradable_items_container").html(response)

    complete: (response) ->
      $("#ajax_tell").removeClass "is-fetching"

    error: ->
      $("#{ajax_tell}").html "<p>ERROR</p>"

    timeout: 3000
    alert "test"

gradable_items_inputs.js.erb文件:

  $('#gradable_items_container').html('

<% @gradable_items.each do |gradable_item| %>
      <%= f.simple_fields_for :graded_items do |graded_item| %> 

    <p>
    <%= gradable_item.name %>
    <%= graded_item.input :gradable_item_id, input_html: { value: gradable_item.id, }, as: :hidden %>
    <%= graded_item.input :grade, collection: gradescales(@course), label: false %>
   </p>

  <% end %> 
    <% end %>

  ');

courses_controller.rb

  def gradable_items_inputs
     @lesson = Lesson.find(params[:lesson])

     respond_to do |format|
        format.js { }
     end
 end

2 个答案:

答案 0 :(得分:1)

尝试添加

dataType:'script'

到Ajax调用params。这将确保请求格式为js。

调试Ajax调用的最佳方法是从两端监视它。查看rails服务器日志以查看请求的接收方式,并使用浏览器网络检查器查看响应。

答案 1 :(得分:1)

您似乎还没有为gradable_item_inputs创建路线。

检查routes.rb,必须具有以下代码:

 resources :courses do
    collection do
      get gradable_item_inputs
    end
  end