javascript 在运行时访问 arraylist 中的特定对象

Question

我正在将一个数组列表从控制器传递给这个 homepage.jsp。我正在使用 jstl 标签显示值。

<c:forEach items="${orgList}" var="item">
<tr>
 <td>
    <input type="radio" class="rbutton" name="chooseOrg" value="${item.orgId}">&nbsp&nbsp&nbsp
    <a href="http://localhost:8080/SpringDemo/deptPage/${item.orgId}">
    <c:out value="${item.orgName}" /></a>
 </td>
 <td>
    <c:out value="${item.orgDesc}" />
 </td>
</tr>

这是我所在的代码 iterating.It 显示得非常好。我希望这些值在 javascript.This 中的其他地方是我到目前为止尝试过的：

    var radioButtons = $("#orgDisplayForm input:radio[name='chooseOrg']");
    var totalFound = radioButtons.length;
    var checkedRadioButton = radioButtons.filter(':checked');
    var selectedIndex = radioButtons.index(checkedRadioButton);

selectedindex 为我提供了 arraylist.I 使用 alerts.However 检查它的正确索引下面的警报总是给出 arrayList orgList 中的第一个值。

    alert("${orgList.get(selectedIndex).orgName}");
    $("#updateName").val("${orgList.get(selectedIndex).orgName}");

我的动机是获取 selectedIndex 并从 arralist orgList 中获取相应的组织名称，并将其设置为 ID 为 "updateName" 的输入字段。期待帮助。

供参考的完整代码为：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<style>
html,body {
    width: 100%;
}
#insertPopUp,#updatePopUp {
    display:none;
}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>


$(document).ready(function(){
 /*    $("#insertPopUp").hide();    in css its display had to be made none*/



 $("#insert").click(function(){

     $("#insertPopUp").dialog({
            autoOpen:false,
            show: 'slide',
            resizable: false,
            position:"relative",
            stack: true,
            height: 'auto',
            width: 'auto',
            modal:true
        }); 
        $("#insertPopUp").dialog("open");
});

$("#popUpSave").click(function(){
    $.ajax({  
          type : 'POST',  
          url : "http://localhost:8080/SpringDemo/insertOrganization/"
          +"?insertName="+$("#insertName").val()
                  +"&insertDescription="+$("#insertDescription").val(), 
          success : function(){
              $("#insertPopUp").dialog("close");
              window.location.href="http://localhost:8080/SpringDemo/homePage";
          }       

      });
}); 


$("#delete").click(function(){  
    //to get the index of the selected option in a radio button group

    /* var radioButtons = $("#orgDisplayForm input:radio[name='chooseOrg']");
    // this should contain the count of all your radio buttons
    var totalFound = radioButtons.length;
    // this should contain the checked one
    var checkedRadioButton = radioButtons.filter(':checked');
    // this should get the index of the found radio button based on the list of all
    var selectedIndex = radioButtons.index(checkedRadioButton);
    alert(selectedIndex); */



    // to get value of the selected option in a radio button group    
    var orgid = $("#orgDisplayForm input[name='chooseOrg']:checked").val();
    $.ajax({  
        type : 'POST',  
        url : "http://localhost:8080/SpringDemo/deleteOrganization/" +"?orgid="+orgid, 
        success : function(){
          window.location.href="http://localhost:8080/SpringDemo/homePage";
        }         
    }); 
});


$("#update").click(function(){
    debugger;
    var orgid = $("#orgDisplayForm input[name='chooseOrg']:checked").val();
    $("#updatePopUp").dialog({
        autoOpen:false,
        show: 'slide',
        resizable: false,
        position:"relative",
        stack: true,
        height: 'auto',
        width: 'auto',
        modal:true
    }); 
    $("#updatePopUp").dialog("open");

    var radioButtons = $("#orgDisplayForm input:radio[name='chooseOrg']");
    // this should contain the count of all your radio buttons
    var totalFound = radioButtons.length;
    // this should contain the checked one
    var checkedRadioButton = radioButtons.filter(':checked');
    // this should get the index of the found radio button based on the list of all
    var selectedIndex = radioButtons.index(checkedRadioButton);
    /* alert("${selectedIndex}"); */
    /* var name = ${orgList};
    <c:out value="${colors[0]}"/> */
    /* $("#updateName").text($orgList[selectedIndex].orgName); */
    /* alert("<c:out value="${orgList[0].orgName}"/>");  */
    /* $("#updateName").text("<c:out value="${orgList[0].orgName}"/>");  */
    /* alert("<c:out value="${orgList.get(selectedIndex).orgName}"/>");
    alert("${orgList.get(selectedIndex).orgName}"); */


    //$("#updateName").val("${orgList.get(selectedIndex)}"); 
    $("#updateName").val("${orgList.get(selectedIndex)}");


    <%-- alert("${orgList.get(2).orgName}");
    $("#updateName").text(<%=${orgList.get(i)}%>) --%>; 



    /* $("#updateDescription").text(${orgList[selectedIndex].orgDesc}); */

});

$("#popUpUpdate").click(function(){


    var orgid = $("#orgDisplayForm input[name='chooseOrg']:checked").val();
    $.ajax({  
          type : 'POST',  
          url : "http://localhost:8080/SpringDemo/updateOrganization/"
          +"?updateName="+$("#updateName").val()
                  +"&updateDescription="+$("#updateDescription").val()
                  +"&orgid="+orgid, 
          success : function(){
              $("#updatePopUp").dialog("close");
              window.location.href="http://localhost:8080/SpringDemo/homePage";
          }       

      });
});

});

