0

I have a JSP where I can create a dynamic HTML table. In that table, I can create the rows, edit the rows, and delete the rows. There's only one thing that I am unable to do, which is that I want to save this HTML table as comma separated text file if the user desires to do so. Please note that this save has to be done on Server side, not client side.

The answer that I have followed on Stack Overflow cover the client side, where I can use JavaScript and/or jQuery to perform that, but I don't want that.

Here is the complete minimal code of my JSP.

<%@page import="java.io.FileReader"%>
<%@page import="java.io.File"%>
<%@ page import="javax.script.*"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table"
border=1>
<tr>
<th>EAN</th>
<th>DS_BRAND</th>
<th>DS_RANGE</th>
<th>DS_LIV_3</th>
<th>DS_LIV_1</th>
<th>DS_EAN</th>
</tr>
<tr>
<td><input type="text" id="new_name"></td>
<td><input type="text" id="new_country"></td>
<td><input type="text" id="new_age"></td>
<td><input type="text" id="new_dsliv3"></td>
<td><input type="text" id="new_dsliv1"></td>
<td><input type="text" id="new_dsean"></td>
<td><input type="button" class="add" onclick="add_row();"
value="Add Row"></td>
</tr>
</table>
</div>
<td><input type="button" class="add" onclick="add_row_from_table();"
                value="Load CSV">
<input type="button" class="add" onclick="save_csv();"
                value="Save CSV">           </td>
<script>

    function edit_row(no) {
        document.getElementById("edit_button" + no).style.display = "none";
        document.getElementById("save_button" + no).style.display = "block";

        var name = document.getElementById("name_row" + no);
        var country = document.getElementById("country_row" + no);
        var age = document.getElementById("age_row" + no);
        var dsliv3 = document.getElementById("dsliv3_row" + no);
        var dsliv1 = document.getElementById("dsliv1_row" + no);
        var dsean = document.getElementById("dsean_row" + no);

        var name_data = name.innerHTML;
        var country_data = country.innerHTML;
        var age_data = age.innerHTML;
        var dsliv3_data = dsliv3.innerHTML;
        var dsliv1_data = dsliv1.innerHTML;
        var dsean_data = dsean.innerHTML;

        name.innerHTML = "<input type='text' id='name_text"+no+"' 
value='"+name_data+"'>";
        country.innerHTML = "<input type='text' id='country_text"+no+"' 
value='"+country_data+"'>";
        age.innerHTML = "<input type='text' id='age_text"+no+"' 
value='"+age_data+"'>";
        dsliv3.innerHTML = "<input type='text' id='dsliv3_text"+no+"' 
value='"+dsliv3_data+"'>";
        dsliv1.innerHTML = "<input type='text' id='dsliv1_text"+no+"' 
value='"+dsliv1_data+"'>";
        dsean.innerHTML = "<input type='text' id='dsean_text"+no+"' 
value='"+dsean_data+"'>";
    }
    function save_row(no) {
        var name_val = document.getElementById("name_text" + no).value;
        var country_val = document.getElementById("country_text" + 
no).value;
        var age_val = document.getElementById("age_text" + no).value;
        var dsliv3_val = document.getElementById("dsliv3_text" + no).value;
        var dsliv1_val = document.getElementById("dsliv1_text" + no).value;
        var dsean_val = document.getElementById("dsean_text" + no).value;

        document.getElementById("name_row" + no).innerHTML = name_val;
        document.getElementById("country_row" + no).innerHTML = country_val;
        document.getElementById("age_row" + no).innerHTML = age_val;
        document.getElementById("dsliv3_row" + no).innerHTML = dsliv3_val;
        document.getElementById("dsliv1_row" + no).innerHTML = dsliv1_val;
        document.getElementById("dsean_row" + no).innerHTML = dsean_val;

        document.getElementById("edit_button" + no).style.display = "block";
        document.getElementById("save_button" + no).style.display = "none";
    }
    function delete_row(no) {
        document.getElementById("row" + no + "").outerHTML = "";
    }

    function add_row() {
        var new_name = document.getElementById("new_name").value;
        var new_country = document.getElementById("new_country").value;
        var new_age = document.getElementById("new_age").value;
        var new_dsliv3 = document.getElementById("new_dsliv3").value;
        var new_dsliv1 = document.getElementById("new_dsliv1").value;
        var new_dsean = document.getElementById("new_dsean").value;

        var table = document.getElementById("data_table");
        var table_len = (table.rows.length) - 1;
        var row = table.insertRow(table_len).outerHTML = "<tr 
id='row"+table_len+"'><td id='name_row"+table_len+"'>"
                + new_name
                + "</td><td id='country_row"+table_len+"'>"
                + new_country
                + "</td><td id='age_row"+table_len+"'>"
                + new_age
                + "</td><td id='dsliv3_row"+table_len+"'>"
                + new_dsliv3
                + "</td><td id='dsliv1_row"+table_len+"'>"
                + new_dsliv1
                + "</td><td id='dsean_row"+table_len+"'>"
                + new_dsean
                + "</td><td><input type='button' id='edit_button"
                + table_len
                + "' value='Edit' class='edit' onclick='edit_row("
                + table_len
                + ")'> <input type='button' id='save_button"
                + table_len
                + "' value='Save' class='save' onclick='save_row("
                + table_len
                + ")'> <input type='button' value='Delete' class='delete' 
 onclick='delete_row("
                + table_len + ")'></td></tr>";

        document.getElementById("new_name").value = "";
        document.getElementById("new_country").value = "";
        document.getElementById("new_age").value = "";
        document.getElementById("new_dsliv3").value = "";
        document.getElementById("new_dsliv1").value = "";
        document.getElementById("new_dsean").value = "";
    }

