jquery - Access a specific object in an arraylist at runtime in javascript -
i passing arraylist controller homepage.jsp. displaying values using jstl tags.
<c:foreach items="${orglist}" var="item"> <tr> <td> <input type="radio" class="rbutton" name="chooseorg" value="${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> this code iterating.it displaying fine. want these values somewhere else in javascript.this tried far:
var radiobuttons = $("#orgdisplayform input:radio[name='chooseorg']"); var totalfound = radiobuttons.length; var checkedradiobutton = radiobuttons.filter(':checked'); var selectedindex = radiobuttons.index(checkedradiobutton); selectedindex gives me right index of arraylist.i checked using alerts.however alert below gives first value in arraylist orglist.
alert("${orglist.get(selectedindex).orgname}"); $("#updatename").val("${orglist.get(selectedindex).orgname}"); my motive take selectedindex , correspoding orgname arralist orglist , set input field id "updatename".looking forward help.
the entire code reference :
<%@ 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 display had 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 index of selected option in radio button group /* var radiobuttons = $("#orgdisplayform input:radio[name='chooseorg']"); // should contain count of radio buttons var totalfound = radiobuttons.length; // should contain checked 1 var checkedradiobutton = radiobuttons.filter(':checked'); // should index of found radio button based on list of var selectedindex = radiobuttons.index(checkedradiobutton); alert(selectedindex); */ // value of selected option in 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']"); // should contain count of radio buttons var totalfound = radiobuttons.length; // should contain checked 1 var checkedradiobutton = radiobuttons.filter(':checked'); // should index of found radio button based on list of 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}">     <%-- <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>   <button type="button" id= "update">update</button>   <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>
i problem in part:
alert("${orglist.get(selectedindex).orgname}"); $("#updatename").val("${orglist.get(selectedindex).orgname}"); here, trying mix 2 things - server-side jsp code (${orglist.get(selectedindex).orgname}) , browser-side javascript. server-side code evaluated once, @ time of html generation, , @ time, selectedindex value 0, gives orgname value of first element of orglist. value present in javascript code, processed browser.
i try add javascript array needed values orglist:
<script> var jsorglist = []; var jsitem; </script> <c:foreach items="${orglist}" var="item"> // html code generate table rows <script> jsitem = new object(); jsitem.orgname = '${item.orgname}'; jsitem.orgdesc = '${item.orgdesc}'; // ... etc., properties needed browser-side processing jsorglist.push(jsitem); </script> </c:foreach> then can use jsorglist array in javacsript.
disclaimer: above code should considered quick-and-dirty-hack, there better methods back-end values front-end.
Comments
Post a Comment