Question

我想加载一组对象并使用Ajax和HTML中的select元素渲染它们。这是我用来发出请求的jQuery：

planner.js

$("select.semesterSelect").change(function(){
   $.ajax({
      type: "POST",
      url: "/planners/events",
      data: {timeperiod: {id: $(this).find(":selected").val()}},
      success: function(events){
         console.log("success");
      },
      error: function(){
         console.log("error");
      }
   });
});

以下是我用来查找要渲染的对象的控制器操作：

planners_controller.rb

def events
@timeperiod = params[:timeperiod] ? Timeperiod.find(params[:timeperiod][:id]) : Timeperiod.find(Timeperiod.last.id)
@events = Event.where("from_date >= :tp_from_date AND to_date <= :tp_to_date", {tp_from_date: @timeperiod.from_date, tp_to_date: @timeperiod.to_date})
 respond_to do |format|
   format.html
   format.js
 end
end

最后，这是我用来渲染事件的js.erb文件（我已经注释掉渲染线）。

events.js.erb

//$("#events_div").html("<%= escape_javascript(render(:partial => 'planners/event')) %>");
console.log("here");

当我使用此设置进行选择时，我在js控制台日志中获得“成功”。但是，我没有看到“这里”。当我取消注释渲染线时，我不会渲染我的新对象。

我做错了什么？

编辑：我更正了文件名。编辑2：下面是我用来格式化此代码的链接。

“在Rails中使用JavaScript”：http://guides.rubyonrails.org/working_with_javascript_in_rails.html “如何使用rails 3”对jquery ajax成功方法进行部分渲染“：How to do render partial on jQuery ajax success method with rails 3

Answer 1

据我所知，有关rails的jQuery / Ajax，

您已在此处定义了网址

url: "/planners/events",

所以你必须将events方法定义为planners controller。

还有一件事要在视图上获取更新，您必须创建一个events.js.erb文件。

Answer 2

从它的外观来看，可能有几个原因导致问题：

您的路线可能未指向控制器
您可能无法在控制器上正确处理请求（导致500服务器错误）

我写这个作为答案，提出如何进一步调试的想法：

<强>路线

根据您的说法，您应该设置此路线：

#config/routes.rb
resources :planners do
    post :events
end

虽然我不认为这是你的问题，但确保它存在是有益的

开发者控制台

如果您使用的是Chrome / Firefox，则可以使用developer console（right-click＆gt; inspect element＆gt; network）来显示所有针对您的ajax请求站点

我强烈建议您这样做以查看响应是什么。我认为您的错误是由控制器导致500内部服务器错误造成的，除非您查看网络活动和放大，否则您将无法了解该错误。请参阅preview标签

Ajax“成功”

只是意味着您已与控制器建立连接，并且已收到响应。响应可能是一个错误，但Ajax无法分辨，因为Rails的每个响应都是一个有效的HTML页面

我建议使用开发人员工具network标签查看发生了什么。如果您可以转发有关响应的更多详细信息，我们将能够提供更好的帮助！

Answer 3

我通过将planners/events操作拆分为两个事件来解决问题，如下所示：

  def events
   @timeperiod = params[:timeperiod] ? Timeperiod.find(params[:timeperiod][:id]) : Timeperiod.find(Timeperiod.last.id)
   @events = Event.where("from_date >= :tp_from_date AND to_date <= :tp_to_date", {tp_from_date: @timeperiod.from_date, tp_to_date: @timeperiod.to_date})
    respond_to do |format|
      format.html
    end
  end

  def events2
   @timeperiod = params[:timeperiod] ? Timeperiod.find(params[:timeperiod][:id]) : Timeperiod.find(Timeperiod.last.id)
   @events = Event.where("from_date >= :tp_from_date AND to_date <= :tp_to_date", {tp_from_date: @timeperiod.from_date, tp_to_date: @timeperiod.to_date})
    respond_to do |format|
      format.js
    end
  end

如您所见，events2呈现jQuery，events呈现html。我还修改了我的js函数以使用第二个函数。

planner.js

$.ajax({
    type: "POST",
    url: "/planners/events2".
...

这会执行events2.js.erb中的代码。这很笨拙。有没有人有一个解决方案，不涉及分裂成这样的两个不同的行动？我很乐意接受更好的解决方案。

使用jQuery的Ajax和Rails发出POST请求

3 个答案: