Railsのajax処理で部分テンプレートのみ更新する方法が便利 | EC-CUBEな日々
railsで開発していると、ajaxで更新する処理を行うことがよくあります。 そんなとき、結果を受け取ってjQueryなどで値を操作して画面の一部分に更新内容を反映させるといった処理はよく行います。 そんなとき、一部の部分テンプレートだけ更新できれば便利だと思うことがよくあったのですが、そんな方法がちゃんと用意されていました。 今日はこの部分テンプレートのみ更新する処理について書こうと思います。 実はこの方法はcoffescriptにコードを書かなくてもすむ利点も有ります。Railsで開発を進めていると、Coffeescriptにコードを書くとコードが分断される感じがして、ちょっとやりづらい部分がありました。coffeescriptに処理を書かなくて済むためコードの可読性もあがるメリットもあります。 この方法のカギは、ajaxリクエストのレスポンスはjsファイルで受け取れるという点を使って
Rails に XML をボディとするリクエストを JavaScript で送る - 情報と音楽
これは主に ActiveResource のための仕様だろうが、XML によるレコードのエクスポートとインポートを行う目的で、同じインターフェイスを HTML から使いたいと考えた。 JavaScript によるリクエスト HTML の form で Content-Type を application/xml にすることはできない (よね?) ので、jQuery を使って JavaScript で送る。 // url に URL 文字列、 // xml に XML 文字列が格納されているものとする。 $.ajax({ type: "POST", url: url, dataType: "xml", // Accept ヘッダをセットする。レスポンスを XML で受けとるなら必要。なくてもよい。 contentType: "application/xml", // Content-Type
jQueryでdocument.getElementByIdしたいです - ゆとり日記
どうも、jQuery初心者です。 今更仰々しく書くような事でもないんですが、知らなかったことなので一応・・。 jQueryでdocument.getElementByIdするにはどうするか？ JavaScriptであれば、下記のように書けば指定したIDのエレメントが取得出来ます。 var element = document.getElementById('hoge'); jQueryで同じようにエレメントを取得しようとして書いたのが下記のコード。 $('#hoge'); しかし、想定した動きをしてくれません。それは何故か？ 上記のjQueryのコードは生のエレメントではなく、jQueryのオブジェクトを取得してしまっているためです。 jQueryでエレメントを取得するためには、以下のように記述する必要があります。 // 書き方は二通り $('#hoge').get(0); $("#hog
RailsをバックエンドにしたFlux(React + Alt)を試してみる | DevelopersIO
丹内です。 最近ReactJSを触り始めました。 掲題の通り、Railsをバックエンドにした場合のFluxを書いてみたのでまとめます。 このエントリの参考URLにあるリポジトリを参考にしました。 バックエンド 普通のRailsアプリです。Scaffoldをベースに、フロントエンドを書いていきます。 db/migtate/create_books.rb class CreateBooks < ActiveRecord::Migration def change create_table :books do |t| t.string :title t.timestamps null: false end end end BooksController#index 今回、ブラウザで/booksにアクセスした時に、最初に空っぽのHTMLを返し、ReactJSでAjaxリクエストによってデータを取得
jQueryでajaxを投げるメモ [俺の備忘録]
Google+ボタン はてなブックマークボタン 更新日時: 2013年12月18日（水） 作成日時: 2013年06月09日（日） 前の記事 / 次の記事 参考ページ jQuery.ajax()のまとめ $.ajax中のcontextオプション $.ajax を使う。 # CoffeeScript $.ajax async: true type: "GET" url: "http://inchiki.jp" dataType: "text" context: this success: (data, status, xhr) -> alert status error: (xhr, status, error) -> alert status complete: (xhr, status) -> alert status async true => 非同期処理する false => 同期処
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)
Rails / Ajaxを使って画面遷移しない一時保存機能をつける
先日つけてみたソーシャルボタンですが、やっぱ数字が出るってモチベーションになっていいね。 意外とPocketも多いんだなぁ。 今回もまたRails。 投稿サイトとかでよくある、一時保存機能をやってみた。文章書いていると、何かの拍子で「あ！」てなることが多いから、あるとユーザーに優しい。 フォーム <div class="blog-form"> <%= form_for(@post) do |f| %> <%= f.text_field :tilte %> <%= f.text_area :body %> <!-- for temporal saving --> <div class="create-temp"></div> <%= f.submit "送信する" %> <% end %> </div>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
