how to retrieve data from java listing using js

Question

I want to get a data from listing and retrieve to popup.. when I use getElementById, it will only get a single id from another input. not from listing that i want.. so, I've come an idea to use array.. but I don't know how.. I'm using Java Play Framework

here is my code..

display.html

<script>  

function openModifySchedule(staffId) {

if (!checkRequiredField()) {
alert("There Is Error(s) In The Form. Please Fix It Before Proceed.");
return;
}

var staffId = document.getElementById("staffId").value;

if (staffId == "") {
alert("Please Select Doctor Before Proceed");
return;
}

var url = "/DoctorSchedules/modifySchedulePopup?staffId=" + staffId;

mywindow = window.open(url,"mywindow","location=no,resizable=1,width=700,height=650,menubar=no,center=yes");
mywindow.moveTo(420,100);

}
</script>

 <input type="hidden" id="staffId" name="staffDetails.staffId"  value="${staffDetails?.staffId}">

<tbody>
    #{list items:staffScheduleList , as:'stffSchedule'} 
        <tr id="list" align="center">
            <td></td>
            <td id="scheduleDate">${stffSchedule.scheduleDate}</td>
            <td id="staffId"><a onClick="openModifySchedule()" href="#">${stffSchedule.staffId}</a></td>
            <td id="staffName">${stffSchedule.staffName}</td>
            <td id="deptName">${stffSchedule.deptName}</td>
            <td></td>
            <td></td>
            <td></td>
            <td id="contactNo">${stffSchedule.contactNo}</td>
        </tr>
    #{/list}
</tbody>

here is the function in controller..

display.java

 public static void modifySchedulePopup(String staffId){

    StaffDetails staffDetails = StaffDetails.find("byStaffId", staffId).first();

    StaffSchedule staffSchedules = StaffSchedule.find("byStaffId", staffId).first();

    renderTemplate("DoctorSchedules/doctorScheduleModifyPopup.html", staffDetails,staffSchedules);

}

hope someone can explain.

Answer 1

In the DOM, no two elements may have the same id attribute. Since all of the "td" elements in your table have id="staffId", getElementById() is free to return any one of them.

Since Play! comes with JQuery, you might was well use that instead of straight JavaScript (it's much easier). Briefly, you attach the same "click" event handler to all of the links and the click event handler knows which element was being clicked.

Here's simple snippet that demonstrates this:

<script>
  $(function() {
    $(".staff-id").click(function() { // attach the click event handler
      var staffId = $(this).text();
      alert(staffId); // open your new window here
    });
  });
</script>

#{list items:staffScheduleList, as:'stffSchedule'} 
    <tr id="list" align="center">
        <td></td>
        <td>${stffSchedule.scheduleDate}</td>
        <td><a class="staff-id" href="#">${stffSchedule.staffId}</a></td>
        <td>${stffSchedule.staffName}</td>
        <td>${stffSchedule.deptName}</td>
        <td></td>
        <td></td>
        <td></td>
        <td id="contactNo">${stffSchedule.contactNo}</td>
    </tr>
#{/list}