jspページにJavaScriptが表示されない

データベーステーブルからデータを取得して表示するコードを作成しました。テーブル全体がarraylistとしてサーブレットからJSPページに渡されます。 jspの内部では、最初の名前のみがドロップダウンボックスに表示されます。目的は、ドロップダウンから名前を選択し、名前が選択された後に名前に対応する残りのデータが表示されるようにすることでした。 Arraylistは正しく渡されました。ドロップダウンは正常に動作しています。しかし、残りの部分を表示するJavaScriptコードは機能していません。助けてください。以下のivは、1つのフィールドについてのみ表示されています。すなわち、idのために。 output page with dropdown jspページにJavaScriptが表示されない

<body> 
<form action="Servletname" method="post" name="searchdatabase"> 
<%int i=0; 
ArrayList<Cust> newlist=(ArrayList<Cust>) request.getAttribute("CusList"); 
if(newlist.size()>0){ 
%> 

<table> 
<tr> 
<td> name :</td> 
<td> 
<select id="selectUsers" name="users" onChange='Choice();'> 
<option> </option> 
<%for(Cust c:newlist){ %> 
<option value="<%=c.getCustId()%>"> <%=c.getName() %></option> 

<%}%> 
</select> 
</td></tr> 
<tr> 
<td> id :</td> 
<td> 
<input type="text" id="ids" name="id" > 
</td></tr> 
</table> 
</form> 

<script type="text/javascript"> 
    function Choice() { 
      //x = document.getElementById("users"); 
      y = document.getElementById("selectUsers"); 
x=y.selectedIndex; 

Cust c1= newlist.get(y.selectedIndex); 
document.getElementById("ids").value =c.getCustId(); 
} 
</script> 
<%} %> 
</body>

出典

2016-04-01 aswathy

JavaScript（クライアント側）とJava（サーバー側）コードが混在しています。 http://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming- PHPに関する質問がありますが、原則は同じです。 JavaScriptはユーザーのブラウザで実行され、Javaがサーバー上で実行されると、応答がブラウザに送信されます。 – megaflop

javascript Choice関数は、ページのロード時にonChangeイベントが発生しないため、ページのロード時に呼び出されません。 –

また、スクリプトレットの使用を中止してください（ '<％... [java code] ...％>'ビット）。 JSPページのフロー制御のための良いJSTLチュートリアルを探してください。 – megaflop

あなたのコードを持ついくつかの問題があります。

まず、スクリプトレットは推奨されていないので、避けてください。代わりにJSTLを使用してください。

第2に、JavaScriptコードでは、Javaコードで使用される変数の可視性がありません。 Javaがサーバー上で実行され、次にテキスト（HTML応答）がブラウザに送信されます。 JavaScriptが含まれている場合、ブラウザはJavaScriptを実行します。

私はあなたがしようとしているように見えるものを手に入れるためにはJavaScriptを代わりに、フロー制御のためのスクリプトレットのJSTLを使用して達成しようと変更しているものに書き換えました：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<body> 
<form action="Servletname" method="post" name="searchdatabase"> 
<c:if test="${not empty CusList}"> 
    <table> 
    <tr> 
    <td> name :</td> 
    <td> 
    <select id="selectUsers" name="users" onChange='Choice();'> 
    <option> </option> 
    <c:forEach items="${CusList}" var="c"> 
    <option value="${c.custId}"> <c:out value="${c.name}" /></option> 
    </c:forEach> 
    </select> 
    </td></tr> 
    <tr> 
    <td> id :</td> 
    <td> 
    <input type="text" id="ids" name="id" value="${CusList[0].custId}" > 
    </td></tr> 
    </table> 
    <!-- Note that I've moved the closing form tag and put it outside of this c:if block 
    because putting it here means it will only be output if your List is not empty --> 

    <script type="text/javascript"> 
    function Choice() { 
    var y = document.getElementById("selectUsers"); 
    var x = y.selectedIndex; 
    document.getElementById("ids").value = y.children[x].value; 
    } 
    </script> 
</c:if> 
</form><!-- outside of c:if because the opening tag is also outside of c:if --> 
</body>

編集：

私はただの質問を読んで、他のインプットに顧客の他の属性を追加する必要性については言及していません。

上記のように、JavaScriptでは、お客様のListオブジェクトを含むサーバー上のデータの可視性がありません。私が推薦するそこに利用できるいくつかのオプションがありますが、これらは2つです：

使用HTML5のデータは、HTML5は、スクリプトを介してアクセスすることができる要素のためのdata-* attributesを導入

属性。たとえば、あなたがこのような何か行うことができます：

<c:forEach items="${CusList}" var="c"> 
    <option 
     value="${c.custId}" 
     data-surname="<c:out value="${c.surname}" />" 
     data-tel="<c:out value="${c.tel}" />"><!-- etc --> 
     <c:out value="${c.name}" /> 
    </option> 
    </c:forEach>

を次にJavaScriptで：

function Choice() { 
    var y = document.getElementById("selectUsers"); 
    var x = y.selectedIndex; 
    var opt = y.children[x]; 
    document.getElementById("ids").value = opt.value; 
    document.getElementById("surname").value = opt.dataset.surname; 
    document.getElementById("tel").value = opt.dataset.tel; 
    // etc 
}

この方法の欠点は、あなたが、属性の数が多い大規模なリストを持っている場合、あなたがしたいということです利用できるようにするには、それは応答の中にたくさんのテキストがあります。

使用AJAX

あなたは選択の変化に応じて、AJAX呼び出しを行うと、サーバーがJSON形式でエンコードされた顧客データを返す可能性があります。 JavaScriptはJSONをデコードし、要素を正しい値で埋め込みます。

あなたがこれを行う方法を研究する必要があると思います（利用可能なチュートリアルの多くがあります）が、あなたの選択変化に応じて、手順は次のようになります。

があなたの前に別の変化を防止するために選択ボックスを無効にしますサーバー
からAJAXの応答を取得し、サーバーがJSON-で応答選択した顧客
のIDを示すAJAX要求を行い、データが
をロードされていることをユーザに示すためにスロバーのいくつかの並べ替えを表示しますコード化されたcorのバージョン顧客オブジェクトに応答する。
JSONデータを使用して入力を更新します。
throbberを非表示にして、select要素を再度有効にします。

このアプローチの欠点は、エラーに対処するためのコードを追加するなど、AJAXを正しく使用する方法を学ぶ必要があることです（たとえば、ユーザーがネットワーク接続を失ってサーバーからAJAXリクエストでは、エラーメッセージを表示し、何らかの「再試行」メカニズムが必要です）。

出典

2016-04-01 10:58:18 megaflop

（ちなみに、ユーザーが選択ボックスを変更したことに応答して "ids"入力要素の値を変更したい場合は、 'readonly'属性を追加して、ユーザーがそれを独立して変更するのを止めてください） – megaflop

ありがとう@diascog。追加する項目がさらにある場合すなわち、私が付けた画像のように、arraylistのデータの残りの部分。どのスクリプトをjavascriptに追加すればいいですか？ – aswathy

jspページにJavaScriptが表示されない

答えて

関連する問題