RailsでAngularJSを使ってTodoアプリを作成 - 1. AngularJSのインストール方法 - Rails Webook
「RailsでAngularJSを使ってTodoアプリを作成」する連載記事を書いてみました。 「RailsでAngularJSを使ってTodoアプリを作成」の連載１回目です。 まずは、Getting Startedとして、RailsプロジェクトにAngularJSを導入する方法を説明します。 連載記事一覧 Demo - Todoアプリケーション 1. AngularJSのインストール方法 2. UI Bootstrapのインストール方法 3. AngularJSのコントローラーの作成 4. ngResource + RailsでAPI作成 5. ngRouteでシングルページにする 6. AngularJS + Ransackで検索機能を実装する 7. AngularJS + Kaminariでページネーション機能を実装する 8. AngularJSで編集可能(Editable)なフィール
link_to, link_to_function での「戻る」リンク - わからん
「戻る」リンクは、link_to ヘルパーで次のように作ることができます。 link_to "戻る", :back これは、@controller.request.env["HTTP_REFERER"] || 'javascript:history.back()' です。複数画面の共通部でこれを使っていると、どんどん戻るのではなく、行ったり来たりすることになります。request.env["HTTP_REFERER"] を意図していないなら、link_to_function で次のように書けます。 link_to_function "戻る", "history.back()" ただし、たいていの場合、戻り先の *_path をアクションでインスタンス変数に格納しておくなどして、それを使う方がよいと思います。
RailsでJavaScriptテンプレートを書いていたら混乱して来たのでまとめ [俺の備忘録]
Google+ボタン はてなブックマークボタン 更新日時: 2013年03月18日（月） 作成日時: 2013年03月18日（月） 前の記事 / 次の記事 混乱の原因は JavaScript と CoffeeScript と Erb と Haml が共存してること。 おさらい ビューテンプレート $ vi call_ajax.html.haml -# haml =link_to("ajaxな処理", "path_to_excute_ajax", data: {remote: true}) JavaScriptテンプレート （アクション名が"excute_ajax"だったらデフォルトで"excute_ajax.erb.js"が呼ばれる） $ vi excute_ajax.erb.js alert("called!"); jQueryと組み合わせて $ vi excute_ajax.erb.j
Turbolinksをオフしないためにやった事 - Qiita
fetchReplacement失敗時は再度レンダリングされ, landingの状態になる。 よく出てくるおまじない $(document).on 'ready page:load', -> これはjqueryが提供する'ready'とTurbolinksが提供する'page:load'の両方で定義すること。 非Turbolinks遷移時は'ready'で発火。 Turbolinks遷移時は'page:load'で発火の両方をカバーするという意味。 Turbolinksをサポートしていないブラウザでも'ready'が発火するので安心。 jquery-turbolinks gem 'ready'triggerにpage:loadを追加してくれる機能を提供。 Trigger tips 通常、page:changeでaddEventListenerしてはいけない。 fetchHistoryの際に
俺の最近のRailsのJS開発環境を教えてやる - Qiita
こうやってるだけでも出力されたhtmlにはscriptタグが30個ぐらいならんでて、ページの読み込みに10sec以上かかる。 だけど、単にapp/assets/javascriptsをgulp watchとかはしたくない。 なぜならビルドはブラウザのリロード時に変更がある場合だけして欲しかった。 あとwindow.AppNamespace以下にモジュール追加していくのも辛い。 モジュール同士の依存関係もよくわかんないし、何よりwindow.AppNamespace.Modules.UserList.ItemViewとか長すぎ！ browserify-railsってやつ使ってみた browserifyがrailsの仕組みの中で動くようになる。 browserify-rails/browserify-rails https://github.com/browserify-rails/brows
[rails] htmlテンプレートをレンダリングしてjs.erb内で使用する。
Rails3のlink_toや、form_for、form_tagで:remote => trueを指定すると、 デフォルトでdataType=jsでリクエストが発行される。 この場合、コントローラは、jsとして応答したいが、jsでページの一部のコンテンツを更新したい時、 更新内容は、html.erbとして定義しておきたい、という場合がある。 js.erbの中で、html.erbをレンダリングした結果を使用するには、 $("some_element").html("<%= escape_javascript(render(:partial => 'some_partial_html')) %>"); のように、escape_javascriptヘルパを利用する。
Turbolinksさんと上手く付き合う10の方法 - Qiita
Ruby on Rails Advent Calendar 2014の６日目です。 概要 Turbolinks ONのRails案件を２つこなして得たTurbolinksを使うときの知見を共有します。 おまだれ ハートレイルズという会社で働く受託開発Railsエンジニアです。 Rails歴１年ぐらい。お仕事で半年ぐらい。 その前は選ばれた人だけの転職サイトをjavaで作ってました。 Turbolinksさんと上手く付き合う１０の方法 1. 学ぶ。 Turbolinksについて 「rails newしたら真っ先にGemfileから外すやつでしょ？某podcastの最近の回でゲストの人が言ってたよね」 「$(document).ready」が呼ばれないアレでしょ？」 「$(document).on 'ready page:load'使えばとりあえず問題なくなるアレでしょ？」 という認識で気軽に
Railsでページ遷移時に何故かJavaScriptが起動しない時 - Qiita
症状 Rails4でJavaScript書いてる時に「リロードするとJS走るんだけれど、普通のページ遷移（特にgetリクエストの時)にJSが走らない。ベタ書きしただけのalert("hello")すら出てこない」という状況に遭遇することがあります。 HTML見てもちゃんとJSファイルがロードされているし、動かない理由が無いしリロードすると走る。でもリンクをクリックして移動してる時には何故かJavaScriptが起動しない。 原因 可能性の一つとしてturbolinksを疑ってみましょう。 turbolinksはRails4の高速化の為に導入された機能で、リンクを踏んだ時にページを普通にロードする代わりにJavaScriptでAjaxして何か上手いことしてくれる機能です。 でもコイツが動いてるとデフォルトではjQueryが思い通りに動かなくなる事があります。 解決策 そういう時はここに書いて
RailsでのjavaScriptについて | Rails日本語ドキュメント | Ruby STUDIO
このガイドでは、簡単にリッチなAjaxアプリケーションの構築を可能にする、 Rails組み込みのAjax/JavaScriptの機能について説明します。 このガイドを読むことで、次の事が学べるはずです。 Ajaxの基本 控えめなJavaScript Railsの組み込みヘルパーはどのように手助けしてくれるのか。 サーバーサイド上でのAjaxの扱い方について ターボリンクス(Turbolinks)Gemについて 1. Ajax入門 2. 控えめなJavaScript 3. 組み込みヘルパー 4. サーバーサイドに関する事について 5. Turbolinks 6. その他のリソースについて 1. Ajax入門 Ajaxを理解するには、始めにWebブラウザが通常何を行っているのかを知らなければいけません。 http://localhost:3000と、ブラウザのアドレスバーに打ち込んでEnter
Ruby on Rails 3 でAjaxを扱うための基礎 - 戯言メイテル
やりたいこと Rails3でAjaxを扱うための基礎として、メソッドをAjaxで呼び出し、取得データをViewに反映するところまで。 方法 「:remote => true」によりlink,formをAjax化し、Ajax用のerbファイルを作成する。 linkをAjax化 $ vi app/views/chapters/show.html.erb <%= link_to 'ツイート取得処理(Ajax化)', { :controller => 'chapters', :action => 'tweets' }, :remote => true %> Ajaxにより呼び出されるメソッドを修正 $ vi app/controllers/chapters_controller.rb # Ajax処理によるツイート取得のためのメソッド def tweets @tweets = Tweet.find
Railsのformで:remote => trueして楽しくAjaxする - i'mimi
2014-08-22 Railsのformで:remote => trueして楽しくAjaxする 【書きかけかも】 Railsのformで、シンプルに画面遷移なくAjaxで登録・表示を行う方法。 さらにparticalを使ってすっきり。 他に正しいやり方があったらおしえてん。 xxx.html.erb 重要なのは、form_tagに「:remote => ture」を追加すること。 RailsさんありがとうこれだけでAjax通信にしてくれる <%= form_tag ({:controller => "コントローラー名",:action => 'yyy（Ajax通信をキャッチするアクション名）'}), :remote => true, :id => 'new_entry' do %> <%= hidden_field_tag :authenticity_token, form_aut
Rails3.1でAjaxを使う - ひげろぐ
よく理解できていなかったのでチュートリアル的に整理した。 まずはチュートリアル用のアプリを新規作成して、コントローラーを一つ作る。 rails new ajax_tutorial cd ajax_tutorial rails g controller sandbox index update_time Ajaxなフォームやリンクを作成する form_forやlink_toといったヘルパーのオプションに:remote => trueを加えるとボタンを押した時やリンクをクリックした時のリクエストが非同期リクエストになる。 app/views/sandbox/index.html.erb <h1>Sandbox#index</h1> <%= link_to('update time', {:action => 'update_time'}, :id => 'update-time-link',
Ruby on RailsのAjax処理のおさらい - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 何気に、アプリケーションで取り扱うデータ量が増えた場合や、大容量データをデータベースとやり取りする時なんかは、Ajaxを使ってデータ通信をバックエンド側に押しやることで、WEBフロント側のUXからパフォーマンスの悪さを改善できたりする。また、ネットワーク経路的にproxyサーバとかを中継するような環境間でデータのやり取りをする場合などに、proxy側で接続時間にリミットがかけてあったりすると、通常アクセスではデータ通信時間がリミットに達して503エラーとかになってしまうような処理でもAjaxで通信をバックエンド化することで、回避できたり
Railsでtypeahead.jsを使ったオートコンプリート機能（入力補完機能）の実装手順
はじめに Railsアプリ内の入力フォームでユーザの入力に合わせた候補を表示するオートコンプリート機能をTwitter社が提供しているtypeahead.jsを使って実装したのでその手順をメモしておきます。 やりたいこと 以下のgifのように、ユーザがフォームで入力を行った時に、その入力内容に合わせた候補を自動で表示するというオートコンプリート機能を実装します。以下のようにNameのテキストフィールドではNameの候補を表示し、EmailのテキストフィールドではEmailの候補を表示できるようにします。なお、以下の例では新規ユーザ作成フォームでの名前とE-mailの入力に対してオートコンプリート機能を実装した例になりますが、これ自体は実用上はなんの意味もないです。 このような機能をお手軽に実装するのにtypeahead.jsというライブラリをTwitter社が提供しているので、これを使いま
Rails/jQuery UI AutocompleteでDBデータからオートコンプリート
Rails でオートコンプリート機能を実装する機会があり、jQuery UI Autocomplete を使って実現したので備忘録メモ。オートコンプリート機能とは、Google の検索窓でも表示されるような、入力済みの文字列を元に候補のメニューを表示して入力を補完してくれる機能です。Rails 用には jquery-ui-rails という gem があるので、それを利用させて頂きました。 Autocomplete | jQuery UI joliss/jquery-ui-rails Ajax による通信で、サーバーのDBテーブルからオートコンプリートの候補を取得して表示します。 — 環境 — Rails 4.1.6 jquery-ui-rails 5.0.5
rails3-jquery-autocompleteで入力補完機能（オートコンプリート）を実装する - コバログ
rails3-jquery-autocompleteを利用して オートコンプリートで入力補助 DBにはそのオブジェクトのidを保存 を実装しました。 環境 rails3-jquery-autocompleteですが、rails 4.2.3でも動作しました。 インストール 以下をGemfileに追記してbundle install. gem 'rails3-jquery-autocomplete' インストール $ rails generate autocomplete:install application.jsに以下追記する //= require jquery-ui //= require autocomplete-rails 実装 Itemを登録する場面で、カテゴリをオートコンプリートで入力するような場合です。 （すでにCategoryモデルは作成してある前提） routes.rb
suggest.jsとrailsで補完候補表示 - OneRingToFind
あまりにあっけなかったので意外。30分くらいでできた。 http://www.enjoyxstudy.com/javascript/suggest/ 入力内容をもとに検索を行い、補完候補を表示します。(Google Suggestぽく) Ajaxでは無く、初回画面表示時のみデータの読み込みを行い、それ以降は、クライアント側で対象データから検索します。したがって、入力内容に変化があってもサーバ側にアクセスすることはありません。 検索は、前方一致/部分一致、大文字と小文字の区別あり/なしといったように、オプションで簡単に指定できます。また、その他にも様々なオプションが指定可能です。 検索結果の表示上限を指定できます。(デフォルト上限20件) 補完候補はキーボードの上下と、マウスにて選択できます。また、キーボードで選択中にESCキーでキャンセルといったような操作も可能です。 スペース区切りで、複
ラジオボタンをクリックするとアクションを呼ぶようにする | 超ド素人のRuby on Rails挑戦日記
一定期間更新がないため広告を表示しています
uu59のメモ | RailsとJS(vue.js)の連携
前書き Railsを使いつつJSもそこそこ書きたい、という条件であればまず前提としてjQuery脳を捨てましょう。jQueryスタイルで考えるかぎり何をどうやっても破綻するのでJSを諦めるか保守性を諦めるかして覚悟を決めましょう。 捨てるのは「jQuery」ではなく「jQuery脳」です。jQueryでグローバルな領域に進出してメソッドチェインで狼藉を働いたり、いま現在目の前にあるHTMLだけを考えてDOM操作をしたり、$.onと$.triggerを使ったクロージャ内部へのGOTOなどを記憶から消しましょう。 可能な限りスコープを小さく保つのはプログラミングの基本原則といえます。その原則を思い出し、JSを軽く扱わず、一般的なプログラミングと同様に閉じられた関心事にのみ注力するようにしましょう。 RailsとJSと役割分担 Railsもviewとしてテンプレートエンジンの処理を持っていますが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rails4 でページ遷移したら JavaScript が読み込まれてないとなった時 - Qiita
