Q&A
あまり自信がないんですが、現在直接記述されている`<script>`タグを消去し、問題のJSファイルが`src`になっている`<script>`タグを`<body>`タグの最下部(`</body>`の一行上)に移動するとどうでしょうか。
前提・実現したいこと
検索ボタンを押すと、テキストボックスとラジオボタンの結果をURLパラメーターから受け取って、その値をキーにしてデータベースから拾ってきたレコードを表示したい。
連続でキーワードを変えて検索できるようにしたいため、同じページで複数回同じボタンが機能するようにしたい。
発生している問題・エラーメッセージ
index.htmlから遷移して１回目の検索は正常に動作しますが、もう一度同じボタンを押すと反応しません。
ブラウザの開発メニュで表示できるコンソール画面を確認したところ、関数が見つからないと言われているようです。
どなたか解決法をご存知ありませんか？
text
1ReferenceError: Can't find variable: findRecordByTextValue
該当のソースコード
HTML
1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org"> 3<head> 4<link rel="stylesheet" media="all" th:href="@{/css/style.css}"/> 5<script type="text/javascript" src="js/script.js" th:href="@{/js/script.js}"></script> 6<meta charset="UTF-8"> 7<title>生徒検索</title> 8</head> 9<body> 10 11<h1>生徒検索</h1> 12 <form method="post" action="find_record" onsubmit="return false;"> 13 <input type="text" id="textbox"> 14 <input type="radio" name="find_radio" value="1">名前 15 <input type="radio" name="find_radio" value="2" checked>ID 16 <input type="radio" name="find_radio" value="3">電話番号 17 <input type="button" value="検索" onclick="findRecordByTextValue('textbox','find_radio');"> 18 </form> 19<div th:include="table_fragment::frag_body"></div> 20</body> 21</html> 22
ボタンクリックで呼び出されるはずの関数です。これが呼ばれたり呼ばれなかったりします。
URLの中のfind_recordはこの関数を呼ぶボタンの配置場所でもあります。
javascript
1function findRecordByTextValue(id,radioName){ 2 'use strict'; 3 var target = document.getElementById(id).value; 4 var radioNum = getSelectedRadioNum(radioName); 5 document.location.href = "find_record/?textValue=" + target + "&radioValue=" + radioNum; 6} 7
実質private関数で上のfunction findRecordByTextValueさえ動作してくれればこの関数は正常に動いております。
javascript
1function getSelectedRadioNum(radioName){ 2 var radios = document.getElementsByName(radioName); 3 var result; 4 for (var i = 0; i < radios.length; i++) { 5 if (radios[i].checked) { 6 result = i; 7 } 8 } 9 return result; 10}
java
1 @RequestMapping(value= {"/find_record","/find_record/{radioValue}"},method=RequestMethod.GET) 2 public ModelAndView findRecordGet( 3 @RequestParam(name="radioValue",required=false)Integer radioValue, 4 @RequestParam(name="textValue",required=false)String textValue, 5 ModelAndView mav) { 6 mav.setViewName("find_record"); 7 M_StudentDao dao = new M_StudentDao(jdbc); 8 List<Student> recordset = null; 9 if(radioValue==null) { 10 recordset= dao.findAll(); 11 } 12 else { 13 switch(radioValue) { 14 case 0:recordset = dao.findByNameLike(textValue); break; 15 case 1:recordset = dao.findById(textValue); break; 16 case 2:recordset = dao.findByPhoneLike(textValue); break; 17 } 18 } 19 //mav.addObject("radioValue",radioValue); 20 mav.addObject("recordSet", recordset); 21 return mav; 22 } 23 24 @RequestMapping(value="/find_record",method=RequestMethod.POST) 25 public ModelAndView findRecordPost( 26 @RequestParam("name")String name, 27 ModelAndView mav) { 28 mav.setViewName("find_record"); 29 M_StudentDao dao = new M_StudentDao(jdbc); 30 List<Student> recordset = dao.findByNameLike(name); 31 mav.addObject("recordSet",recordset); 32 return mav; 33 }
試したこと
ブラウザのURL欄に直接
http://localhost:8080/find_record/?textValue=7&radioValue=1
のようにパラメーターを打ち込んでも空のテーブルが返ってきます。
下のようにパラメーターなしのURLで読み込み直しても、やはり関数は作動しません。
http://localhost:8080/find_record/
http://localhost:8080 でindex.htmlにアクセスし、そこからhttp://localhost:8080/find_record/ にPOST methodで遷移した直後だけ~~、
正常に作動し、期待した結果が返ってきます。~~
ブラウザのURL欄に直接パラメーターを打つとデータが返ってくる場合があります。
一旦ボタンを押して結果を出した後、ブラウザの戻るボタンでページを検索前に戻した後、再度違う条件で検索すると正常に動作します。
しかしその後連続して検索しようとするとやはり関数が見つからないと言われます。
関数を外部jsファイルからHTMLに移動して直に記述すると２回目以降も動作しました。
外部jsファイルが一回しか読み込まれないのが問題のようです。
ソースコードのGit
下のページに公開しております。
Github:https://github.com/misskabu/StudentDirectory/tree/master/src
補足情報（FW/ツールのバージョンなど）
OS:Mac0S
IDE:STS(Eclipse + SpringFrameWork)
DB:MySQL（仮想サーバーのCentOS内に配置)
サーバー:localhost(vagrantで自動構築したCentOS)
コメントありがとうございます。
やってみましたが、同じ結果でした。
headの中に入れてみたり、bodyの一番上に持ってきたり試しましたが、同じ結果でした。
直に書いた時は問題なく動くのと、インクルードしても一回だけは読み込むのが不思議です。
問題の根本が違うところ（開発環境など）にあるのかもしれません。
あなたの回答
tips
プレビュー
