━目次━
今日は技術ネタです。
テーマとしては以下の感じ。
Spring Framework(実際はTERASOLUNAというNTTデータがSpringに手を加えたもの)
HTML/JavaScript
テキストボックスに「?」と入力してフォーカスアウトした際、ajaxでDBからデータを取得
取得結果一覧からセレクトボックスを作成し、テキストボックスをセレクトボックスに変える
じゃけぇ 「?」を入力の部分をボタン押下とかラジオボタン切替とか色々なイベントに読み替えたら応用が効くから是非活用してね
ajax実行部分
まずはフォーカスアウトを検知→ajaxを実行までのソースです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$('#textboxId').on('blur', function(){ if ($(this).val() == "?"){ //ajaxでリスト情報を取得 $.ajax({ dataType:"json" ,url : "sampleController/getList" ,type: "POST" ,data: $("#sampleForm").serialize() ,error: function(res){ //エラー時の処理 } ,success:function(res){ //成功時の処理 } }) } }) |
一般的なajax実行の記述です。
まずはここまでで「?」が入力された場合、controllerファイルを呼び出すことが出来ます。
データ取得部分(controllerファイル)
次にajaxで呼ばれたcontrollerファイルのソースです。
モデルやサービスは適当なものが存在するものとします。
この例ではフォーム内の”abc“というnameで受け取った値をキーに検索し、取得した情報の”listItem“という項目をセレクトボックスに設定します。
|
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 36 37 38 39 40 |
/** * サンプルControllerクラス * (sampleController.java) */ @Controller @RequestMapping("sampleController") public class SampleController { /** * セレクトボックス一覧情報取得処理(?入力後フォーカスアウト時) * * @param param パラメータオブジェクト * @return 検索結果 */ @RequestMapping("getList") @ResponseBody public List<String> getListInfo(SampleForm param) throws AjaxServiceException { List<String> result = new ArrayList<String>(); try { //一覧情報の取得 List<sampleTbl> sampleTblList = sampleService.getListByPrimaryKey(param.getAbc()); if (sampleTblList.size() == 0) { //取得結果が0件の場合はnull返却 return null; } else { //データが取得できた場合は取得した情報をリストに設定 for (int i = 0; i < sampleTblList.size(); ++i) { result.add(sampleTblList.get(i).getListItem()); } } } catch (final Exception e) { throw new AjaxServiceException(e.getMessage(), e); } return result; } } |
セレクトボックス作成部分
返却されたListからセレクトボックスを生成します。
先程のajax呼出部のsuccess:function内に記述していきます。
|
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 |
$('#textboxId').on('blur', function(){ if ($(this).val() == "?"){ //ajaxでリスト情報を取得 $.ajax({ dataType:"json" ,url : "sampleController/getList" ,type: "POST" ,data: $("#sampleForm").serialize() ,error: function(res){ //エラー時の処理 } ,success:function(res){ //成功時の処理 if (res == null){ } else{ //データが取得できた場合、セレクトボックスを生成する res.forEach(function(value){ var option = document.createElement("option"); option.value = value; option.innerText = value; document.getElementById("selectboxId").appendChild(option); }) //テキストボックスを非表示にし、セレクトボックスを表示する document.getElementById("selectboxId").style.display = ''; document.getElementById("selectboxId").disabled = false; document.getElementById("textboxId").style.display = 'none'; document.getElementById("textboxId").disabled = true; } } }) } }) |
返却値をforEachでまわすことでvalueに値が入ります。
forEach内でcreateElementで作成したoptionに値を設定し、セレクトボックスのIDを指定し、appendChildすることで要素を作成します。
最後に、非表示にしていたセレクトボックス要素を表示し、テキストボックスを非表示にすることであたかもテキストボックスがセレクトボックスに変わったようにみえるというわけです。
まとめ
まとめるとこんな感じです。(HTML部にはintra-martのタグを使用)
【sample.jsp】
|
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 36 37 38 39 40 41 42 43 44 45 46 47 |
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ taglib prefix="imui" uri="http://www.intra-mart.co.jp/taglib/imui" %> <body> <script> $(function(){ //フォーカスアウトイベント $('#textboxId').on('blur', function(){ if ($(this).val() == "?"){ //ajaxでリスト情報を取得 $.ajax({ dataType:"json" ,url : "sampleController/getList" ,type: "POST" ,data: $("#sampleForm").serialize() ,error: function(res){ //エラー時の処理 } ,success:function(res){ //成功時の処理 if (res == null){ } else{ //データが取得できた場合、セレクトボックスを生成する res.forEach(function(value){ var option = document.createElement("option"); option.value = value; option.innerText = value; document.getElementById("selectboxId").appendChild(option); }) //テキストボックスを非表示にし、セレクトボックスを表示する document.getElementById("selectboxId").style.display = ''; document.getElementById("selectboxId").disabled = false; document.getElementById("textboxId").style.display = 'none'; document.getElementById("textboxId").disabled = true; } } }) } }) }) </script> <form:form name="sampleForm"> <imui:select id="selectboxId" style="display:none;" disabled="true" /> <imui:textbox id="textboxId" /> </form> </body> |
【sampleController.java】
|
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 36 37 38 39 40 |
/** * サンプルControllerクラス * (sampleController.java) */ @Controller @RequestMapping("sampleController") public class SampleController { /** * セレクトボックス一覧情報取得処理(?入力後フォーカスアウト時) * * @param param パラメータオブジェクト * @return 検索結果 */ @RequestMapping("getList") @ResponseBody public List<String> getListInfo(SampleForm param) throws AjaxServiceException { List<String> result = new ArrayList<String>(); try { //一覧情報の取得 List<sampleTbl> sampleTblList = sampleService.getListByPrimaryKey(param.getAbc()); if (sampleTblList.size() == 0) { //取得結果が0件の場合はnull返却 return null; } else { //データが取得できた場合は取得した情報をリストに設定 for (int i = 0; i < sampleTblList.size(); ++i) { result.add(sampleTblList.get(i).getListItem()); } } } catch (final Exception e) { throw new AjaxServiceException(e.getMessage(), e); } return result; } } |
さいごに
じゃけぇ 因みに何度もセレクトボックスの値を設定し直す場合は、↓のようにセレクトボックスの内容を初期化しないとどんどん増えていくから気を付けてね～
|
1 2 3 4 5 6 7 8 |
//セレクトボックス初期化処理 function selectboxReset(){ var list = document.getElementById("selectboxId"); while (0 < list.childNodes.length){ list.removeChild(list.childNodes[0]); } } |
それでは！また！！
最後まで読んで頂きありがとうございます！
人気の記事だけ集めたので是非覗いていってください＾＾
厳選！目的別にオススメ記事を紹介-あなたの欲しい情報がここに-
人気の記事だけ集めたので是非覗いていってください＾＾
厳選！目的別にオススメ記事を紹介-あなたの欲しい情報がここに-