</script>
</body>
</html>

The only thing I'm interested in here is that I want to save the content of this table in text file (comma separated) on server side.

Some other information that I'd like to share is that I'm using JDK 1.8, on Eclipse Oxygen with Tomcat 8.0 as the runtime environment. To add to that, the OS is Windows 7.

halfer
  • 19,824
  • 17
  • 99
  • 186
Sibghat Khan
  • 147
  • 1
  • 9
  • _I understand now why it's not working but so far I'm unable to find the solution for that._ Do share what you understand – mplungjan Feb 27 '18 at 15:20
  • I understand that I can't assign the Java Script variable to a Java variable. Because Java Script code will be executed after the client's action, but the JSP part will be executed first. So the function save_csv will not assign the variables correctly. When I was writing this function, I didn't know that...Please correct me if that's not the case.. – Sibghat Khan Feb 27 '18 at 15:22
  • So you need to submit your form to the server. I also suggest you post a [mcve] without the JSP since your first issue seems to be JavaScript and not JSP - a separate question (search google first) is how to save your file on the server after sending it using JavaScript or form submission – mplungjan Feb 27 '18 at 15:25
  • No Sir..I do not believe Java Script is the issue here. What I simply want is to save a dynamic HTML table as a text file on the server (which means that I can't use Java Script as it's for the client side action)... – Sibghat Khan Feb 27 '18 at 15:29
  • I have edited the code to a minimum. – Sibghat Khan Feb 27 '18 at 15:40
  • But you create the csv with JS - if that works then why tag JavaScript ? – mplungjan Feb 27 '18 at 15:45
  • Yes sir, I create the table with Java Script. But when I want to save the file, it has to be done on server side, because of that I can't use the Java Script code while saving the file. What I'm looking for is the missing code in this JSP which will save the table content as a text file on the server side. – Sibghat Khan Feb 27 '18 at 15:49
  • So you just need something like https://stackoverflow.com/questions/19510656/how-to-upload-files-on-server-folder-using-jsp – mplungjan Feb 27 '18 at 17:11
  • Not Exactly...The first thing is to save the html content as a text file, the second thing is to save the file on server using JSP...However, the user will only click on a button, he doesn't need to know anything else..Once he clicks the button, both of these actions must be performed........In other words, simply when a user clicks a button "Save File" , the content of the file must be saved to the text file on server – Sibghat Khan Feb 28 '18 at 08:38

0 Answers0