ボタンにローディングアイコンを埋め込んでくれるLaddaをRailsで使う - Qiita意外に日本語情報がなかったのでまとめておきました。 Laddaとは ボタンにローディングアイコンを埋め込んでくれるプラグインです。DEMOを見ればどういうものかすぐにわかると思います。 http://lab.hakim.se/ladda/ https://github.com/hakimel/Ladda 注意事項 Laddaですが、IEは9以上がサポート対象のようです。 インストール手順 Gemがあるのでそれを使います。 Gemfileに以下を追加してbundle install
【Rails】コピペでできる！Ajaxローディングの実装 - Qiita
はじめに Ajaxでローディングを実装したいということはしばしばあると思います。 が、ローディング画像を探したりどんなコード書けばいいのか少し迷ってしまうのも事実。 なので備忘録的にまとめておくことにしました。 Rails(Slim, Sass, CoffeeScript)で利用しましたが、他でも問題なく使えるかと思います。 アウトライン 以下のステップでやります。 Ajax通信中にloadingの文言が出ることを確認(JS) ローディングgifを用意する パーシャルに切り出す CSSを実装 Ajax通信中はページの上下左右中央にローディングgifが出るイメージです。 1. Ajax通信中にloadingの文言が出ることを確認(JS) Slimで以下の記述をします。 場所はどこでもいいですがレイアウトファイルに書くことにしましょう。
Ajaxが発生したら、ローディング画像(gifアニ)をオーバーレイで表示[For Rails]
今回はAjaxの通信中は、gifアニメーションのローディング画像とオーバーレイで表示した背景の上に載せる方法です。 一般的に見かける方法ですが、結構簡単に実装できるのでもし良かったらぜひチャレンジしてみてください。 😎 ローディング画像gifアニメーションの調達gifアニメーションのローディング画像は次のサイトなどで無料で簡単にダウンロードできます！ Chimply generates your images Preloaders.net - AJAX loading GIF and APNG spinners, bars and 3D animations generator ダウンロードしたら、app/assets/images配下のフォルダに保存。 🐯 Gemのインストール次に『Colorbox - a jQuery lightbox』の入ったgem『stevo/colorbox
![Ajaxが発生したら、ローディング画像(gifアニ)をオーバーレイで表示[For Rails]](https://cdn-ak-scissors.b.st-hatena.com/image/square/c2ea7e72d0d7f3ba6c237909f321e67ffbdaa24e/height=288;version=1;width=512/https%3A%2F%2Fmorizyun.github.io%2Fimg%2Fog_image.png)
Highcharts :Uncaught TypeError: $(...).highcharts is not a function
Getting this error while running a HighCharts in my JSP Application. Uncaught TypeError: $(...).highcharts is not a function(anonymous function) @ VendorReports:125n.Callbacks.j @ jquery-1.11.0.js:893n.Callbacks.k.fireWith @ jquery-1.11.0.js:928n.extend.ready @ jquery-1.11.0.js:982K @ jquery-1.11.0.js:989 Please suggest what to do <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jq
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
Rails で JavaScript を利用する - Railsガイド
本ガイドでは、JavaScript機能をRailsアプリケーションに統合する方法について解説します。外部のJavaScriptパッケージを利用する場合に使えるオプションや、RailsでTurboを使う方法についても解説します。 このガイドの内容: Node.jsやYarnやJavaScriptのバンドラーを使わずにRailsを利用する方法 JavaScriptをimport maps・bun・esbuild・rollup・webpackでバンドルする新規Railsアプリケーションを作成する方法 Turboの概要と利用法 Railsが提供するTurbo HTMLヘルパーの利用法 1 import maps import mapsは、バージョン付けされたファイルに対応する論理名を用いてJavaScriptモジュールをブラウザで直接importできます。import mapsはRails 7から
Railsのデバッグを助けるgems - Qiita
引用元 #402 Better Errors & RailsPanel - RailsCasts Better Errors RailsPanel 超有名gemなので今更感ですが、エディタの設定でコードに飛べるところと、Ajax 時の Better Errors の見方を知らなくて「おお！」と思ったので、メモ。 参考：Gems - すべてのRailsプロジェクトでいれておくべき7つの開発用Gem - Qiita BetterErrors BetterErrors エディタの設定 エディタ設定してあれば、エラー画面の赤四角で囲ったファイルパスのリンクをクリックで、該当のコードを開いてくれる。 設定方法 MacVim の場合の例
Rails で ajax を使おうとしてformat.js 指定しているのに、なぜか htmlが返ってしまう状態になった時・・ - Qiita
create.js.erbはJavaScriptなので、JavaScriptの alert メッセージとか入れてみると、呼び出されたかそうでないかすぐわかる。 メッセージが表示されなければ、このファイルは読み込まれていない。 （表示されなかった） 確認その２ その１で確認できてるので、もうその２まで確認しなくていいんだけど・・・ Ruby - Railsのデバッグを助けるgems - Qiita で入れた、RailsPanelで呼び出されたコントローラーと、レンダーされた結果が確認できる。 正しくAjax呼び出しできてる場合はこんな感じ create.js.erbが返ってくるのを期待している。 間違ってる状態 Format は js なのに、何故か返っているViewは create.html.haml 原因 create.js.erb の置き場所が間違ってた；； 正：app/views/u
Railsでフォームを非同期で送信して更新処理を行う - (define -ayalog '())
タイトルママです。 Railsアプリを書いていて、画面遷移を起こさずに更新処理を行って画面にも反映させたかったのでざっくりやってみた。*1 例として適当に簡単なアプリケーションを作りたいと思います。 rails new test-app rails g model user name:string age:integer rake db:migrate rails g controller users index createユーザーを追加して一覧表示するだけのアプリです。超簡単。 ユーザーは名前と年齢の項目を持っています。コントローラは一覧表示用にindexアクションとユーザーの追加用にcreateアクションでいいでしょう。 あと、個人的な好みでhamlを使います。 #Gemfile gem 'haml-rails' あくまでも僕の好みなので、すっ飛ばしても構いません。 次にconfig
JS形式のレスポンスと remote: true を使う - Qiita
Railsで、とてもスマートにAjaxできる方法が判ったので、メモです。 判ったらすごく使いやすいのですが、理解できるまでずいぶん迷走しました。 やりたいこと 表の一部をクリックすると編集モードになって、確定ボタンかなんかでまた表示モードになるようなやつ。 Viewを partialで作っといて、その部分だけ更新かかるようにしたい。 ポイント レスポンスを JS形式で返す！ Viewにこんな感じのjQueryのコードを書くことで、ページの一部分だけ更新できました。
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
RailsでAjaxを使ってインクリメンタルサーチ - Qiita
案外簡単にできたよ。 User.nameをインクリメンタルサーチする想定。 まずroutesに一覧表示用のindexとAjax用のajax_user_listを設定
Rails3でAjax処理をするRails3っぽい方法 - (ﾟ∀ﾟ)o彡 sasata299's blog
2012年09月18日11:21 Ruby JavaScript Rails3でAjax処理をするRails3っぽい方法 Rails3でAjax処理するときって、このように :remote => true を指定しますよね。 = link_to 'link', ajax_path, :remote => true そうするとajax_path（この場合は ↓ のajax#sample）にAjaxリクエストが送られます。 class AjaxController < ApplicationController def sample respond_to do |format| format.html # sample.html.haml format.js # sample.js.haml end end end 通常、Ajax処理はjsとして処理されるため、sample.js.hamlがレ
Turbolinksをオフしないためにやった事 - Qiita
この記事は Turbolinks v2.2.0 時点のものです Turbolinks Classic is now deprecated Rails4系で使われていたTurbolinksはturbolinks-classicと命名が変更されました。 Rails5ではVersion 5 として turbolinks のversion ~> 5.0 が使われます。動作としては似てますが内部の実装が大きく変わっているので注意してください。 Turbolinksとは TurbolinksはRails4.0からデフォルトで導入されたgem railsアプリケーションを 簡単に pjaxっぽくすることが出来る。 ajaxとhistoryAPI(popState, pushState)を利用して画面遷移 Turbolinksで遷移する場合は、titleとbodyとcsrfトークンを変更する csrfトー
jQueryのDeferredを用いたモダンなAjax処理の書き方 - Hack Your Design!
jQuery 1.4以前の書き方 jQuery 1.5以上の書き方 jQuery 1.8以上の書き方 【発展編1】Deferredを用いた書き方 deferredとは何か？ 【発展編2】$.when() を用いた書き方 参考 本エントリは軽めのjQuery Advent Calendar 2012の14日目の記事として書きます。軽めといいながら少し重めになってしまった感がありますが、初めてのAdvent Calendar参加ということでご勘弁を。 ※ Twitter API仕様変更によりTwitter APIを使ったコード例は現在動作しなくなっていることにご注意。 jQuery 1.4以前の書き方 まずは、少し古めのコード、昔のjQueryの本とかでよく見る書き方。 $.ajax({ url: "ajax.html", success: function(data) { alert('su
jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
Ruby on Rails - jQuery で Ajax 処理（遅延読み込み）！
mk-mode.com Linux, Debian, IT, Server, PG, Ruby, Rails, Python, C++, Fortran, PC, MariaDB, math, GIS, etc... Ruby on Rails アプリを作成していてあれこれと機能が追加されていくと、当然ながらだんだんと動作が重くなっていきます。 そこで、ページ表示時に処理に若干時間のかかる部分を遅らせて表示する方法を取り入れました。 ちなみに、当方の Ruby on Rails 製の Webサイトでは、既に以下については jQuery による処理を導入しています。 ヘッダ部のサイトタイトル部分のボカシ処理 （CSS でも可能だが、W3C でエラーとなるため） ページ下部へスクロールした場合に表示するページの上部へ移動するボタン また、別のアプリでは１つ目のセレクトボックの値を変更したら、２
spin.js
Share it! If checked, the option values will be stored in the URL so that you can easily share your settings. Features No images No dependencies Highly configurable Resolution independent Uses CSS keyframe animations Works in all major browsers Includes TypeScript definitions Distributed as a native ECMAScript module MIT License Spin.js dynamically creates spinning activity indicators that can be
Fast & Secure Free Premium VPN Service | Free VPN Portugal
PALADIN VPN Free VPN for Portugal to protect your privacy Why use a VPN? There are many reasons to use a VPN below we summarized the most important reasons. Protect your privacy and identity Security on public wifi Security when working remotely Access any content from anywhere Protect your data from governments, service providers, and apps According to Wikipedia A virtual private network (VPN) ex
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Turbolinksを調べてみた
