CODEWITHSUNDEEP
javascriptjavajsp
aswathy
aswathy

Reputation: 831

javascript not displaying in jsp page

I wrote a code for retrieving data from database table and displaying it. The entire table is passed as arraylist through servlet to jsp page. Inside the jsp.. first only name is displayed in dropdown box. The objective was to choose a name from dropdown , and rest of the data corresponding to the name is displayed after the name is chosen. Arraylist has been passed correctly. Dropdown is working fine. but javascript code to display the rest is not working. please help.code below iv shown only for one field. ie,for id. output page with dropdown 

<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>

Upvotes: 1

Views: 775

Answers (1)

daiscog
daiscog

Reputation: 12057

There are a few problems with your code.

First of all, scriptlets are deprecated and should be avoided. Use JSTL instead.

Secondly, your JavaScript code has no visibility of any of the variables used in your Java code. The Java is executed on the server, then some text (the HTML response) is sent to the browser. If it contains JavaScript, the browser runs the JavaScript.

I've rewritten what you're trying to achieve using JSTL instead of scriptlets for flow control and changing the JavaScript to get what you seem to be attempting:

<%@ 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>

Edit:

I've just reread the question and realised that I haven't addressed your additional need of populating other inputs with other attributes of the customer.

As I said above, JavaScript has no visibility of data which is on the server, including your List of Customer objects. There are a few options available to you, but these are the two I would recommend:

Use HTML5 Data Attributes

HTML5 introduced data-* attributes for elements which can be accessed via your scripts. For example, you could do something like this:

  <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>

Then in the 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
}

The downside of this approach is that if you have a large list with a high number of attributes you want to make available, that's a lot of text in the response.

Use AJAX

You could make an AJAX call in response to the select change and have the server return the customer data encoded in JSON format. The JavaScript would then decode the JSON and populate the elements with the correct values.

You'd need to research how to do this (there are plenty of tutorials available) but the steps in response to your select changing would be:

  1. Disable the select box to prevent another change before you get the AJAX response from the server
  2. Show some sort of throbber to indicate to the user that the data is being loaded
  3. Make an AJAX request indicating the ID of the selected customer
  4. The server responds with a JSON-encoded version of the corresponding customer object.
  5. Update the inputs using the JSON data.
  6. Hide the throbber and re-enable the select element.

The downside of this approach is that you'll need to learn how to properly use AJAX, including adding code to deal with errors (e.g., if the user loses network connectivity and you get no response from server to your AJAX request, you need to show an error message and have some sort of "retry" mechanism).

Upvotes: 1

Related Questions