CODEWITHSUNDEEP
jqueryruby-on-railsruby-on-rails-3
Tim
Tim

Reputation: 6209

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

Upvotes: 1

Views: 871

Answers (1)

prusswan
prusswan

Reputation: 7091

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)

Upvotes: 2

Related Questions