无法使用 Ajax 更新我的 div (Rails 3)

Posted 2023-05-07

【中文标题】无法使用 Ajax 更新我的 div (Rails 3)

【英文标题】：Having trouble using Ajax to update my div (Rails 3)

【发布时间】：2012-09-01 19:18:04

【问题描述】：

我有一个表单，用户将使用它来输入书名，我将把它传递给外部图书搜索 API，然后我想在不重新加载页面的情况下在下方显示图书结果。

new.html.haml

（输入标题的表格）

= form_tag book_search_path, :method => :get, :remote => true do
    = label_tag "Title: (#@title)"
    = text_field_tag "title", ""
    = submit_tag "Search!"

#results // results should be updated here

books_controller.rb

（book_search_path 到这里，指向“搜索”操作）

class BooksController < ApplicationController

def index
    @books = Book.find :all
    render :action => 'list'
end 

def new 
    @books = Book.find :all
end 

def search
    Rails.logger.info("DOSEARCH!!!")
    # HIT THE API
    @results = search_keywords params[:title]
    # implicit render search.js.erb
end

search.js.erb

（在 books#search 操作结束时呈现）

m = $('#results');    
m.innerHTML = "<%= escape_javascript(render :partial => 'results.html.haml') %>";

_results.html.haml

（这是我想通过ajax插入到结果div中的）

- @results.each do |b| 
  %tr 
    %td 
      - Rails.logger.info("Got title...#b.title")
      = b.title
    %td 
      = b.isbn

我知道 _results.html.haml 正在运行，因为我看到了“Got title”日志，但它没有显示在 results div 内的 new.html.haml 上。知道发生了什么吗？

编辑：更新 books_controller。带有完整的代码。 Book.rb 是一个空模型，除了 :attr_accessible 字段

编辑：Ajax 响应：

m = $('#results');    
m.innerHTML = "<table id=\'results_table\'>\n  <tbody><\/tbody>\n  <th>Title<\/th>\n  <th>ISBN<\/th>\n  <tr>\n    <td>\n      The Odyssey\n    <\/td>\n    <td>\n      \n    <\/td>\n  <\/tr>\n  <tr>\n    <td>\n      The Odyssey of Homer\n    <\/td>\n    <td>\n      1604240687\n    <\/td>\n  <\/tr>\n  <tr>\n    <td>\n      The Odyssey\n    <\/td>\n    <td>\n      1613821166\n    <\/td>\n  <\/tr>\n  <tr>\n    <td>\n      The Odyssey of Homer\n    <\/td>\n    <td>\n      1437818080\n    <\/td>\n  <\/tr>\n  <tr>\n    <td>\n      Odyssey\n    <\/td>\n    <td>\n      0872204847\n    <\/td>\n  <\/tr>\n  <tr>\n    <td>\n      The Odyssey (Penguin Classics)\n    <\/td>\n    <td>\n      0143039954\n    <\/td>\n  <\/tr>\n  <tr>\n    <td>\n      The Odyssey: The Fitzgerald Translation\n    <\/td>\n    <td>\n      0374525749\n    <\/td>\n  <\/tr>\n  <tr>\n    <td>\n      The Odyssey\n    <\/td>\n    <td>\n      1613823398\n    <\/td>\n  <\/tr>\n  <tr>\n    <td>\n      The Odyssey\n    <\/td>\n    <td>\n      0763642681\n    <\/td>\n  <\/tr>\n  <tr>\n    <td>\n      The Odyssey (Penguin Classics)\n    <\/td>\n    <td>\n      0140449116\n    <\/td>\n  <\/tr>\n<\/table>\n";

编辑：这是 Rails 3.2.8

【问题讨论】：

看起来所有的碎片都在那里。 DOM 中究竟发生了什么？响应中是否存在 NO 更改、意外更改、错误代码或 NO 响应（在浏览器的开发工具中）？

@normalocity DOM 没有变化。 Chrome 开发工具检查器显示，当我单击“搜索！”时，“搜索”请求实际上已通过。按钮，但页面本身并没有改变。 rails 日志显示 _results.html.haml 正在执行，但是当我单击按钮后查看源代码时，“响应”div 保持为空。

也有助于发布完整的模型和控制器。

@prusswan 我添加了完整的 Book 控制器和模型，但此时我什至没有进行任何 ActiveRecord 保存；只需使用用户参数查询外部 API。事实上，Book 模型是空的，除了它的 :attr_accessible 行。

拥有模型/控制器的原因是有时会使用不寻常的模型定义和过滤器，这可能会导致意外结果

【参考方案1】：

尝试将以下块添加到您的 search 操作中：

respond_to do |format|
  format.js
end

另外，将search.js.erb 中的行替换为：

$('#results').html("<%= escape_javascript(render :partial => 'results') %>");

更新：

看起来真正的问题（假设没有其他语法问题）是不是所有浏览器都支持innerHTML（参见this）

【讨论】：

我做了这两个，不幸的是，没有工作。如果有用，我在原始问题中添加了一个 ajax 响应示例。

@Tim 考虑到***.com/questions/8797692/…，我已经更新了答案@

js.erb 不应该是（注意 html() 中的额外引号）：$('#results').html("<%= escape_javascript(render :partial => "results.html.haml") %>"); 编辑：这有效！ API实际上只是很慢。谢谢@prusswan！ PS：为什么我需要 respond_to 块？

我删除了 respond_to 块（仅保留您的第二个建议），它似乎仍然有效。我不知道为什么会这样。