Rails:通过AJAX调用渲染js.erb

时间:2012-08-02 23:32:54

标签: ruby-on-rails ajax

从JavaScript开始,我通过AJAX调用控制器,如下所示:

$.ajax({
  type: 'GET',
  url: '/books'
}

在我的控制器中我有:

def index
  render 'lightbox.js.erb'
end

在我的路线中,我有:

resources :books do
  member do
    get :lightbox
  end
end

在lighbox.js.erb中我有:

alert("Hello world!");

由于某种原因,警报永远不会被调用。我没有收到任何错误消息,无论是通过服务器还是通过Firebug。我不知道可能出现什么问题。有什么想法吗?

7 个答案:

答案 0 :(得分:22)

事实证明,在客户端,我的JavaScript被呈现为文本。我通过查看控制台Feed确认了这一点。它说:

Started GET "/books/lightbox?book=4&username=tbaron&_=1344009191129" for 127.0.0.1 at 2012-08-03 10:53:11 -0500
Processing by BooksController#lightbox as text

最后两个单词应该读作“JS”。在生根后,我发现这个blog post导致了一个非常简单的解决方案。将“dataType:script”添加到AJAX调用:

$.ajax({
  type: 'GET',
  url: '/books'
  dataType : 'script'
}

感谢大家的帮助!

答案 1 :(得分:7)

我认为那是因为你需要致电books.js

$.ajax({
  type: 'GET',
  url: '/books.js',
  success: function(data) {
    eval(data);
  }
}

在索引操作中:

def index
  respond_to do |format|
    format.js { render 'lightbox'}
  end
end

lightbox.js.erb应该在app / views / books

如果仍然无效,请尝试拨打books/index.js 您还可以使用firebug / chrome来检查服务器响应您的ajax调用的内容

答案 2 :(得分:1)

您可以尝试使用此脚本在java脚本中调用您的操作

var post_params = {};
var action = '/books/script_action';

$.post(action, post_params).success(function (data) {

     eval(data);

}).error(function (data) {

    alert("Erro to call a action controller");

});

在你的控制器中尝试这个。我建议创建一个新动作

def script_action
  render 'lightbox.js'
end

在路线档案中:

match "books/script_action/" => "books#script_action"

答案 3 :(得分:0)

尝试将此添加到控制器:

respond_to :js

答案 4 :(得分:0)

在索引操作中,渲染时不使用布局:

def index
  respond_to do |format|
  format.js { render 'lightbox', layout: false}
end

这对我有用。

答案 5 :(得分:0)

对于任何偶然发现并且只想调用js.erb文件响应的控制器操作的人,我已经通过这种方式实现了它(在Anthony Alberto's Awesome Answer的帮助下)。

控制器操作

def some_action
  ..
  respond_to do |format|
    format.js { render 'some_action' }
  end
end

<强> some_action.js.erb

...
$('#someActionWrap').html('<%= j render "some/displaypartials/action_partial" %>')
...

调用Ajax

var id = '<%= @someresource.id %>';
$.get('/someresource/' + id + '/action/', null, function(data){
    eval(data)
}, 'script');

答案 6 :(得分:0)

我在link_to帮助器上遇到了类似的问题,但使用remote:true

进行了更正