Rails3でAjaxを使いたい

質問

どなたが知識をご教授下さい。
Rails3でAjaxのごく普通のハイパーリンクを作成したいのですが、うまくいきません。

/users/index.html.erb
<div id="hoge">
<%= link_to "ajax",{:action => 'draw'},:remote => true %>
</div>

--

/users/_draw.html.erb
~いろいろ内容~

--

/users/draw.js.erb
$('#hoge').html("<%= escape_javascript(render :partial => 'draw' )%>");

--

/users_controller.rb
def draw
~いろいろ処理~
end

--

ルーティング
match 'users/draw' => 'users#draw'

--

application.html.erb
<%= javascript_include_tag :defaults %>

--

gemfile
gem 'jquery-rails'

以上のように処理するよう様々なサイトや書籍にはありましたが、「Templete Missing」のエラーが出てしまいます。かれこれ５時間以上ハマってまして、、、
どなたか知識をご教授頂けたら幸いです。
＊メモ
アクションdrawに渡ったときに、
「request.xhr?がfalse」ということは、ajax通信できていないということでしょうか？？？

回答No.1

tatsu99 · ベストアンサー

こちらの環境では、正しく動作しています。
CentOS release 5.6 (Final)
Rails 3.0.10
ruby 1.9.2p180 (2011-02-18 revision 30909) [i686-linux]

request.xhr?はこちらではtrueになっています。
ですので、rails.jsとjquery.jsの何れかが不正のような気がします。
念のため、以下のようにしてみてください。
（ファイルを置き換えるので、バックアップは取っておいてください）
１．jqueryをダウンロード
http://docs.jquery.com/Downloading_jQuery
jQuery CDN
jquery-1.6.4.min.js をダウンロードし、 jquery.jsにリネームする。
２．jquery用のrails.jsを使う。
https://github.com/rails/jquery-ujs/tree/master/src
からダウンロードする。
３．publicのjavascripts下に以下のファイルがあるので削除する。
prototype.js controls.js effcts.js dragdrop.js
４．ダウンロードした
jquery.js と rails.js をpublicのjavascripts下に配置する。
(rails.jsは上書きする）

上記のようにしてやってみてください。そのようにすると、こちらでは正しく動作します。
特に、prototype.jsとjquery.jsは共存させないほうが安全です。

お礼

ご教授ありがとうございます。

Started GET "/users/draw" for 127.0.0.1 at Sun Oct 30 18:56:48 +0900 2011
Processing by UsersController#draw as JS
-もろもろ処理-
Rendered users/_draw.html.erb (0.6ms)
Rendered users/draw.js.erb (2.3ms)
Completed 200 OK in 148ms (Views: 14.1ms | ActiveRecord: 2.4ms)

と、正常っぽい動きになりました！！！！ありがとうございます！

ですが、依然画面が切り替わりません。。
（ちなみにrequest.xhr?は、今は0でコンソールに表示されています。。）

何か、思い当たることはありませんか？？？

回答No.2

tatsu99

#1です。
＞ですが、依然画面が切り替わりません。。
＞（ちなみにrequest.xhr?は、今は0でコンソールに表示されています。。）
＞何か、思い当たることはありませんか？？？
まず、request.xhr?は、今は0でコンソールに表示されていますとのことですが、
これは、trueかfalseのはずです。（こちらはtrueで表示されます）
コントローラの
def drawのメソッドの中で
p request.xhr?
とすると、その内容が表示されますが、その結果が0なのでしょうか？

依然画面が切り替わりません。ということですが、
ajaxは、同一画面で、画面内の一部を更新する機能です。
ですので、その前提で回答します。（質問者様が全く別の画面に切り替わることを期待はしていないと理解しています）
今回、切り替えの対象になるのは、
<div id="hoge">
<%= link_to "ajax",{:action => 'draw'},:remote => true %>
</div>
のhogeのＩＤを持つ部分です。
ですから、上記の定義ではなく、
<div id="hoge">ＸＸＸＸ</div>
<%= link_to "ajax",{:action => 'draw'},:remote => true %>
のように定義し、
ＸＸＸＸの部分を
$('#hoge').html("<%= escape_javascript(render :partial => 'draw' )%>");
で、置き換えることになります。
users/_draw.html.erbの
~いろいろ内容~
の部分が、置き換えの対象になります。

１．コントローラのdefメソッドの全て
２．以下のview
/users/index.html.erb
/users/_draw.html.erb
/users/draw.js.erb
の<div id="hoge"に関する部分の全て
が提示されれば、問題が解決するかも知れません。

お礼

どうもご返事ありがとうございます！
解決致しました！！
＃１さんがおっしゃるように、/users/draw.js.erb
を開示すべきでした。。お手数おかけして申し訳ございませんでした。
結局/users/draw.js.erbの中で、別の関数を読んでいたのですが、記述方法に誤りがありました。。

以後、内容は詳しく記載するように致します。それにしてもprototype.jsとjquery.jsが共存するだけで動かない、rails.jsを書き換える、こういったことまで頭がまわらず、一人では解決できなかった部分でしたので、知識をご教授頂けて幸いです！！

どうもありがとうございました！！