Symfony日本語マニュアル
第11章 - Ajaxの統合 クライアントサイド上でのインタラクション、複雑な視覚効果(イフェクト)、非同期通信はWeb 2.0のアプリケーションにおいて共通の機能です。JavaScriptを必要とするこれらの機能の実装に関して、コードを手書きするのはやっかいでデバッグに時間がかかることはよくあります。幸いにして、symfonyはヘルパーの完全なセットを持つテンプレート内部のJavaScriptの多くの共通部分を自動化します。JavaScriptのコードを書かずに多くのクライアントサイドのふるまいを実現できます。開発者は実現したいイフェクトだけに集中していればよく、symfonyが複雑な構文と互換性問題を処理します。 この章ではクライアントサイドのスクリプト作成を円滑にするためにsymfonyが提供するツールについて説明します: 基本的なJavaScriptヘルパーは、DOM(Docume
JSF 2.0 の Ajax 対応はとてもかんたん
JSF 2.0 の Ajax 対応はとてもかんたん 2011年1月18日 at 6:25 午後 4件のコメント JSF 2.0 の新機能の一つに Ajax 対応があります。今日は JSF 2.0 に追加された Ajax と 画面遷移が無いページ(同一描画内)で利用可能な @ViewScope について紹介します。 JSF 2.0 で追加された Ajax の機能を使うと、JavaScript の知識が殆どなくても Ajax のページを作成する事ができます。またその際、自身で XMLHttpRequest, XMLHttpResponse の通信処理も記載する必要がないため開発効率が向上します。 もっと誇張していうなら、通常の JSF ページに対してほんの数行追加するだけで、簡単に Ajax 対応させる事ができます。下記に示す例ではほんの１〜２行追加するだけで Ajax 対応ページを実現してい
CakePHPとJSONでAjax用APIを作る方法
以前、CakePHPでjQueryのAjaxを使う方法というエントリーを書きましたが、 今回はJSON形式の配列を返却するAPIを作ってみます。 ここ一年間、APIを設計したり使ったりしましたが、自分なりのノウハウをまとめてみようと思います。 JSON形式で返すメリットjavascriptでオブジェクトとしてそのまま扱えるPHPから他の言語へデータの受け渡しが容易JSONはXMLなどと比べ軽量JSONを返すWebAPIはjavascriptとの相性も良く,Ajaxでのやりとりにも使えます。 PHPの場合はjson_encode、json_decodeで等でJSONと配列を簡単に変換できます。 $json = json_encode(array('あ', 'い', 'う')); echo $json; // ["\u3042","\u3044","\u3046"] ※["あ","い","う"
CakePHPでjQueryのAjaxを使う方法
CakePHPでAjaxを使う方法をご紹介していきます。 Ajax処理を書くとき、CakePHPでは色々な手法があるので簡単にまとめていきます。 また、下記の記事でも改めて解説していますので御覧ください。 CakePHPでJSONを返すAPIを作る 初めてCakePHPでajaxを使った時にMissingViewでハマり、 CakePHP×Ajaxを解説しているサイトが見当たらず苦戦した思い出があります。 非常に便利なAjaxですが、CakePHPで使用する場合はAction側で一手間加えてやる必要があるのです。 ということで今回はCakePHPでAjaxを使う方法について解説します。 注： CakePHPにはAjaxHelper(JsHelper)が用意されていますが、今回は使いません。 というのも、個人的に使い勝手があまり良くない印象があるので。 （そもそもjavascriptはjsフ
Symfony Ajaxで「戻る」を実現する
Ajaxを使ってフォームのフィールドの変化に応じてdivの中身を入れ替えるような処理の場合、ブラウザの「戻る」機能を正常に使うことができなくなります。 フォントサイズの変更や「戻る」「進む」などのブラウザが標準で搭載している機能が使えなくなることはユーザの自由を奪ってしまうことになり、ユーザビリティがよくありません。 いろいろ調べてみたところ、「みかログ: Ajaxと戻るボタン・ブックマーク」というサイトにて対処法を発見しました。 ポイントとしては、 IE以外ではlocation.hashで各オペレーションに対して異なるhashを生成 IEでは隠しIFRAMEにlocation.hash生成 というあたりらしいです。 Javascriptを直接記述する場合は上記サイトのjQueryプラグインで事足りると思いますが、私の場合Symfonyを使用していたため、その中のヘルパ関数であるobser
【prototype.js】非同期定期更新の実装でつっかえたのでメモ | BOT OHA blog
＝＝＝ 非同期、いわゆるAjaxで、画像情報を更新したいときってあるじゃないですか。 で、以前prototypeでAjax処理をやったので、軽く調べて実装してみたらFirefoxだとOKなのに、IEだと通信してくれないんですね。 なんでさ！ と軽く涙目で調べた結果をメモするよ。 【環境】 prototype.js 1.7 XHTML 1.0 【確認環境】 Firefox 7.0.1 Internet Explorer 7.0.6 【やりたいこと】 prototype.jsのAjax.PeriodicalUpdaterを使って定期的にHTML上の特定要素を更新したい。 【起こったこと】 Firefoxでは指定秒数で更新が走るのに、IE 7だと更新が走らない。 ※通信が発生していないのをサーバ側のログで確認。 【原因】 IEは同じURLの表示が2回目以降のときにキャッシュを読み込む（らしい）
Route 477(2007-12-07)
■ [javascript] サーバが一定時間応答しなかったら処理を打ち切る 探していたものとは違うものだけど、一応メモ。 IT trends By 渡辺翔太 » Blog Archive » Ajaxでタイムアウトを設定するコード ネタ元： codejanitor » AJAX Timeouts with Prototype インデントが崩れているので直したものを貼っておきますね。 function callInProgress (xmlhttp) { switch (xmlhttp.readyState) { case 1: case 2: case 3: return true; break; // Case 4 and 0 default: return false; break; } } function showFailureMessage(
prototype.jsのイベント | GENDOSU@NET
prototype.jsで、エレメントにイベントを設定する <div id="test">test</div> このタグにクリックイベントを付ける時は $('test').observe('click', function(event){ alert('testをクリック'); }); prototype.jsのイベントとして指定出来るイベント ページのイベント load ページが読み込まれた時 dom:loaded ページが読み込まれた時(イメージなどは読み込み完了していなくても発動) ※DOMツリーの構築が終わっていても描画が終わっていない場合があるので、このイベント内で$('test’).style.height のようなプロパティを見ても0やnullが入っている場合がある。 unload ページが閉じられる時 resize ページのサイズが変更された時 abort ページの読み込み
付録 prototype.js：通信を中断する
prototype.jsはデータの通信を開始した際にonLoadingイベントが発生します。この時に通信用のオブジェクトをグローバル変数に入れておきます。あとは、abort()メソッドで通信を中断することができます。ただし、この方法が良いとは考えられないので他に良い方法があるはずです。（サンプルを実行する） <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>prototype.jsサンプル</title> <script src="prototype.js" type="text/javascript"></script> <script type="text/javascript"><!-- gHttpObj = null; function waitData()
Ajaxで通信を強制停止させる方法 | システムエンジニアの戯言
Ajaxで通信を強制停止するには XMLHttpRequestのabortを使います。 実際には、abortなんてそうそう使う機会はありません。 果たして使い道はあるのでしょうか？ 例えば、Ajax通信中に、「Now Loading・・・」なんていうメッセージをモードレスダイアログで表示し、さらにユーザが手動で通信を停止させる手段としてダイアログの右上に×ボタンを用意しておき、ボタンが押されたタイミングで、abortする、なんていうことが考えられます。 Ajax通信中に他のページに移動する際の問題 ミッションクリティカルなWebシステムでない限り、Ajax通信中に他のページへの移動を許容する事は間々あるかと思います。 例えば、最近私が作成したWebシステムでは、Topページのパフォーマンス向上のために、Ajaxで情報を遅延ロードして表示するような仕組みを採用しました。 どれぐらい、パフォー
suggest.js - 入力補完ライブラリ
Japanese / English JavaScriptで入力補完を手軽に行うためのライブラリです。 (【お知らせ】ver2.0からprototype.jsを必要としなくなりました) 下記のような機能を持っています。 入力内容をもとに検索を行い、補完候補を表示します。(Google Suggestぽく) Ajaxでは無く、初回画面表示時のみデータの読み込みを行い、それ以降は、クライアント側で対象データから検索します。したがって、入力内容に変化があってもサーバ側にアクセスすることはありません。 検索は、前方一致/部分一致、大文字と小文字の区別あり/なしといったように、オプションで簡単に指定できます。また、その他にも様々なオプションが指定可能です。 検索結果の表示上限を指定できます。(デフォルト上限20件) 補完候補はキーボードの上下と、マウスにて選択できます。また、キーボードで選択中にES
link_to_remote - babie, you're my home
RDoc 見たら ActionView::Helpers::PrototypeHelper の link_to_remote 読めって書いてあったので訳してみたよ。★はわかんないとこ。情報求ム。 link_to_remote(name, options = {}, html_options = {}) options[:url] (url_for フォーマットで記述する) で定義されたリモートアクションへのリンクを返します。リンクをクリックするとバックグラウンドで XMLHttpRequest が呼ばれます。そのリクエストの結果が、options[:update] で指定された DOM オブジェクトに挿入されます。 例： link_to_remote "Delete this post", :update => "posts", :url => { :action => "destroy"
dom:loaded [prototype.js]|Ajax入門|Ajaxの基礎と応用の学習|StudyNet
dom:loadedは、prototype.jsの拡張イベントです。通常ページを読み込まれた後にJavaScriptを実行するには、loadイベントを使いますが、サイズの大きい画像ファイルなどが存在すると、loadイベントが発生するまで時間がかかります。この場合、dom:loadedイベントを利用すると、ユーザビリティが向上します。ただし、ブラウザの仕様によって動作のタイミングは違います。
ツールチップ｜prototype.jsベース｜Ajax｜PHP & JavaScript Room
HEAD <!-- JS --> <script type="text/javascript" src="prototype-1.5.0.js" charset="utf-8"></script> <script type="text/javascript" src="scriptaculous.js?load=builder,effects" charset="utf-8"></script> <script type="text/javascript" src="tooltips.js" charset="utf-8"></script> <!-- CSS --> <link rel="stylesheet" href="tooltips.css" media="screen" charset="utf-8" /> HTML <ul> <li><a href="#" title="ツー
Prototype系ライブラリ サンプルプログラム
このページはAjaxライブラリの1つであるPrototypeライブラリ系のライブラリの各種サンプルコードを掲載しています。 ミスや間違い、リンクエラーなどがありましたらopenspc@alpha.ocn.ne.jpまでお願いします。 一般的なJavaScriptに関するサンプルに関しては以下のサイトを参照してください。 JavaScript例文辞典 JavaScript例文辞典（新） Last update : 2008/7/23 PM 3:53 2008 Copyright 古籏一浩(KaZuhiro FuRuhata) ■Accordion ライブラリを読み込む アコーディオンを表示する アコーディオンを縦に表示する（横にスライドし展開表示する） 展開速度を指定する 展開処理するためのイベントを指定する 最初に表示するパネルを指定する ■DatePicker ライブラリを読み込む カレ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer
JavaScript | GANCHIKU.com | Page 3
http://www.crystal-creation.com/web-appli/technical-information/web-api/google/search/
http://www.tricky-code.net/mine/javascript/js02ajax.php
layer8.sh