So, I have a table in a jsp page which shows the data fetched from a database via an ArrayList forwarded to the page. Each row of the table has a radio button corressponding to it. Now, I would like to access the elements in the row (the ArrayList's members on the selection of the corresponding radio button and then click of an 'edit' button)
Any thoughts as to how to achieve this would be very much appreciated. Here's my code for a bit intro.
<%
ArrayList<requestbean> reqjsp = new ArrayList<requestbean>();
reqjsp = (ArrayList<requestbean>) (request.getAttribute("reqdb"));
%>
<script type ="text/javascript">
function x() {
var ele = document.getElementsByName('reqradio');
var i = ele.length;
for ( var j = 0; j < i; j++ ) {
if ( ele[j].checked ) {
document.getElementById("edireq").disabled = false;
alert('request ' + ( j + 1 ) + ' selected');
//Here is where the functionality is desired to access reqjsp.get(j)
}
}
}
</script>
<input type="button" name="edireq" id="edireq" onclick="x()" value="Edit Request">
These are a few columns in my table.
<%
for ( int i = 0; i < reqjsp.size(); i++ ) {
%>
<tr>
<td> <input type="radio" name="reqradio" id="req<%=(i+1) %>"></td>
<td><%= reqjsp.get(i).getRequestid() %></td>
<td><%= reqjsp.get(i).getRequestor() %></td>
<td><%= reqjsp.get(i).getApprover() %></td>
</tr>
<%} %>
You could generate a JavaScript array with JSP code and then access this generated variable in your JavaScript. But you would not be able to change anything in the underlying Java object this way:
<script type ="text/javascript">
<%
ArrayList<requestbean> reqjsp = new ArrayList<requestbean>();
reqjsp = (ArrayList<requestbean>) (request.getAttribute("reqdb"));
%>
var myJsArray = new Array();
<%
for ( int i = 0; i < reqjsp.size(); i++ ) {
%>
myJsArray.push('<%= reqjsp.get(i) %>');
<%
}
%>
// JavaScript code to access the myJsArray array
</script>
The JSP code will generate this kind of code:
<script type ="text/javascript">
var myJsArray = new Array();
myJsArray.push('value1');
myJsArray.push('value2');
myJsArray.push('value3');
// JavaScript code to access the myJsArray array
</script>
Related
I am new to javascript and struts. I have an legacy front end uses jsp, javascript, strut. Application has a jsp which builds a list which is currently single select. Now I have a request to change it to multiple select. I have added multiple option to . But I am not able get the multiple values selected in my javascript. Here is the part of the code.
<html:html>
<form name="reimport" action = ""/>
<td>
<div>
<%if("GWSD".equals(request.getSession().getAttribute("Export")))
{ %>
<html:select property="tmI" multiple="true" size="8" value=" " >
<%
String tmId = "";
String tmName = "";
String dmId = "";
for (int i = 0; i < tmSize; i++) {
TargetTMItemOutBean item = (TargetTMOutBean)outBean.getTmList().get(i);
tmId = item.getTMId();
boolean isDisabledFound = false;
for (int j=0; j < dmSize && !isDisabledFound; j++) {
DisableOutBean dItem = (DisableOutBean)outBean.getDMList().get(j);
dmId = dItem.getDMD();
if (StringUtils.equals(tmId, dmId)) {
isDisabledFound = true;
}
}
if (!isDisabledFound) {
tmName = tmId + " - " + item.getTMName();
%>
<html:option key="<%=tmId%>" value="<%=tmName%>"/>
<%
}
}
%>
</html:select>
<%}
%>
</div>
</td>
</form>
</html:html>
Java script:
function checkReImport(tabType, cntAtributSelected, premessage, message){
if(document.reimport.tmI != null){
var selected = document.reimport.tmI;
opener.document.RBGetDataInBean.tMI.value=selected;
}
I could select multiple values from list. But in the java script I get only one. Any help is very much appreciated.
I'm creating a datalist on my webpage that sources it's values from a JavaScript array (that sources from a Java array using JSP).
Here is my code for populating the data list:
<input name="Engineer Name" list="engineer" />
<datalist id="engineer"></datalist>
<script>
//Take the engineers array and transfer to javascript array
//This is so we can source the Engineer Drop-Down menu from a file dynamically
var engineerArray = [];
<% for (int i=0; i<engineers.size(); i++) { %>
engineerArray[<%= i %>] = "<%= engineers.get(i) %>";
<% } %>
for (var i in engineerArray) {
var datalist = document.getElementById('engineer');
datalist.innerHTML += '<option value=' + engineerArray[i] + '>';
}
</script>
This code displays the datalist correctly, but on submission of the form I call another JavaScript function that contains the line:
var engineer = document.getElementById('engineer').value;
And that value ends up being undefined.
You are trying to get the value of datalist incorrectly. The selector has to be on the input element. I have modified the code for reference:
<input name="Engineer Name" id="engineerList" list="engineer" />
<datalist id="engineer"></datalist>
<script>
//Take the engineers array and transfer to javascript array
//This is so we can source the Engineer Drop-Down menu from a file dynamically
var engineerArray = [];
<% for (int i=0; i<engineers.size(); i++) { %>
engineerArray[<%= i %>] = "<%= engineers.get(i) %>";
<% } %>
for (var i in engineerArray) {
var datalist = document.getElementById('engineer');
datalist.innerHTML += '<option value=' + engineerArray[i] + '>';
}
</script>
Then get the datalist value by specifying the correct id:
var engineer = document.getElementById('engineerList').value;
I have a strange problem. My filtering table doesn't work as it should. Here is javascript function that is activated the moment select value is changed.
function filterTable(opt, coln, tbId){
var filter = opt.value.toLowerCase(),
table = document.getElementById(tbId),
trs = table.getElementsByTagName("TR"),
col = table.querySelector('th[title='+coln+']').cellIndex,
x;
for (var i = 1; i < trs.length; i++){
x = trs[i].getElementsByTagName("TD")[col];
if(x){
classes = trs[i].classList;
classes.remove(coln+'-filtered-active');
classes.remove(coln+'-filtered-hidden');
if(filter){
console.log('tekst:' + x.textContent.length + ' ' + x.textContent +' || filter:' + filter);
if (x.textContent.toLowerCase() == filter) {
classes.add(coln+'-filtered-active');
}
else {
classes.add(coln+'-filtered-hidden');
}
}
trs[i].style.display = "";
for(var k=0; k < classes.length; k++){
if(classes[k].includes('filtered-hidden')) {
trs[i].style.display = "none";
break;
}
}
}
}
}
Here is rendered (I'm working in Rails) html structured containing one of the cells that belongs to the column I want to sort by.
<td>
<div class="cardLabel feature">feature</div>
</td>
The thing is x.textContent returns not only feature but also newlines and whitespaces that amounts to 55 characters. I believe that's why my filtering method doesn't work. But I have no idea how to solve this problem.This is the way how I get data to the view:
<tbody>
<% #cards.each do |card| %>
<tr>
<td>
<%= card[:card_name].truncate(50) %>
</td>
<td>
<div class="cardLabel <%= card[:label_name].gsub(/\s+/, "").downcase %>"><%=card[:label_name].upcase %></div>
</td>
<td><%= card[:time_from]+'-'+card[:time_to]+'h' %></td>
<td><%= card[:list_name] %></td>
<td><%= card[:organization_name] %></td>
<td><%= card[:board_name] %></td>
</tr>
<% end %>
</tbody>
Try innerText. From the code you posted innerText and textContent should be the same. But I assume you have other codes that add other elements that are not displayed but are picked up by textContent
https://jsfiddle.net/msyLm8u2/
I'm having trouble to display the CSV file into HTML. How can I make the next line in my csv file into another row in HTML table using loop? I'm still new to this jsp... Please give me some ideas to make it work.
<body>
<%
String fName = "F:\\web\\Sales.csv";
String thisLine;
int count=0;
FileInputStream fis = new FileInputStream(fName);
DataInputStream myInput = new DataInputStream(fis);
%>
<table>
<%
out.print("<table border = 1><thead><tr><th>Customer</th><th>Customer Type</th><th>Purchase</th></tr></thead><tbody>");
while ((thisLine = myInput.readLine()) != null){
String strar[] = thisLine.split(";");
for(int j=0;j<strar.length;j++){
out.print("<td>" +strar[j]+ "</td>");
}
out.println("\n");
}
%>
</table>
</body>
Q: Don't you also need to print <tr> before each new row, and </tr> after?
ALSO:
You have one too many <table> elements - delete the first one.
I don't think <tbody> is necessary ... but if you have it, you should close it with </tbody>.
SUGGESTED CHANGES (I haven't actually tried them...):
<body>
<table border = 1>
<tr><th>Customer</th><th>Customer Type</th><th>Purchase</th></tr>
<%
String fName = "F:\\web\\Sales.csv";
String thisLine;
int count=0;
FileInputStream fis = new FileInputStream(fName);
DataInputStream myInput = new DataInputStream(fis);
while ((thisLine = myInput.readLine()) != null){
String strar[] = thisLine.split(";");
out.print("<tr>");
for(int j=0;j<strar.length;j++){
out.print("<td>" +strar[j]+ "</td>");
}
out.println("</tr>");
}
%>
</table>
</body>
I've tried a few different ways of finding all the checkboxes that are checked but I don't know why this one isn't working.
JavaScript:
var idList = new Array();
function getIds()
{
var loopCounter = 0;
// find all the checked checkboxes
$('input[name^="check_"]:checked').each
{
function()
{
//fill the array with the values
idList[loopCounter] = $(this).val();
loopCounter += 1;
}
};
}
function showArray()
{
alert(idList);
}
and the HTML/ERB:
<% user_project_ids = #users_projects.collect { |up| up.project_id } %>
<fieldset style="width: 400px;">
<legend>Current Projects</legend>
<table>
<tr>
<th>Project ID</th>
<th>Project Name</th>
</tr>
<% #projects.each do |project| %>
<tr>
<td><%= project.id %></td>
<td><%= project.project_number %></td>
<td><%= project.project_name%></td>
<td><input name="check_<%= project.id %>" type="checkbox"
<%=' checked="yes"' if user_project_ids.include? project.id %>></td>
</tr>
<% end %>
</table>
</fieldset>
<div onclick="getIds();">
CLICK
</div>
<button onclick="showArray()">Click Again</button>
Not sure why this isn't working but maybe someone can see what I can't.
The parameter to .each need to be in round brackets .each()
function getIds()
{
var loopCounter = 0;
// find all the checked checkboxes
$('input[name^="check_"]:checked').each(function() {
//fill the array with the values
idList[loopCounter] = $(this).val();
loopCounter += 1;
});
}
The other answer already told you about your problem, but your code can be improved. There is no need to use a loop counter, each provides the iteration number.
function getIds()
{
//reset idArray
idList = [];
// find all the checked checkboxes
$('input[name^="check_"]:checked').each(function( ind ) {
idList[ind] = $(this).val();
});
}
You do not even need the index when you have methods on the array to add element
function getIds()
{
//reset idArray
idList = [];
// find all the checked checkboxes
$('input[name^="check_"]:checked').each(function() {
idList.push( $(this).val() );
});
}