7.1.4. 画面遷移¶
項目
7.1.4.1. 画面遷移がある場合(登録、更新など)の実装例¶
画面遷移がある場合の概要と実装方法についての説明です。
- 処理の流れ
- Form の 2 度押し防止 – imuiDisableOnSubmit (セレクタ)
- バリデーションチェック – imuiValidate
- 確認ダイアログ表示 – imuiConfirm
- Ajax でのデータ送信と画面遷移 – imuiAjaxSubmit
7.1.4.1.1. 画面遷移あり HTML (ヘッド情報)¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <imart type="head">
<title>新規登録画面</title>
<!-- Load library -->
<script src="ui/libs/jquery-validation-1.9.0/jquery.validate.js"></script>
<script src="ui/js/imui-form-util.js"></script>
<imart type="imuiValidationRule" rule="foo/bar#hoge" rulesName="rules" messagesName="messages" />
<script type="text/javascript">
(function($) {
$(document).ready(function() {
// Form の 2 度押し防止
imuiDisableOnSubmit('#form');
// 参照画面へ引き渡すキーの配列生成
var optionalData = ['user_cd'];
// 登録ボタンクリック
$('#register-button').click(function() {
// バリデーションチェック
if (imuiValidate('#form', rules, messages)) {
// 確認ダイアログ表示
imuiConfirm(
'<imart type="string" value=$data.dialogMessages.message escapeJs="true" />', // メッセージ
'<imart type="string" value=$data.dialogMessages.title escapeJs="true" />', // タイトル
function() { // OKクリック時のコールバック関数
// Ajax でのデータ送信と次画面への遷移
imuiAjaxSubmit('#form', 'POST', 'json', 'reference/list/views/list');
}
);
}
});
});
})(jQuery);
</script>
</imart>
|
7.1.4.1.2. 画面遷移あり HTML (画面タイトル/ツールバー/コンテンツエリア)¶
登録画面の実装サンプル を参照してください。または、 更新画面の実装サンプル を参照してください。コラム
imuiValidate を利用するときは、<input type=”submit”/> ではなく、<input type=”button”/> を利用してください。
7.1.4.1.3. 画面遷移あり サーバサイドJavaScript¶
1 2 3 4 5 6 7 8 9 10 11 12 13 | /**
* 初期化処理
*
* ・・・
* @validate foo/bar_validation#init
* @onerror handleErrors
*/
function init(request) {
// 初期化の際の処理
}
function handleErrors() {
// 入力チェックに失敗した際の処理
}
|
コラム
バリデーションチェックについて
実装例の中で、バリデーションチェック(送信値チェック)をしています。送信値が規定のルールに反する場合は、確認ダイアログを表示せず処理を中断し、ルールに反している入力箇所にエラーの旨を表示します。詳しくは、 Jssp Validator を参照してください。Ajaxについて
Ajax の呼び出し先 を参照してください。
- 登録・更新画面について
7.1.4.2. 画面遷移がない場合の実装例¶
画面遷移がない場合の概要と実装方法についての説明です。
- 処理の流れ
- Form の 2 度押し防止 – imuiDisableOnSubmit (セレクタ)
- バリデーションチェック – imuiValidate
- 確認ダイアログ表示 – imuiConfirm
- Ajaxでのデータ送信 – imuiAjaxSend
7.1.4.2.1. 画面遷移なし HTML(ヘッド情報)¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <imart type="head">
<title>更新/削除画面</title>
<!-- Load library -->
<script src="ui/libs/jquery-validation-1.9.0/jquery.validate.js"></script>
<script src="ui/js/imui-form-util.js"></script>
<imart type="imuiValidationRule" rule="foo/bar#hoge" rulesName="rules" messagesName="messages" />
<script type="text/javascript">
(function($) {
$(document).ready(function() {
// Form の 2 度押し防止
imuiDisableOnSubmit('#form');
// 参照画面へ引き渡すキーの配列生成
var optionalData = ['user_cd'];
// 更新ボタンクリック
$('#update-button').click(function() {
// バリデーションチェック
if (imuiValidate('#form', rules, messages)) {
// 確認ダイアログ表示
imuiConfirm(
'<imart type="string" value=$data.dialogMessages.message escapeJs="true" />', // メッセージ
'<imart type="string" value=$data.dialogMessages.title escapeJs="true" />', // タイトル
function() { // OKクリック時のコールバック関数
// Ajaxでのデータ送信
imuiAjaxSend('#form', 'POST', 'json');
}
);
}
});
});
})(jQuery);
</script>
</imart>
|
7.1.4.2.2. 画面遷移なし HTML (画面タイトル/ツールバー/コンテンツエリア)¶
登録画面の実装サンプル を参照してください。または、 更新画面の実装サンプル」 を参照してください。
7.1.4.2.3. 画面遷移なし サーバサイドJavaScript¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /**
* 初期化処理
*
* ・・・
* @validate foo/bar_validation#init
* @onerror handleErrors
*/
function init(request) {
// 初期化の際にしたい処理
}
function handleErrors() {
// 入力チェックに失敗した際にしたい処理
}
|
コラム
バリデーションチェックについて
実装例の中で、バリデーションチェック(送信値チェック)をしています。送信値が規定のルールに反する場合は、確認ダイアログを表示せず処理を中断し、ルールに反している入力箇所にエラーの旨を表示します。詳しくは、 Jssp Validator を参照してください。Ajaxについて
Ajax の呼び出し先 を参照してください。
- 登録・更新画面について
7.1.4.3. Ajax 通信の利用方法¶
imuiAjaxSend, imuiAjaxSubmit を使用して Ajax 通信をする場合、呼び出し先のページでは処理成功時のメッセージ、処理失敗時のメッセージ、処理成功後に遷移するページへ引き渡すパラメータ、を返すことができます。
属性名 説明 型 必須 error 処理が失敗した場合 true、成功した場合 false を指定します。 boolean o successMessage 処理成功時のメッセージ。error: false の場合表示されます。 String – errorMessage 処理失敗時のメッセージ。error: true の場合表示されます。 String – detailMessages 処理失敗時の詳細なメッセージ。error: true の場合表示されます。 String/String[] – parameter 処理成功後に遷移するページへ引き渡すパラメータ。 Object –
7.1.4.3.1. parameter について¶
オブジェクトのキーを input タグの name 属性に、値を value 属性にセットして submit します。値に配列を指定することが可能です。ただし、1 次元配列のみサポートします。parameter の指定方法と、次画面での取得例は以下のようになります。parameter の指定
1 2 3 4 5 | parameter: {
key1: 'value1',
key2: 'value2',
array1: [ 'array1', 'array2', 'array3' ]
}
|
次画面での取得
1 2 3 4 5 6 | function init(request) {
var v1 = request.key1; // 'value1'
var v2 = request.key2; // 'value2'
var a1 = request.getParameterValues('array1'); // ['array1', 'array2', 'array3']
...
}
|
となります。
7.1.4.3.2. Ajax 実装例¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | function init(request) {
...
response.setContentType('application/json; charset=utf-8');
...
var resultObject = SomeAPI.doSomething();
if (resultObject.error) {
// 処理が失敗した場合
response.sendMessageBodyString(
ImJson.toJSONString({
error: resultObject.error,
errorMessage: resultObject.message,
detailMessages: ['管理者にお問い合わせください', '連絡先:admin@xxx.xxx.xxx']
})
);
}
// 処理が成功した場合
response.sendMessageBodyString(
ImJson.toJSONString({
error: false,
errorMessage: '',
successMessage: '登録しました',
parameter:{
param1: 'value1',
param2: 'value2',
array1: ['array1', 'array2', 'array3']
}
})
);
}
|