前回は、CoffeeScriptの関数の使い方について書きました。 今回はお待ちかね、Ajaxです。 ダブルクリックして正方形を表示させたら、その位置をデータベースに記録して永続化することにしましょう。 Blockモデルの生成 まず、Blockモデルを生成します。 % rails g model block x:integer y:integer % rake db:migrate blocksコントローラの実装 次に、blocksコントローラを生成します。 % rails g controller blocks config/routes.rb を修正。 Toraja::Application.routes.draw do root to: "top#index" resources :blocks, only: [ :create ] end app/controllers/block
2011/5/10 以下の訂正をしました。 s/prefetch/preflight/g JavaScriptのクロスドメイン通信で微妙な話があったので書いてみます。ちなみにクライアントサイドJavaScriptの話です。下記仕様に敬意を表して以下ではクロスオリジンと書きます。一般にクロスドメイン通信と呼ばれているものと同じ意味で使います。 Cross-Origin Resource Sharing XMLHttpRequest2(XHR2) WebブラウザからXMLHttpRequest(XHR)で外部のWeb APIを直接叩こうとするとクロスオリジンの制限に当たります。制限の必要性は次の説明がわかりやすいのでリンクを張っておきます。 Same-Originポリシーの必要性 クロスオリジン制限がある中でWebブラウザから直接Web APIを叩こうと先人は知恵を絞ってきました。iframe
Copying .clone() DOM Insertion, Around .wrap() .wrapAll() .wrapInner() DOM Insertion, Inside .append() .appendTo() .html() .prepend() .prependTo() .text() DOM Insertion, Outside .after() .before() .insertAfter() .insertBefore() DOM Removal .detach() .empty() .remove() .unwrap() DOM Replacement .replaceAll() .replaceWith()
今やさまざまなWebサイトで使われ、すっかり地図の定番となったGoogleマップ。 コーポレートサイトや飲食店のサイトなどで、純粋に案内図としてページに埋め込むのが一般的ですが、中にはもっとおもしろい使い方で、ユーザーを楽しませているサイトもあります。 一例として、「hitotoki」というWebマガジンを紹介しましょう。hitotokiは、ある特定の場所に関するショートストーリーを地図と絡めて紹介するWebマガジンです。Googleマップをまるで独自に描いた絵地図のようにうまくサイトになじませ、「地理と文学を結びつけた町の文学地図」というコンセプトに合わせて効果的に活用しています。 今回は、このhitotokiのGoogleマップ活用法をお手本としましょう。 今回のお手本サイト： 『hitotoki―町の文学地図』 「場所」にまつわる読者の思い出を募り、地図と写真とともに紹介する投稿型の
平素より「PHPプロ！」をご愛顧いただき、誠にありがとうございます。 2006年より運営してまいりました「PHPプロ！」ですが、サービスの利用状況を鑑みまして、2018年9月25日（火曜日）をもちましてサービスを終了させていただくことになりました。 サービス終了に伴いまして、2018年8月28日（火曜日）を持ちまして、新規会員登録ならびにQ&A掲示板への新たな質問、回答の投稿を停止させていただきます。 なお、ご登録いただいた皆様の個人情報につきましては、サービス終了後、弊社が責任をもって消去いたします。 これまで多くの皆様にご利用をいただきまして、誠にありがとうございました。 サービス終了に伴い、皆様にはご不便をおかけいたしますこと、心よりお詫び申し上げます。 本件に関するお問い合わせはこちらよりお願いいたします。
Ajaxを使うことで、Webのユーザーインターフェイスを 劇的に改善することが出来るんだけれど、 イマイチ良いサンプルが見つからなかったのでJQueryとPHPで実装するサンプルを作ってみたよ サンプルが見つからない理由Ajaxはサーバーとクライアントの連携で動いているけれど、 サーバーは多種多様な技術があるので網羅できない。 クライアント側だけ説明すると、サーバー側が抜けるのでそのままではサンプルを動かすことが出来ない。 ということで、ターゲットをPHPとJQueryに限定してサーバーからクライアントまで一貫したサンプルにしてみました。 ソースコードを極力シンプルにして全コード掲載しています。 作る物クライアントからサーバーに数値を二つ送信し、 二つの値を足した結果をサーバーから取得して画面を更新する。 用意する物PEARが動くサーバー今回はJSONを処理するのにPEARのJSONライブ
Ajax を使ってコメントを挿入
Ajax をつかって、記事(article)にコメント(comment)を挿入するほうほう。よく使うわりにはいつもはまってしまうので備忘録。（カフェトークでは、レッスンにメモを追加するところにつかってます） article.rb class Article < ActiveRecord::Base belongs_to :user has_many :comments after_update :save_comments def new_comment_attributes=(comment_attributes) comment_attributes.each do |attributes| comments.build(attributes) if attributes[:content].length > 0 end end # ここでは使ってない def existing_com
なんかrails3.2でpjaxを公式にサポート云々みたいな話をきいてたけど、箱を開けてみたらそれっぽい差分がちょっと見当たらなくてついカッとなってしまったので、既存の資産で試してみることにしました。pjaxを。 rails向けのpjax-railsというgemがありますが、半年ぐらいメンテされてなくて不安なので、pjax-railsのなかで使われてるjquery-pjaxを普通につかうことにします。jquery-pjaxも4ヶ月ぐらい動きがないみたいですが、カッとなっているのでそういう細かいことは気にしません。 https://github.com/defunkt/jquery-pjax さっそく読み込んで、aタグにイベントをバインドしましょう。差し替える要素に"data-pjax-container"という属性が記述されてるものとします。 $("a:not([data-remote])
pjaxはChris WanstrathによるjQueryプラグインで、HTTPリクエストでページ全体を取得するのではなく、AJAXリクエストによってページの一部を簡単に更新できるようにします。デモページでどのように動作するかを見ることができます。デフォルトでは、このページにあるいずれかのリンクをクリックするとページ全体がリロードされます。これはページ上の時刻表示が変わることでわかります。チェックボックスをクリックしてpjaxを有効化すると、リンクをクリックしてもページ全体がリロードされることはなく時刻も更新されませんが、ページのメインセクションは変化します。 pjaxはpushStateを使用するのでユーザはAJAXリクエストがバックグラウンドで生成されていることに気づきません。pjaxがページを更新するごとにアドレスバーのURLが更新され、ページのタイトルが変わり、前のページがブラウザ
scaffoldを使うとCRUDが揃った「土台」を一発で作れるわけですが、それをアレコレして全ての操作をAjax化してみたので、手順をまとめました。 記事を読むのがだりぃって方はソースコードをGitHubで公開してるので、そちらをご覧ください。 RubyもRailsもあんまり触った事がないので、識者によるツッコミ歓迎します。 (｀・ω・´) 概要 やること indexの画面だけでCRUD、つまり新規作成 (Create)、表示 (Read)、編集 (Update)、削除 (Delete)を行えるよう、scaffoldで作成したファイルをいじります。 結論 form_for()にremote: trueを与えるだけで、とりあえずAjax化します。あとはサーバー側のレスポンスの内容を整えて、クライアント側で適切に処理してやればOKです。 作業 下準備（scaffoldとか） indexに編集フ
公式サイト ライブラリを使ったデモ ライセンス:MITライセンス prototype.js/script.aculo.usを使った同一ページ内ダイアログ作成ライブラリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
