ElementではController内のvalidation結果に応じて部分テンプレートを返す
AjaxリクエストでバリデーションがNGの場合にはモデルのエラーをElementに渡す
Element編では、CakephpのElement機能をAjaxメールフォームでどのように利用するのか書いてみたい。Elementでやることは、
部分テンプレート(HTMLの断片)のレンダリング
という点に集約されてしまのだが、もう少し具体的に書くとAjaxメールフォームの場合には、Modelのvalidation結果に応じて異なるHTML断片を返すようにしている。
・バリデーションOKの場合 → 問い合わせの件名などユーザーが入力したものをHTML化して返す
・バリデーションNGの場合 → ModelのエラーメッセージをHTML化して返す
OKの場合に返される部分テンプレートは、View編で触れたようにAjaxリクエストのupdate引数で指定したHTML内に格納され、NGの場合には、Ajaxリクエストのerrorコールバック内で、
XMLHttpRequest.responseText
としてModelのエラーメッセージが渡されて表示される。
この点についてはView編と合わせて確認してみると良いと思う。
部分テンプレートのコード
コードを確認する前にController内でどのようにしてテンプレートを呼び出しているか確認してみる。
全体的なコードはController編を確認してほしいが、Elementの呼び出し部分は以下のようにしている。
$this->render('/Elements/Ajaxs/ajaxupdated_contact', 'ajax');
Elementファイルは以下のファイルが該当する。
app\View\Elements\Ajaxs\ajaxupdated_contact.ctp
コードは以下のようにしてある。
if(!empty($valerror))
{
$valerror_c = count($valerror);
foreach ($valerror as $key => $value) {
$value_c = count($value);
for( $i=0; $i<$value_c; $i++ )
{
echo "<small class='error'>";
echo $value[$i];
echo "</small>";
}
}
}
else
{
echo "<div class='panel'>";
echo "<ul class='no-bullet'>";
foreach ($data as $key => $value) {
if( $key == "title" or $key == "email" or $key == "body" )
{
echo "<li>";
echo "<p>";
echo nl2br($value);
echo "</p>";
echo "<hr>";
echo "</li>";
}
}
echo "</ul>";
echo "</div>";
}
冒頭ifで条件分岐してある。
if(!empty($valerror)) {
}
$valerrorはControllerでsetされた変数で、validationのエラーメッセージが格納されている。エラーメッセージが真の場合は、エラーを表示するための部分テンプレートを生成・レスポンスする処理を行い、逆に$valerrorが偽の場合には、受け付けた問い合わせ内容をHTML化して返す。
validationのエラーの場合には、$valerrorの配列の個数を確認している。これはエラーメッセージの個数を確認していることと同じで、入力されたメールアドレスにバリデーションエラーが発生しているのであれば、1つのエラーを返すことになる。最後に、
<small class='error'>
というfoundationのcssでModelのエラーメッセージを括ってレンダリングするようにしてある。
validationがOKの場合には、Controllerからdata変数としてsetされた値を加工している。data変数とはユーザーが問い合わせフォームから入力したPOSTデータになる。
エラーメッセージはXMLHttpRequest.responseTextとしてerrorコールバックに渡される
validationがNGの場合には、部分テンプレートの内容をAjaxリクエストのerrorコールバックで処理される点がポイントかなと考えている。OKの場合はsuccessコールバックで処理され、それらを分岐する役割を担っているのがCakephpのControllerになっている。
エラーメッセージの部分テンプレートは、errorコールバック内でXMLHttpRequest.responseTextとして渡され、その部分のコードはView編のjs部分で処理されているので参考にしてほしい。
Element編までの内容で、
フォームの初期表示
エラーの検出
問い合わせ内容のdbへの保存
送信完了メッセージの表示
まで一通りできるようになった。
セットで確認してほしい。
問い合わせを行ったユーザーに対する問い合わせを受け付けた旨を通知するメールの送信処理が残っている。
Element編の次はメール送信処理について書いてみようと思う。メール送信設定編に続く