お知らせ

これだけは知っておきたい Webアプリケーションの常識 2008年3月28日

「これだけは知っておきたい Webアプリケーションの常識」が発売されました。
Webアプリケーションを作る上では、HTTPのプロトコルや、開発言語、データベースなど、さまざまな知識を組み合わせることが必要になります。
それらを全般的にまとめた一冊です。
Webアプリケーション開発にチャレンジしたい方や、実際に開発までしないまでも基礎知識として知っておきたい方にお勧めです。

他にも多数書籍を執筆しています。
こちらもぜひご覧ください。

メールフォームプラグインV1.20（その11・メールフォームのAjax化）

2007年02月04日 13:40 | コメント(4) | トラックバック(0)

メールフォームプラグインでは、メールフォームをAjax化して、ページ遷移が起こらないようにすることもできます。
今日はその方法を解説します。

1.prototype.jsのインストール

メールフォームのAjax化では、prototype.jsを利用します。
こちらのページからprototype.jsをダウンロードし、Blogの出力先ディレクトリにアップロードします。

2.メールフォームテンプレートのヘッダー部分の書き換え

次に、メールフォームのテンプレートのヘッダー部分（<head>～</head>）に、以下を追加します。 

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript">
<!--
function mail_ajax(mode)
{
    $("send_status").style.display = 'block';
    document.mail_form.mail_preview.disabled = true;
    document.mail_form.mail_post.disabled = true;
    var params = Form.serialize("mail_form");
    if (mode == "post") {
        params += "&mail_post=1";
    }
    else if (mode == "preview") {
        params += "&mail_preview=1";
    }

    new Ajax.Request("<$MTCGIPath$>plugins/MailForm/mt-mail-form.cgi",
                     { method : "post",
                       parameters : params,
                       onComplete : displayMailResult,
                       onFailure : failureMailResult });
    return false;
}

function displayMailResult(obj)
{
    document.mail_form.mail_preview.disabled = false;
    document.mail_form.mail_post.disabled = false;
    $("send_status").style.display = 'none';
    $("ajax_mail").innerHTML = obj.responseText;
}

function failureMailResult(obj)
{
    alert('メールの処理が失敗しました。');
    document.mail_form.mail_preview.disabled = false;
    document.mail_form.mail_post.disabled = false;
    $("send_status").style.display = 'none';
}
//-->
</script>

3.フォーム部分の書き換え

次に、メールフォーム／送信前確認／送信エラーの各テンプレートのフォーム部分を、以下のように書き換えます。

・IDの割り当て

formタグに「id="mail_form"」のアトリビュートを追加して、IDを割り当てます。

・タグの追加
フォーム内に以下のタグを追加します。 

<input type="hidden" id="ajax" name="ajax" value="1" />

・「送信」「確認」ボタンの変更
「送信」および「確認」ボタンの部分を、以下のように変更します。 

<input type="button" name="mail_preview" id="mail_preview" accesskey="v" value="確認" onclick="return mail_ajax('preview');" />
<input type="button" name="mail_post" id="mail_post" accesskey="s" value="送信" onclick="return mail_ajax('post');" />

4.Ajax化する部分をdivタグで囲む

次に、メールフォームテンプレートの中で、Ajaxによって表示を切り替えたい部分を、「<div id="ajax_mail">」と「</div>」のdivタグで囲みます。

5.状況表示用のｄｉｖタグを追加

次に、「送信」や「確認」のボタンをクリックしたときに、メッセージを表示するための部分を作ります。
メールフォームテンプレートの中で、上の4.の</div>タグの後あたりに、以下のタグを追加します。 

<div id="send_status" style="display : none;">
<p>メールの処理中です...</p>
</div>

なお、divタグの中の部分は、ご自分で好きなメッセージに変えることができます。

6.送信前確認等のテンプレート・モジュールの書き換え

次に、送信前確認／送信エラー／送信完了の各テンプレート・モジュールを書き換えます。
これらのテンプレートモジュールには、Ajaxで表示する部分（上の4.のdivタグの内部に表示する部分）だけを入れます。

7.Ajax化のサンプルメールフォーム

以下をクリックすると、Ajax化したメールフォームのサンプルをダウンロードすることができます（MT標準テンプレートをベースにしたもの）。

MailFormSmpl_MT_Ajax.zip

8.前後のエントリー

メールフォームプラグインは解説が長いので、エントリーを複数に分けています。
前後のエントリーは以下のリンクで参照することができます。

前のエントリー（その10・メール本文のカスタマイズ）
次のエントリー（その12・サイドバー用Ajaxメールフォーム）

また、サイドバーの「関連するエントリー」の箇所に、メールフォーム関連のエントリーの一覧が表示されていますので、そちらもご利用ください。

カテゴリ:

タグ:

関連するエントリー(13件)

トラックバック(0件)

このブログ記事を参照しているブログ一覧: メールフォームプラグインV1.20（その11・メールフォームのAjax化）

このブログ記事に対するトラックバックURL: http://www.h-fj.com/mt/mt-tb.cgi/805.

コメント(スレッド4件,コメント4件)

コメントはスレッド表示になっています。
また、スレッドの先頭のコメントに対する返信には、先頭に矢印を表示しています。

プラグインについてご質問をされる方は、ご自分のBlogのURLを必ず入力してください。
また、プラグインの開発やサポートを継続的に行えるようにするために、ドネーション（寄付）をしていただけると幸いです。
金銭的寄付だけでなく、精神的寄付も歓迎します。
ドネーションのページはこちら

No.1　中田勝久 : (無題)

お世話になっております。

Ajaxのメールフォームを導入させていただこうと今資料をみさせていただきながら必死にがんばっています。

上記の内容どおりしたつもりなのですが
実際に送信テストをした際、確認ページに飛びません。

http://www.fi-sc.com/cinderella-story/mail_form.html

実際の設置したページをリンクしますので
お手数ではございますがご確認いただけますでしょうか？

よろしくお願いします。

2007年7月 9日 13:03
No.2　壱 Author Profile Page: (無題)

＞中田勝久さん
こんにちは。

メールフォームのページを拝見したところ、JavaScript内で<$MTCGIPath$>タグの出力が、「http://124.40.12.114/mt33/」のようにドメインの部分がIPアドレスになっています。
<$MTCGIPath$>タグの箇所を「http://www.fi-sc.com/mt33/」に書き換えれば動作すると思います。

2007年7月 9日 14:06
No.3　中田勝久 : (無題)

お世話になっております。

技術的なサポートもいただきましてありがとうございます。
ご指摘いただきました内容で訂正しましたが
動作しないようです…

ほかに考えられる原因は何かありますでしょうか？

2007年7月10日 10:45
No.4　中田勝久 : (無題)

中田勝久です。
お世話になっております。

今確認しましたら動作しているようです！
お手数をおかけいたしました。

また資料も拝見させていただきまして
わからないことは質問させていただきます。


本当にありがとうございましたm(__)m

2007年7月10日 10:51

コメントする

管理者のみにコメントを送信したい場合は、「コメントを秘密にする」のチェックをオンにしてコメントを送信するか、メールフォームからメールをお送りください。

ブログ全体の感想など、この記事に直接に関係しないコメントは、ゲストブックにお気軽に投稿してください。


検索

購読

カテゴリ

アーカイブ

最近のブログ記事

最近のコメント

最近のトラックバック

ブログパーツ

ステータス

Powered by Movable Type 4.12
Movable Type 4.12