Rails 3での動的更新について

このQ&Aのポイント
  • Ruby on Rails 3 を利用してウェブ開発をしているが、Rails 2 の時の動的更新ができない。
  • 動的更新とは、入力があるとそれを検知し、処理を呼び出して結果をページの一部として表示すること。
  • Rails 2 では JavaScript を使用していたが、Rails 3(jQuery)では方法が異なる。
回答を見る
  • ベストアンサー

Rails 3 での動的更新について

Ruby on Rails 3 を利用してウェブ開発をしているのですが、Rails 2 の時に利用できた動的更新が出来なくて困っています。 今回の質問の動的更新とは、テキストフィールドなどに入力があるとそれを検知して、コントローラー内の処理を呼び出して結果をページの一部として表示する、というものです。 Rails 2 の時には以下のようにしていました。 <script language="JavaScript"> <!-- function ShowRule() { $("#show_value").load("/[コントローラー名]/[メソッド名]?[パラメーター]="+document.[フォーム名].[ポスト名].value); } //--> </script> 値を返したい部分に <div id="show_value"></div> を置き、入力を監視したい項目に :onclick => "ShowRule()" のオプションをつけていました。 同じように記述したのですが、Rails 3(というか jquery)だと上手く動きません。上記のような処理を jquery で行う方法をご教授ください。 よろしくお願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

動かないなら何かしらエラーが出ていると思うのですがいかがでしょうか? 最近のブラウザならF12(win)を押せば開発者ツールが下に出るので、 そこにあるコンソールタブでJavaScriptのエラーが確認できます。 ぱっと見は問題なさそうなので 1. document.[フォーム名].[ポスト名] が間違っていてエラー 2. loadに渡しているURLが間違っている 3. Rails3の処理に問題がある のどれかかなと思います。確認してみてください。 こっちでもいいかも: $('フォームのセレクタ').click(function(){ $("#show_value").load("/[コントローラー名]/[メソッド名]?[パラメーター]="+ $(this).val() ); });

参考URL:
http://api.jquery.com/load/
xlx_hori_xlx
質問者

お礼

お礼が遅れて申し訳ありませんでした。 教えて頂いた事項を試すうちに、form のパラメータの与え方が、Rails 2 と 3 とで違うことが分かりました。具体的には <%= form_tag({:action => :regist,:name => "regist"},{:multipart => true}) do -%> と記述していたのは <%= form_tag({:action => :regist},{:name => "regist",:multipart => true}) do -%> と記述する必要がありました。 ヒントを与えていただきありがとうございました。

