ajax:htmlContent

インナーフレーム(iframe)のように、DIVタグ内にHTMLコンテンツを動的に読み込みます。
(インナーフレームでいいじゃんという気もするが。)

一覧表示のリンクをクリックすると、右側の詳細表示エリアに動的に読み込みます。
htmlContent1.png
別のリンクをクリックすると更新されます。
htmlContent2.png

説明

様々なイベントに応じて、Ajax通信を行い指定したコンテンツを書き換えることができます。
サンプルではアンカータグによるリンクのクリックで、処理をしていますが、マウスオーバーイベントにしたり、アンカータグではなく、ラジオボタンから1つを選んだイベントで行ったりすることができます。
インナーフレームを使えば実現できることなので、特に「このタグでなければ」使い道というのが分からないのですが。。。

注意点として取得するコンテンツはutf-8にしたほうが無難でした。IEなどではAjax通信時で取得するデータがutf-8以外だと上手く動かないことがありました。

属性

baseURL(必須)
共通属性参照
source(sourceClassかどちらか必須)
イベント発生元のタグのIDを指定します(nameではない)
selectタグなどの場合は、1つで済むのでsource属性でIDを1つ指定します。
アンカータグが複数ある場合は、IDを複数指定できないので、次のsourceClassでスタイルシートのクラス名を指定します。
sourceClass(sourceかどちらか必須)
イベント発生元のスタイルシートクラス名を指定します。
イベント発生元が複数ある場合には、sourceタグで指定できないので、こちらで指定します。
target(必須)
Ajax通信によって取得したHTMLコンテンツのをセット先を指定します。
普通はdivタグのIDを指定します。
parameters (必須)
共通属性参照
{ajaxParameter}という予約語が使えます。これをパラメータに指定すると、
クリックしたタグのコンテンツが送信されます。
eventType
Ajax通信を実行するイベントを指定します。
例えば”blur”と指定すると、フォーカスロストしたタイミングで通信します。(あまり使用することはないと思います)
postFunction
共通属性参照
emptyFunction
共通属性参照
errorFunction
共通属性参照

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください