タグ

Railsとjqueryに関するvivit_jcのブックマーク (6)

  • RailsでjQueryが動かないと思ったら

    Railsを使ってて忘れがちな点。 Turbolinks こいつがjQueryの動きを止めます。 といっても、ページ読み込みを劇的に早くしてくれる強い味方なので、是非とも使いたい。 ※ Rails4からTurbolinksはデフォルトGemになりました。 ※ Rails3でも使えます。もちろんRails4で使わないという選択肢もあります。 Turbolinksとは ページ上のリンクをクリックした時に、ページ全体をリロードさせるのではなく、bodyタグの中身とheadの中のtitleを同一ページ上で書き換える方法。 .jsとか.cssとか処理し直さないので、ページの読み込みがかなり早くなる。 ↓こんなにごちゃごちゃ読み込んでたのが… ↓こうなったり、、、するので早いのは当然。 問題 下のようにjQuery(coffee script)を書いている場合は動かない。

    RailsでjQueryが動かないと思ったら
  • Ajax 処理で .js.erb を使う書き方/使わない書き方 - わからん

    Rails3 の remote => true な Ajax 処理では .js.erb を使うか、JS で Rails が追加したカスタムイベントを使うのがレールにのった方法です。WEB+DB PRESS vol.58 詳解Rails3 p26 あたりの、簡易ブログアプリの一覧画面での Ajax 検索が .js.erb を使っていたので、カスタムイベント版にして動作を確認しておきました。 まずは index.js.erb を使わない場合。 ▼ posts/index.html.erb <%= form_for @search_form, :url => posts_path, :remote => true, :html => {:method => :get} do |f| %> <%= f.search_field :q %> <%= f.submit '検索' %> <% end %

  • RailsでAjaxリクエストが2回行ってしまうときにチェックすべき3つの事 - Qiita

    1. jQueryを2回読み込んでいないか確認する Rails3.1からAsset Pipelineが導入されたため、誤ってjQueryを2回読み込んでしまっている、なんて事故が起こりがちなようです。 まず、application.jsでrequire_treeしているときに、assets/javascript直下にjquery.jsを配置していないか確認する。 上記を確認しても解消しない場合は、rake assets:precompileしたデータがpublic/assets以下にないか確認する。2回jQueryを読み込んでしまっていたスクリプトがそのまま残っているかも知れません。あったら削除してしまいましょう。 再発防止のためにconfig/environments/development.rbに以下のコードを追加しても良いでしょう。

    RailsでAjaxリクエストが2回行ってしまうときにチェックすべき3つの事 - Qiita
  • Ruby on Rails3でlink_toでAjax処理

    rails3でlink_toタグを使ってAjaxを利用する場合のメモ書きです。 実行環境はruby1.9.3p0,rails3.2.2,postgres 難易度★★★☆☆ rail3でajax処理をおこなう時に一番困ったのが、ググるとremote_functionタグを使ったやり方が多かったことです。 この機能はrail2.Xまでは一般的だったらしい(知らないけど)のですが、remote_functionタグはrails3では利用できません。 色々と調査したのですが、rails3ではjqueryを使ってajax処理を行うのがよいみたいです。以下に実装してみました。 jqueryの導入 アプリケーションフォルダ配下のGemfileにjqueryの記述を追記します。 vi Gemfile gem 'jquery-rails' 保存したらjqueryファイルをインストールします。 bundle

    Ruby on Rails3でlink_toでAjax処理
  • link_to に :method => :delete を指定した時の動作 - happy lie, happy life

    以下 Rails 3.2.2 について記述します。 scaffold 等で作られる削除のリンクは次のようになっていると思います。 <%= link_to 'Delete', users_path(@user), :method => :delete, :confirm => 'Are you sure?' %> これと同じコードを手で書いて使おうとしたのですが、なぜか正しく動作せず、少しはまってしまいました。結論から言うと、このコードが生成するリンクタグを動作させるには最低限 jquery.js と rails.js を読み込む必要があります(もちろん、それらの動作に対応したブラウザを使う必要もあります)。 そういうわけで、上記のコードを用いる時はレイアウト等で <%= javascript_include_tag "application" %> と記述するのを忘れないように気をつけてく

    link_to に :method => :delete を指定した時の動作 - happy lie, happy life
  • フルAjaxで動くRailsアプリを作ってみたよ。 | Ginpen.com

    scaffoldを使うとCRUDが揃った「土台」を一発で作れるわけですが、それをアレコレして全ての操作をAjax化してみたので、手順をまとめました。 記事を読むのがだりぃって方はソースコードをGitHubで公開してるので、そちらをご覧ください。 RubyRailsもあんまり触った事がないので、識者によるツッコミ歓迎します。 (`・ω・´) 概要 やること indexの画面だけでCRUD、つまり新規作成 (Create)、表示 (Read)、編集 (Update)、削除 (Delete)を行えるよう、scaffoldで作成したファイルをいじります。 結論 form_for()にremote: trueを与えるだけで、とりあえずAjax化します。あとはサーバー側のレスポンスの内容を整えて、クライアント側で適切に処理してやればOKです。 作業 下準備(scaffoldとか) indexに編集フ

  • 1