関連するQ&A

  • jquery-ui-rails 5.0.3 日本語

    いつもお世話になっております。 最近からRuby on Railsを始めました。 そこで、日付をマウス操作で入力するため、datepickerを導入したいと思い、 jquery-ui-rails 5.0.3をインストールしたところ日本語化する方法がわかりません。 お忙しい中、申し訳ありませんが、どなたか、ご教示ください。 【実行環境】 ・Windows7 ・Ruby2.1.5 ・Rails4.2.0 ・jquery-ui-rails 5.0.3 以上、宜しくお願いいたします。

    • ベストアンサー
    • Ruby
  • Ruby on Rails について

    Ruby on Railsでアプリケーションを作ります。 バージョンは:InstantRails-2.0-win 1、データベース表の作成: データベース名:myapp   テーブル名:peoples データベースを作成したら、MySQLを再起動します。 2、新規アプリケーションの作成: アプリケーション名:myapp Instant RailsウィンドウのIボタン⇒Rails Applications⇒Manage Rails Applicationsをクリックします。 Rails ApplicationsダイアログボックスのCreate New Rails App・・をクリックします。 コマンドプロンプト画面が表示されます。 rails myapp を入力します。 コマンドプロンプトのプロンプトが入力状態になって、コマンドプロンプトを閉じます。 Rails ApplicationsダイアログボックスのRefresh Listボタンをクリックしたら、myappアプリケーション名が追加されます。 3、アプリケーション・モデルの作成: InstantRails-2.0-winフォルダ ⇒ rails_apps ⇒ myapp ⇒ config ⇒ datebase.yml ファイルを開きます。 ↓に書き換えます。 development: adapter: mysql database: myapp timeout: 5000 username: root host: localhost   Instant RailsウィンドウのIボタン ⇒ Rails Applications ⇒ Open Ruby Console Windowをクリックします。 コマンドプロンプトが開きます。 cd myapp ruby script/generate model people を入力します。 4、コントローラの作成: コマンドプロンプトを開きます。 cd myapp ruby script/generate controller people を入力します。 コマンドプロンプトを閉じます。 InstantRails-2.0-winフォルダ ⇒ rails_apps ⇒ myapp ⇒ app ⇒ controllers ⇒ people_controller.rb ファイルを開きます。 class PeopleController<Application Controller scaffold :people ←←追加した行です。 end 5、新しいアプリケーションを起動 Rails ApplicationsダイアログボックスのRails Applications 欄の myappの所をチェックし、Start with Mongrelボタンをクリックします。 コマンドプロンプト画面が起動し、ポート番号が表示されます。 Webブラウザを起動し、アドレス欄に 一つは: 「http://localhost:people/list」を入力し、Enterキーを押します。 ↓Errorメッセージが表示されました。 NoMethodError in PeopleController#list undefined method `scaffold' for PeopleController:Class RAILS_ROOT: C:/taiyo/INSTAN~1.0-W/rails_apps/myapp   一つは: http://localhost:3000/people Enterキーを押します。 ↓Errorメッセージが表示されました。 NoMethodError in PeopleController#index undefined method `scaffold' for PeopleController:Class RAILS_ROOT: C:/taiyo/INSTAN~1.0-W/rails_apps/myapp どこの手順が違ってるのが解らなくて、 Errorの解決方法ですごく困ってます。 どうかご指導をお願いいたします。 もう一つはErrorメッセージの3行目は C:/taiyo/INSTAN~1.0-W/rails_apps/myappですけど、 InstantRails-2.0-winフォルダのはずですけど、 INSTAN~1.0-Wフォルダになった原因がよくわからないです。 すごく困ってます。 ご指導お願いいたします。

  • 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」のエラーが出てしまいます。かれこれ5時間以上ハマってまして、、、 どなたか知識をご教授頂けたら幸いです。 *メモ アクションdrawに渡ったときに、 「request.xhr?がfalse」ということは、ajax通信できていないということでしょうか???

    • ベストアンサー
    • Ruby
  • Railsで作ったものにdispatch.cgiがない

    Ruby on Railsで作成したものをApacheで動かそうとしたのですが、 「public/dispatch.cgi」などのファイルが存在しませんでした。 「.htaccess」も作成されていないようです。 InstantRails(Rails 2.0.2)で作成したものには上記ファイルは存在します。 何か必要なものがあるのでしょうか? 環境 -Windows XP + coLinux -Debian 5.0.2 -ruby 1.8.7 -rails 2.3.3 railsはapt-getとgemと両方入れています。 (どこかのサイトを参考にしたのですが、失念してしまいました・・・。) 入力 $ cd /var/www/rails $ rails myapp $ cd myapp $ script/generate scaffold note line:string $ rake db:migrate ls -a publicの結果 . 404.html 500.html images javascripts stylesheets .. 422.html favicon.ico index.html robots.txt

  • Rails2.3でのserver/script再起動について

    Rails2.3でのserver/script再起動について 2.2.2を利用していたのですが、2.3.5へアップデートしようとしています。 rails 2.3.5のインストールは無事、完了し、プロジェクトを作成しました。 controller名を「hoge」にて、server/scriptにてwebrickを起動しました。 次にcontrollerにて、indexアクションを作成し、viewにて対応するindex.html.erbを作成しました。 ブラウザにて、http://localhost:3000/hoge/indexにアクセスすると、 「Template is missing」となってしまいます。 webrickを再起動し、再度アクセスすると正常に表示されます。 rails 2.2.2までは、development環境下では、 viewのファイル追加では再起動が不要だった(config以下は必要だった)と認識しているのですが、 rails 2.3では再起動が必要になったのでしょうか?ちなみにmongrel 1.1.5で行っても同じでした。 どなたかご教授お願いいたします。

  • ruby on railsのエラーについて

    今、「ruby on rails」の勉強をしています。で、エラーについて質問なんですが、「ruby script/generate scaffold Article Admin」とコマンドプロンプト上で入力したのですが参考サイトのようにできません。 私の場合は、「対象のコンピュータによって拒否されたため、接続できませんでした。 - connect(2)」と最後にでて失敗します。 どうしたらうまく実行することができるのでしょうか?? 参考サイト(サイト上部): http://www008.upp.so-net.ne.jp/letitbe/rails003.htm

  • Rails3でのルーティングの書き方

    Ruby1.9.3とRails3.2.9の環境でのルーティングではまってしまっているので、御経験のある方、御教示ください。現在、 config/routes.rbに Sample::Application.routes.draw do resources :users resources :tasks match '/users/login' match '/users/logout' match ':controller(/:action(/:id))' match ':controller(/:action(/:id))(.:format)' end を記述して、WEBrickを起動して、 http://localhost:3000/users/login/ を実行すると、このアドレスには移動するのですが、 NoMethodError in Users#show Showing C:/user/Ruby193/rails/sample/app/views/users/show.html.erb where line #5 raised: のエラーが出ます。 WEBrickの表示を見てみると、 Started GET "/users/login/" for 127.0.0.1 at 2013-01-22 22:56:06 +0900 Processing by UsersController#show as HTML Parameters: {"id"=>"login"} Rendered users/show.html.erb within layouts/users (2.0ms) Completed 500 Internal Server Error in 5ms となっていて、/users/login/をGETしているのですが、アクションでshowが呼び出されて、そのIDとして loginが渡っているように見えます。 現在、users\controller.rbのshowの関数の定義は全てコメントアウトしています。usersコントローラの def login関数の定義と、app/views/users/login.html.erbも置いているのですが、それらが表示されない状態で原因が分かりかねています。 上記のルーティングの書き方に何か問題があるのでしょうか?

    • ベストアンサー
    • Ruby
  • Ruby on Railsで入力フォームを作成しています。

    Ruby on Railsで入力フォームを作成しています。 そこで、入力されたid(table.id)と商品名カラム(table.product_id) を結合して商品ID(table.product_number)を 登録時に商品IDカラムに登録できないかと思っています。 商品名カラムは商品テーブルから読み込んでいます。 恐らく、callbackのしくみを利用すればできるのではないかと 思っているのですが、やり方がわかりません。 以上、よろしくお願いします。 環境は以下のとおりです。 ruby1.8.6 rails 2.3.5 db:mysql gems:1.3.5

  • Ruby on Railsのmigrateについてです!

    初めまして、Ruby on Rails初心者の者です。 現在modelを5つ作成してあります。 そこで新たにmodel(6)を作成(コマンドプロンプトにて)したのですが、記述ミスがあったので今作成されたmodel(6)を削除しました。(データーベースからも) で、また同じ名前で作成したのですがエラーが何も表示されず、コマンドが入力できる状態になってしまいます。 ruby script/generate model モデル名  ↓正常 rake db:migrate  ↓何も表示されない コマンドが入力可能状態になる 何が原因なのでしょうか? 調べたのですが、私には分からずとても困っています 分かる方居ましたら、回答お願い致します。

    • ベストアンサー
    • Ruby
  • ajax を使って,htmlを読み込み表示する方法

    webページのfaqを作成しています。 目次が並んでいて,どれかひとつ質問をクリックすると,その下に回答が表示されるという仕組みにしようと考えています。 それについては以下のようにプログラムしてみました。 <head> ...略... <script type="text/javascript" src="../../jQuery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div.demo-show:eq(0)> div').hide(); $('div.demo-show:eq(0)> h3').click(function() { $(this).next().slideToggle('fast'); }); }); </script> </head> <body> <div class="demo-show"> <h3>質問1</h3> <div>"answer1.html"を読み込んで表示</div> <h3>質問2</h3> <div>"answer2.html"を読み込んで表示</div> <h3>質問3</h3> <div>"answer3.html"を読み込んで表示</div> </div> </body> これにhtmlファイルを読み込む機能を持たせるために,<script>に一番下の3行を追加しました。 <head> ...略... <script type="text/javascript" src="../../jQuery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div.demo-show:eq(0)> div').hide(); $('div.demo-show:eq(0)> h3').click(function() { $(this).next().slideToggle('fast'); $("div.a-1").load("./answer1.html"); ←追加 $("div.a-2").load("./answer2.html"); ←追加 $("div.a-3").load("./answer3.html"); ←追加 }); }); </script> <body>は <div class="demo-show"> <h3>質問1</h3> <div. class="a-1"></div> <h3>質問2</h3> <div.class="a-2"></div> <h3>質問3</h3> <div.class="a-3"></div> </div> これを実行すると,文字の場所がずれて表示されてしまいます。 (今回の作業は既に出来上がっているページに機能を追加しているので,おそらくタグが干渉しあっているのだろうと思います。これは,細かく確認すれば直るとは思います) その他,細々と不具合があります。 また,質問の数は50以上あります。 この方法以外に良い方法がありましたら教えていただけると助かります。 よろしくお願いします。

専門家に質問してみよう