Having trouble using Ajax to update my div (Rails 3)

I have a form that the user will use to enter in the title of a book, that I will pass into an external book search API, then I want to display the book results right underneath without reloading the page.

new.html.haml

(the form to enter the title)

= 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 goes here, to the 'search' action)

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

(gets rendered at the end of the books#search action)

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

_results.html.haml

(this is what I want to be inserted into the results div via ajax)

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

I know that _results.html.haml is getting run, since I see the "Got title" logs, but it is not showing up on the new.html.haml inside the results div. Any idea what's going on?

EDIT: updated books_controller. with full code. Book.rb is an empty model, except the :attr_accessible fields

EDIT: Ajax response:

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";

EDIT: this is Rails 3.2.8

Answers


Try adding the following block to your search action:

respond_to do |format|
  format.js
end

Also, replace the line in search.js.erb to look like:

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

Update:

It looks like the real problem (assuming there are no other syntax issues) is that innerHTML is not supported by all browsers (See this)


Need Your Help


About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.