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.


(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


(book_search_path goes here, to the 'search' action)

class BooksController < ApplicationController

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

def new 
    @books = Book.find :all

def search
    @results = search_keywords params[:title]
    # implicit render search.js.erb


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

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


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

- @results.each do |b| 
      - Rails.logger.info("Got title...#{b.title}")
      = b.title
      = 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


Try adding the following block to your search action:

respond_to do |format|

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

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


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.