フォーム送信をAjaxで実行&画面更新までできるApplicationController（その5）「ターゲット指定」
引き続きApplicationControllerを使ったAjax処理の省力化について紹介します。今回はフォームのターゲット指定です。
通常、フォーム送信した結果は同じフォームを更新対象にしますが、場合によっては別なフォームを対象にしたいこともあるでしょう。ApplicationControllerではごく簡単に実装できます。
実装方法としては target を指定します。それだけで更新対象を指定できます。
| <form action="jsp/welcome-json.jsp" name="form1" target="form2"> | |
| <label>名前</label><input type="text" class="name" value="たろう" /> | |
| <p data-h5-bind="message">更新対象</p> | |
| <input type="submit" /> | |
| </form> | |
| <form action="jsp/welcome-json.jsp" name="form2" target="form1"> | |
| <label>名前</label><input type="text" class="name" value="じろう" /> | |
| <p data-h5-bind="message">更新対象</p> | |
| <input type="submit" /> | |
| </form> |
JavaScriptは変わりません。特別な設定は不要です。
| $(function() { | |
| h5.core.controller('body', h5.ui.container.ApplicationController); | |
| }); |
これだけでフォームを送信すると別なフォームが更新されるようになります。インジケータが送信ボタンを押したものとは違うフォームで回っているのが分かります。
実際のデモはこちらにて確認できます。サーバ送信部分はモックですが、サーバを立てた場合と同じです。
業務要件などが複雑な場合、フォームを入れ子にできず苦労するかも知れません。しかしこの方法であれば別なフォームをターゲットに指定にてボタンだけ別に配置すると言った使い方も考えられるのではないでしょうか。
コメントは受け付けていません。