Q&A
使っているブラウザは何でしょうか？
サーバーサイドJavascriptで動作するフレームワーク(intramart)で開発をしています。
データベースを検索するアプリで、２つのコンボボックスを連動させるような動作を行っています。
条件選択の画面で、勘定科目のコンボボックスを変更したら、それに対応する補助科目のコンボボックスの中身を変更するような仕組みです。
具体的には、下記のような形で実装して動作するようになりました。
１．条件選択画面を表示させる前に、JavascriptでSQLを発行し、勘定科目と補助科目の組み合わせを配列に取得し、画面上の隠しフィールドに表示。(生成されたソースを見ると、実際にはjqGridが組み込まれています）
２．条件選択画面で、勘定科目のコンボボックスを変更した場合は、jQueryで隠しフィールドを検索して、勘定科目に該当する補助科目でコンボボックスの値をセットし直す。
３．このようにして条件選択画面で選択した結果、実行ボタンを押すと、JavascriptでSQLを発行して、検索結果を配列に取得して検索結果画面に表示。
html
1<script type="text/javascript"> 2<!-- 3// 勘定科目を変更した時 4function ac_change() { 5// 補助科目用隠しフィールドから補助科目セレクトボックスの内容を置換 6 var sel_list = $('#hjlist').getGridParam('data'); 7 $('#subac > option').remove(); 8 for (var idx in sel_list) { 9 var row = sel_list[idx]; 10 if (this.value == row.account_cd){ 11 $('#subac').append('<option value="' + row.subsidiary_account_cd + '">' + row.subsidiary_account_cd + row.subsidiary_account_name + '</option>'); 12 } 13 } 14} 15</script> 16</head> 17<BODY> 18<!-- 中略 --> 19 <form action="app/jrnl_list" name=f1 id="sql_info" method="post" onSubmit="return err_check()"> 20 <table class="imui-form"> 21 <tbody> 22 <tr> 23 <th><label><div id="label1">勘定科目</div></label></th> 24 <td><div id="input1"> 25 <imart type="imuiSelect" list=AcList id="ac" name="ac" onChange="ac_change" style="width: 200px;" /></div></td> 26 </tr> 27 <tr> 28 <th><label><div id="label2">補助科目</div></label></th> 29 <td><div id="input2"> 30 <imart type="imuiSelect" list=SubAcListw1 id="subac" name="subac" style="width: 200px;" /></div></td> 31 </tr> 32 </tbody> 33 </table> 34 <div class="imui-operation-parts"> 35 <imart type="submit" value="実行" id="register-button" class="imui-large-button" /> 36 </div> 37 <!-- 補助科目用隠しフィールド --> 38 <imart type="imuiListTable" data=SubAcList id="hjlist" hidden="true"> 39 <pager rowNum="100" rowList="30,50,100"/> 40 <cols> 41 <col name="account_cd" caption="勘定科目コード" /> 42 <col name="subsidiary_account_cd" caption="補助科目コード" /> 43 <col name="subsidiary_account_name" caption="補助科目名" /> 44 </cols> 45 </imart> 46 <!-- ここまで --> 47 </form>
ここで、３．の検索結果から前の画面に戻した時の動作でつまづいてます。
最初に選択した勘定科目の値は、元に戻るのですが、
連動させて選択した補助科目の値が、元に戻らず、コンボボックスの中身も空になってしまいます。
勘定科目を別の値に選択し直すと、補助科目も連動して正常に動作しますので、隠しフィールドは元のまま保持されているようです。
検索結果画面の、「戻る」という操作は、下記のように書いているのですが、
「戻る」が使えないとなると、選択した値を元の画面に戻して再表示ということになるので、躊躇しています。
html
1<a href="#" onclick="javascript:window.history.back(-1);return false;" class="imui-toolbar-icon" title="戻る">
「戻る」の振る舞いで何か注意点がありましたらアドバイス頂ければ幸いです。
あるいは、「戻る」場合に発効されるイベントはあるのでしょうか？
コメントありがとうございます。
通常Firefox(67.0)を使っていますが、
IE(11)、Chrome(74.0)いずれのブラウザでも同じ現象が出ます。
回答1件
0
ベストアンサー
イントラマートがどのような動きをするのか把握していないのですが、
HTML
1<select id="ac" ...>
https://www.intra-mart.jp/apidoc/iap/apilist-jssp-tagdoc/doc/pc/imuiSelect/index.html
という HTML が生成されると想定すれば、
jQuery
1$(window).on('pageshow', function(event) { 2 $('#ac').trigger('change'); 3});
https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event
投稿2019/05/30 04:23
総合スコア13749
x_x さん コメントありがとうございました。
フォーム表示時に、pageshowというイベントが動作するのですね。
実装したところ、changeイベントが動作しました。
ただ、#acというセレクトボックスのonchaneイベントに実行されるfunctionで、
#subacというセレクトボックスを初期化することになるため、submit時に持っていた#subacの値
ではなく、初期値で戻ってしまいます。
$('#subac').val() の値は、null になっていました。
どこかに元の値をSAVEしておいて、イベント発生時に戻すしか手はないでしょうか？
x_x さん おかげ様で解決しました。
commitする前に、hidden属性のinput項目に、補助科目の値をSAVEし、
勘定科目のchangeイベント発生時にセレクトボックスを初期化する時、
SAVEした値と同じ値の時に、<option value="xxx" selected>として選択した状態にしました。
半ば無理やりですが、値が消えてしまうため、やむを得ない措置です。
貴重なアドバイスを頂きありがとうございました。
あなたの回答
tips
プレビュー