</script>

</head>
<body>
<br>
<br>
<br>
     <form:form id="orgDisplayForm">
        <table align="center" width="60%">
            <col width="30%">
            <col width="30%">
            <tr>
                <th align="left">Organization Name</th>
                <th align="left">Description</th>
            </tr>

            <c:forEach items="${orgList}" var="item">
                <tr>
                    <td>
                    <input type="radio" class="rbutton" name="chooseOrg" value="${item.orgId}">

                    &nbsp&nbsp&nbsp
                    <%-- <a  id ="deptAnchor" onclick=clickOrg(${item.orgId}) href="http://localhost:8080/SpringDemo/deptPage/"+${item.orgId}> --%>

                    <a href="http://localhost:8080/SpringDemo/deptPage/${item.orgId}">
                    <c:out value="${item.orgName}" /></a>
                    </td>
                    <td><c:out value="${item.orgDesc}" /></td>
                </tr>
                <tr><td></td><td></td></tr>
            </c:forEach>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr>

             <td><button type="button" id="insert">Insert</button>&nbsp&nbsp&nbsp<button type="button" id= "update">Update</button>&nbsp&nbsp&nbsp<button type="button" id="delete">Delete</button></td>
            </tr>
        </table>

        <div id="insertPopUp">
        <form:form method="POST" action="/insertOrganization">
        <p><label for="name">Organization name</label><p><input type="text" name="name" id="insertName" /></p></p>
        <p><label for="description">Organization description</label><p><input type="text" name="description" id="insertDescription" /></p></p>
        <button type="submit" id="popUpSave">Save</button>      
        </form:form>
        </div>


        <div id="updatePopUp">
        <p><label for="name">Organization name</label><p><input type="text" name="name" id="updateName" /></p></p>
        <p><label for="description">Organization description</label><p><input type="text" name="description" id="updateDescription" /></p></p>
        <button type="submit" id="popUpUpdate">Update</button>      
        </div>


    </form:form> 
</div>

</body>

Answer 1

我会说问题出在这部分：

alert("${orgList.get(selectedIndex).orgName}");
$("#updateName").val("${orgList.get(selectedIndex).orgName}");

在这里，您试图混合两种东西 - 服务器端 JSP 代码 (${orgList.get(selectedIndex).orgName}) 和 浏览器-边Javascript。服务端代码被求值一次，在HTML代的时候，那个时候selectedIndex的值大概是0，给你orgName orgList 的第一个元素的值。该值随后出现在 JavaScript 代码中，由浏览器处理。

我会尝试添加一个 JavaScript 数组，其中包含 orgList:

中所需的值

<script>
  var jsOrgList = [];
  var jsItem;
</script>
<c:forEach items="${orgList}" var="item">
  // your HTML code to generate table rows
  <script>
  jsItem = new Object();
  jsItem.orgName = '${item.orgName}';
  jsItem.orgDesc = '${item.orgDesc}';
  // ... etc., all properties needed for browser-side processing
  jsOrgList.push(jsItem);
  </script>
</c:forEach>

然后您可以在 Javacsript 中使用 jsOrgList 数组。

免责声明： 上面的代码应该被认为是一个 Quick-and-Dirty-Hack，有更好的方法可以将后端值获取到前端。

Answer 2

谢谢 Jozef Chocholacek ...您的方法工作正常。.我找到了另一种方法..迭代 table 并获取显示在特定 row.The 处的值，下面的代码也有效.

var radioButtons = $("#orgDisplayForm input:radio[name='chooseOrg']");
var totalFound = radioButtons.length;
var checkedRadioButton = radioButtons.filter(':checked');
var selectedIndex = radioButtons.index(checkedRadioButton);


$('#orgDisplayTable tr').each(function() {
    if (this.rowIndex==selectedIndex+1)
        {

    var name = ( this.cells[0].innerText|| this.cells[0].textContent);
    var desc = ( this.cells[1].innerText|| this.cells[1].textContent);
    $("#updateName").val($.trim(name)); //trim to get rid of whitespaces in the begining or ending
    $("#updateDescription").val(desc);
    return false;
        }
        });

javascript 在运行时访问 arraylist 中的特定对象

Access a specific object in an arraylist at runtime in javascript

javascript

jquery

jsp

jstl

arraylist