10

I have a dropdown box in JSP, listing a Java object (accessing the object through the MVC controller's addAttribute). Now, on selection of an option from the dropdown box, I would like to display the selected employee's other details (example - ${employee.employeeCV}, ${employee.employeeName}) in a div. I have a JavaScript function for that (displayCV()). But I am not sure how to do this.

JSP -

<c:forEach items="${employees}" var="employee">
  <option value="${employee.id}" onclick="displayCV();">
    ${employee.employeeName}
  </option>
</c:forEach>

<b>CV:</b>

JavaScript

function displayCV() {
    var valueSelected = $('#employeeList').val();
    var div = $('#candidateDiv');
}

How can I do this?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
sara
  • 405
  • 2
  • 6
  • 15

3 Answers3

16

You can't access Java classes directly from JavaScript. You have to use some kind of web service communication between the JavaScript (client) and Java (server). You can make use of the onchange event which will send a request to the server to return XML/JSON which you can parse to get the data (I see you're using jQuery, and it has parseJSON method already) and update the corresponding node in the DOM.

Another easier way, though, that is not multi-user friendly (because it can't detect updates) is to "convert" the Java object to JavaScript and update the data using that object (still using onchange). Something like:

// This is JavaScript code written in the JSP
var employees = {
  <c:forEach items="${employees}" var="employee">
  "${employee.id}": {
    name:"${employee.employeeName}",
    cv:"${employee.employeeCV}",
  },
  </c:forEach>
}

Now when JSP parses this, it would generate, for instance:

var employees = {
  "1": {
    name:"foo",
    cv:"cv1",
  },
  "2": {
    name:"bar",
    cv:"cv2",
  },
}
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
LeleDumbo
  • 9,192
  • 4
  • 24
  • 38
  • Hi, I see what u r saying, for some reason, i can't use json/Xml now. Secondly, i want to display the employeeCV of just one employee who is selected from the dropdown box. Thanks – sara Jul 05 '11 at 01:44
  • COuld anybody help me out with this please?? – sara Jul 05 '11 at 02:06
  • You don't get my point then (2nd solution). When the selection change, you could query employees map to get the data of the just chosen dropdown. Assuming the dropdown named employeedd, you can use employees[employeedd.value].name an employees[employeedd.value].cv to get them. – LeleDumbo Jul 05 '11 at 02:12
  • @LeleDumbo Hello, I am trying to follow you snippet. Do you have any idea why I am seeing this error? http://mural.uv.es/jumaru/images/javascript.png – Spacemonkey May 29 '13 at 14:26
  • Because of what's written in the popup (the message is clear enough, I guess). Note that trailing comma is valid in ECMAScript 5 (which most browsers implement), I don't know how JSP parser sees this, but just follow what it says (i.e. remove that trailing comma). – LeleDumbo May 30 '13 at 06:38
  • Exactly what I was looking for. Very helpful – King Aug 02 '17 at 01:41
3

Meta of what LeleDumbo said here already:

First, you must understand that JSP is a server-side view technology, whereas JavaScript typically runs on the client (browser).

Now, how you solve the problem in hand. So, you can make an Ajax request from your JavaScript code, which will fetch you the data in JSON/XML format. Then, you can present that data in the browser using JavaScript.

Further reading: jQuery Ajax API and code samnple snippets

Adeel Ansari
  • 39,541
  • 12
  • 93
  • 133
1

Call the function on the onchange event of select instead of onclick of options. And use:

document.getElementById('GrdDamagedstock_tplRowEdit_ctl00_cmbFromBin').options[ele.options.selectedIndex].innerHTML;

to get the selected value.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Devram Kandhare
  • 771
  • 2
  • 8
  • 20