Question

Ok, so I’m learning web design as a co-op at a company. However, the department I’m in is lacking in knowledgeable people in web design. So here we go…

Building a site that will allow the department to manage PTO. I want to implement ajax b/c the main page will have a calendar system so the manager can view the PTO week by week. As a precursor to that, I’m attempting to implement ajax with the “add Employee” page for practice.
However, I can’t seem to figure out what I’m missing (aka, why it’s not doing anything)

This page just needs to add the new employee to the database. No display needed.

The main page just has 4 text fields and I get the information from those fields in javascript like so

    var firstName = document.getElementById("firstNameField");
var lastName = document.getElementById("lastNameField");
var manager = document.getElementById("managerField");
var networkID = document.getElementById("networkIDField");

Simple enough so far.

So I set up the ajax code like so, (this is gathered from what I’ve read.

 var url = "addEmpJSP.jsp?firstNameField=" +   escape(firstName)+"&lastNameField="+escape(lastName)+"&managerField="+escape(manager)+"&networkIDField="+escape(networkID);
  xmlhttp.open("POST",url,true);
  xmlhttp.onreadystatechange=dummy;
  xmlhttp.send(null);

This is the part where I’m assuming it’s correct as I’m still learning ajax and how it works. I don’t think I need to handle a response as I simply want the called jsp file to automatically do whats needed. (if that’s possible).

The jsp file looks like this

<%

ResultSet rsEmpl;
Connection connection1 = getDBConnection();
Statement statment1=connection1.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_UPDATABLE);

String fName = request.getParameter("firstNameField");
String lName = request.getParameter("lastNameField");
String manager = request.getParameter("managerField");
String networkID = request.getParameter("networkIDField");
Int empId = 0;

String EditEmplSQL = "select * from PTO_employee";
rsEmpl=statment1.executeQuery(EditEmplSQL);


rsEmpl.last();
empId = rsEmpl.getRow() - 1;


statement1.execute("INSERT INTO PTO_employee VALUES ("+empID+","+lName+","+fName+","+0+","+2+","+networkID);

%>

I have a button on the page that executes the javascript function that contains the ajax info. I’m avoiding jquery atm b/c I’m trying to understand this stuff and how it works before I attempt to use “shortcuts” like jquery. I’m working towards a degree in Software Engineering so understanding this stuff is my priority, not getting it done.(that’s just a bonus) If you need anymore information I can provide it. Sorry for my lack of knowledge and if this is completely off base then 🙁

Answer 1

The main page just has 4 text fields and I get the information from those fields in javascript like so

var firstName = document.getElementById("firstNameField");
var lastName = document.getElementById("lastNameField");
var manager = document.getElementById("managerField");
var networkID = document.getElementById("networkIDField");

That gives you whole HTML DOM elements back, not the values of those elements. HTML DOM elements are like Java classes, having properties, methods and so on. Assuming that it are HTML input elements like <input>, then use their value property instead to get the value. So:

var firstName = document.getElementById("firstNameField").value;
var lastName = document.getElementById("lastNameField").value;
var manager = document.getElementById("managerField").value;
var networkID = document.getElementById("networkIDField").value;

---

So I set up the ajax code like so, (this is gathered from what I’ve read.

var url = "addEmpJSP.jsp?firstNameField=" +   escape(firstName)+"&lastNameField="+escape(lastName)+"&managerField="+escape(manager)+"&networkIDField="+escape(networkID);
xmlhttp.open("POST",url,true);
xmlhttp.onreadystatechange=dummy;
xmlhttp.send(null);

The escape() is the wrong function. It escapes JS syntax, it does not encode URI components. You should be using encodeURIComponent() function instead.

---

The jsp file looks like this

...
Int empId = 0;
...

This doesn’t compile. It should be int instead.

...
String EditEmplSQL = "select * from PTO_employee";
rsEmpl=statment1.executeQuery(EditEmplSQL);
rsEmpl.last();
empId = rsEmpl.getRow() - 1;
...

Unnecessarily overcomplicated. Learn how to use DB builtin sequences/autoincrement IDs. Refer the DB specific manual or ask DB admin for help.

...
statement1.execute("INSERT INTO PTO_employee VALUES ("+empID+","+lName+","+fName+","+0+","+2+","+networkID);
...

You should put quotes around string values in the SQL query. Assuming that lName, fName and networkID are strings, not numbers, then it should look like this:

statement1.execute("INSERT INTO PTO_employee VALUES (" + empID + ",'" + lName + "','" + fName + "'," + 0 + "," + 2 + ",'" + networkID + "'");

But you have there a huge SQL injection attack hole and you also don’t seem to close DB resources at all after use, so they may leak away and cause your webapp to crash sooner or later because the DB runs out of resources. Use PreparedStatement to create a parameterized SQL query and use its setters to set the values. Close the resources in finally block.

After all, reading the server logs should provide you information about compile errors and any server exceptions. Reading the ajax response should provide you information about the response status and body. Your core problem was that you ignored it and thus didn’t have any chance to understand what is happening.