Hi all I have (just like the rest) inherited some struts 1 code. I have had need to add a few more pages to this project.
What I cannot figure out is how to map several distinct but similarly natured input elements to my ActionForm.
Let me elaborate. I create a new <Input> element dynamically as the user inputs more and more items (I use the YUI autocomplete form element and for each entered input I add it as an input element to my form and draw a new YUI autocomplete - complex sounding, I know)
So... My form looks a bit like (... after some prettifying and some such...):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>My Cool App - Test Case Builder</title>
<link rel="stylesheet" type="text/css" href="../script/yui/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../skins/myCoolApp/button/button.css" />
<link rel="stylesheet" type="text/css" href="../script/yui/autocomplete/assets/skins/sam/autocomplete.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../skins/myCoolApp/testcase.css" />
<!-- YUI JAVA SCRIPTS -->
<script type="text/javascript" src="../script/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../script/yui/element/element-min.js"></script>
<script type="text/javascript" src="../script/yui/button/button-min.js"></script>
<script type="text/javascript" src="../script/yui/datasource/datasource-min.js"></script>
<script type="text/javascript" src="../script/yui/autocomplete/autocomplete-min.js"></script>
<!-- APP JAVA SCRIPTS -->
<script type="text/javascript" src="../script/myCoolApp/myCoolApp.js" ></script>
<script type="text/javascript" src="../script/myCoolApp/stack.js" ></script>
<script type="text/javascript" src="../script/myCoolApp/testcase/testcase.js"></script>
<script type="text/javascript" src="../script/myCoolApp/testcase/default-data.js" ></script>
<script type="text/javascript" src="../script/myCoolApp/testcase/data-structs.js" ></script>
<script type="text/javascript" src="../script/myCoolApp/testcase/ui-elements.js" ></script>
</head>
<body class="cf010">
<div id="wrap">
<div id="header">
<div id="main-header">
COOL APP
</div>
</div>
<div id="main-body">
<div id="content">
<div class="col main">
<div id="main">
<form method="post" id="testcaseForm" class="typea" action="">
<fieldset>
<legend>Test Case Builder</legend>
<div id="tk1" class="tabcontrol">
<ul class="tabs">
<li class="first active">
<a href="#">
<span>General</span>
</a>
</li>
<li class="last">
<a href="#">
<span>Parameters</span>
</a>
</li>
</ul>
<div id="tab0" class="tc-panel">
<dl class="cls9">
<dt>
<label for="scenario">Choose Scenario:</label>
</dt>
<dd>
<input type="text" id="scenario" name="scenario" class="text" />
<span id="scenarioToggle"></span>
<div class="auto-complete" id="scenarioContainer"></div>
</dd>
<dt>
<label for="ruleID">Choose Rule ID:</label>
</dt>
<dd>
<input type="text" id="ruleID" name="ruleID" class="text" />
<span id="ruleIDToggle"></span>
<div class="auto-complete" id="ruleIDContainer"></div>
</dd>
<dt>
<label for="Test Case Name" accesskey="t"><span class="accesskey">T</span>est Case Name:</label>
</dt>
<dd>
<input type="text" id="testCaseName" name="testCaseName" class="text" />
</dd>
</dl>
</div>
<div id="tab1" class="tc-panel hidden">
<div class="toolbar" id="action-bar">
<ul>
<li class="first">
<a title="select all" href="#" id="btmSelectAll" class="button">
<span>select all</span>
</a>
</li>
<li>
<a title="remove row" href="#" id="btmRemove" class="button">
<span>remove row</span>
</a>
</li>
<li>
<a title="undo last" href="#" id="btmRollBack" class="button disabled">
<span>undo last</span>
</a>
</li>
<li class="last">
<a title="accept row" href="#" id="btmAccept" class="button disabled">
<span>accept row</span>
</a>
</li>
</ul>
</div>
<div id="param.list" class="gridclip">
<table id='param.list.tbl' class='grid modela' >
<caption>Test Case Summary</caption>
<col/><col/><col/>
<thead>
<tr>
<th class='hl center first'>
<input class='grid-select-all' type='checkbox' />
<th>
<th scope='col'>Row</th>
<th scope='col'>Parameter</th>
<th scope='col' class='last'>Value</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope='row'>Total</th>
<td colspan='3'>2 parameters as Test Case input</td>
</tr>
</tfoot>
<tbody id='param.list.tbl.body'>
<tr class='odd'>
<td class='rowcheck center first'>
<input value='param1###value1' id='cb1' name='SelectedRows' class='grid-select-row' type='checkbox'/>
</td>
<td class='id'>1</td>
<td>param1</td>
<td class='last'>value1</td>
</tr>
<tr class='even'>
<td class='rowcheck center first'>
<input value='param2###value2' id='cb2' name='SelectedRows' class='grid-select-row' type='checkbox'/>
</td>
<td class='id'>2</td>
<td>param2</td>
<td class='last'>value2</td>
</tr>
<tr class='odd'>
<td class='rowcheck center first' />
<td class='id'><em>new</em></td>
<td>
<dl class='clsTable'>
<dt>
<input type='text' id='param' name='param' class='text paramInput' />
</dt>
<dd>
<span id='paramToggle' />
</dd>
<div class='auto-complete' id='paramContainer' />
</dl>
</td>
<td class='last'>
<dl class='clsTable'>
<dt>
<input type='text' id='value' name='value' class='text valueInput' />
</dt>
</dl>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div> <!-- tabcontrol -->
</fieldset>
<div class="submit-box">
<input type="submit" name="formRun" id="formRun" class="form-save"
value="Execute" accesskey="x" title="Run: Press Alt + [Shift] + x" />
<input type="submit" name="formSave" id="formSave"
value="Save" accesskey="s" title="Save: Press Alt + [Shift] + s" />
<input type="submit" name="formLoad" id="formLoad"
value="Load" accesskey="l" title="Load: Press Alt + [Shift] + l" />
<input type="submit" name="formCancel" id="formCancel" class="form-cancel"
value="Cancel" accesskey="c" title="Cancel: Press Alt + [Shift] + c" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
As you can see the following is pretty much a duplicate:
<tr class='odd'>
<td class='rowcheck center first'>
<input value='param1###value1' id='cb1' name='SelectedRows' class='grid-select-row' type='checkbox'/>
</td>
<td class='id'>1</td>
<td>param1</td>
<td class='last'>value1</td>
</tr>
<tr class='even'>
<td class='rowcheck center first'>
<input value='param2###value2' id='cb2' name='SelectedRows' class='grid-select-row' type='checkbox'/>
</td>
<td class='id'>2</td>
<td>param2</td>
<td class='last'>value2</td>
</tr>
The relevant part of my stuts-config.xml file is:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.2//EN" "http://struts.apache.org/dtds/struts-config_1_2.dtd">
<struts-config>
<data-sources />
<form-beans>
<form-bean name="TestCaseForm" type="com.blahblah.mycoolapp.forms.TestCaseForm" />
</form-beans>
<action-mappings>
<action path="/pages/SaveTestCase" name="TestCaseForm"
type="org.springframework.web.struts.DelegatingActionProxy" scope="request">
</action>
</action-mappings>
<message-resources parameter="MessageResources" />
</struts-config>
I also use spring 2.56 (The relevant part being):
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-2.5.xsd">
<bean name="/pages/SaveTestCase" class="com.blahblah.mycoolapp.actions.TestCaseBuilderSaveAction" />
</beans>
My Java ActionForm class (from what I had learned off the net) is:
package com.blahblah.mycoolapp.forms;
import java.util.ArrayList;
import java.util.List;
import org.apache.struts.action.ActionForm;
public class TestCaseForm extends ActionForm {
private static final long serialVersionUID = 2352146257739099766L;
private String scenario;
private String ruleID;
private String testCaseName;
private List<String> SelectedRows = new ArrayList<String>() ;
public String getScenario() {
return scenario;
}
public void setScenario(String scenario) {
this.scenario = scenario;
}
public String getRuleID() {
return ruleID;
}
public void setRuleID(String ruleID) {
this.ruleID = ruleID;
}
public String getTestCaseName() {
return testCaseName;
}
public void setTestCaseName(String testCaseName) {
this.testCaseName = testCaseName;
}
public List<String> getSelectedRows() {
return SelectedRows;
}
public void setSelectedRows(int index, String value) {
this.SelectedRows.add(value);
}
}
The question is why do I get an empty SelectedRows in my TestCaseBuilderSave Action?
Thanks all who have the patience to read such a long question...
and (hopefully) thanks to all you potential saviors :)
EDIT 1:
Due to #ahiru's request I post my action class which - for the time being is just a stripped down. almost do nothing, class:
public class TestCaseBuilderSaveAction extends Action {
#Override
public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request,
HttpServletResponse response) throws Exception {
response.setContentType("application/octet-stream");
response.setHeader("Content-Disposition","attachment;filename=superfish.xml");
try
{
ServletOutputStream out = response.getOutputStream();
String contentStr = "<Yaneeve>Has been here...</Yaneeve>";
byte[] bytes = contentStr.getBytes();
out.write(bytes, 0, bytes.length);
out.flush();
out.close();
}catch(Exception e){
e.printStackTrace();
}
return null;
}
}
I'm not a struts master or anything but can struts handle building a List out of the inputs? Would it rather be better to use an array of strings? Also have you tried adding a method in your form?
public void setSelectedRows(List<String> list) { SelectedRows = list;}
I think there is a way to define a indexed input in the struts config.
--update
Could you possibly post your action class where you are trying to get these values?
I know you said that the method above does not work but here is what works for me in a similar situation (I think). Sorry I can't find the exact code but here is what I remember:
-ActionForm
private String[] strings;
public void setStrings(String[] strings) { this.strings = strings;}
public String[] getStrings() { return strings; }
jsp/html/whatever
<input type="text" value="x" name="strings[]">
<input type="text" value="y" name="strings[]">
<input type="text" value="z" name="strings[]">
I'm also curious if spring and struts play together nicely (i've done no research on this)
It seems as if the problem had been that the checkboxes had not been 'checked'.
Only 'checked' checkboxes get their value transferred to the server...
One thing I wish to emphasize is that I had converted my code to be like what #ahiru suggested:
private String[] strings;
public void setStrings(String[] strings) { this.strings = strings;}
public String[] getStrings() { return strings; }
Related
I started to work with thymeleaf in a basic project. When I want to display a message in the sign up page the th:text does not work. I used already th:text in other .html files and it works there but in the signUp.html doesn't.
Here is my controller where I set the message:
package com.teszt.thymeleaftest.controller;
#Controller
#RequestMapping("/login")
#AllArgsConstructor
public class MemberController {
MembersService membersService;
#GetMapping("/login")
public String showLoginPage(){
return "/login/login";
}
#GetMapping("/signUp")
public String showSignUpPage(Model theModel){
Members theMember = new Members();
theModel.addAttribute("member", theMember);
return "/login/signUp";
}
#PostMapping("/save")
public String saveMember(#ModelAttribute("member") Members theMember, ModelMap modelMap){
Members tempMember = membersService.findByEmail(theMember.getEmail());
if(tempMember != null){
modelMap.addAttribute("error", "Email is already exist!");
return "redirect:/login/signUp";
}else{
membersService.save(theMember);
//prevent duplication
return "redirect:/login/login";
}
}
}
Here is my signUp.html
<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Signup</title>
</head>
<body>
<div class="container">
<h3>Signup</h3>
<hr>
<p class="h4 mb-4">Signup</p>
<form action="#" th:action="#{/login/save}" th:object="${member}" method="POST">
<input type="text" th:field="*{firstName}" class="form-control mb-4 col-4" placeholder="First name">
<input type="text" th:field="*{lastName}" class="form-control mb-4 col-4" placeholder="Last name">
<input type="text" th:field="*{email}" class="form-control mb-4 col-4" placeholder="Email">
<input type="password" th:field="*{password}" class="form-control mb-4 col-4" placeholder="Password">
<button type="submit" class="btn btn-info col-2">Save</button>
<p th:text="${error}" />
</form>
<br>
Do you have an account? <a th:href="#{/login/login}">Click here</a>
</div>
</body>
</html>
As I mentioned above this is the only html where the th:text does not works, everywhere else is good.
I hope somebody can help me!
When you use a redirect:, you lose all your model attributes (because it's loading a new page). You need to use a FlashAttribute instead. Like this:
#PostMapping("/save")
public String saveMember(#ModelAttribute("member") Members theMember, ModelMap modelMap, RedirectAttributes redirAttrs){
Members tempMember = membersService.findByEmail(theMember.getEmail());
if(tempMember != null){
redirAttrs.addFlashAttribute("error", "Email is already exist!");
return "redirect:/login/signUp";
}else{
membersService.save(theMember);
//prevent duplication
return "redirect:/login/login";
}
}
I am trying to create a CRUD with JPA. Both the insert new record and delete record work. But once I go to update, which is the line ctrl.edit(cats) it returns error: org.apache.jasper.JasperException: java.lang.NullPointerException
Could someone please review my code and advise if there is something I am missing? I have created entities and controllers with JPA.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%#page import="entities.Categories"%>
<%#page import="controller.CategoriesJpaController"%>
<%#page import="java.util.List"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CATEGORIAS</title>
<script>
function cargar(id,nom,des)
{
document.modalito.txtcatid.value = id;
document.modalito.txtcatname.value = nom;
document.modalito.txtcatdes.value = des;
}
</script>
</head>
<body>
<%
HttpSession sesion = request.getSession();
//validar que solo si hay sesion activa pueda entrar
//la unica sesion es usuario y nivel
if(sesion.getAttribute("usuario")==null && sesion.getAttribute("nivel")==null)
{
response.sendRedirect("../login/index_login.jsp");
}
if(sesion.getAttribute("usuario")!=null && sesion.getAttribute("nivel")!=null)
{
String useruser = sesion.getAttribute("usuario").toString();
String nivel = sesion.getAttribute("nivel").toString();
%>
<nav class="navbar navbar-expand navbar-dark bg-dark static-top">
<hr>
<p style="color:white; font-size: 20px;"> Bienvenido <%=useruser%> (Nivel: <%=nivel%>) | <a style="color:white;" href="${pageContext.request.contextPath}/index.jsp"> | Home | </a></p>
<hr>
</nav>
<%
}
response.setHeader("Pragma","no-cache");
response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
response.setDateHeader ("Expires", 0);
%>
<br><br>
<h3 align="center">Formulario Categorias</h3>
<hr>
<button style="margin-left: 45%;" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#miModal">
Ingresar Nuevo
</button>
<br><br>
<pre align="center">CONTENIDO DE LA TABLA PRODUCTOS</pre>
<br>
<%
List <Categories> ls;
CategoriesJpaController ctrl = new CategoriesJpaController();
Categories cats = new Categories();
ls = ctrl.findCategoriesEntities();
if(request.getParameter("btnGuardar")!=null || request.getParameter("btnMod")!=null || request.getParameter("btnEliminar")!=null)
{
//guardar en un objeto producto lo del form
cats.setCategoryID(Integer.parseInt(request.getParameter("txtcatid")));
cats.setCategoryName(request.getParameter("txtcatname"));
cats.setDescription(request.getParameter("txtcatdes"));
}
if(request.getParameter("btnGuardar")!=null)
{
ctrl.create(cats);
out.print("<script>alert('Exito al insertar');window.location.href = 'vCategoria.jsp';</script>");
ls=ctrl.findCategoriesEntities();
}
else if(request.getParameter("btnMod")!=null)
{
ctrl.edit(cats);
out.print("<script>alert('Exito al modificar');window.location.href = 'vCategoria.jsp';</script>");
ls=ctrl.findCategoriesEntities();
}
else if(request.getParameter("btnEliminar")!=null)
{
ctrl.destroy(cats.getCategoryID());
out.print("<script>alert('Exito al eliminar');window.location.href = 'vCategoria.jsp';</script>");
ls=ctrl.findCategoriesEntities();
}
%>
<div style="width: 700px; position: relative; margin-left: 27%;">
<table border="1" class="table">
<thead class="thead-dark">
<tr>
<th class="text-center">ID CATEGORIA</th>
<th class="text-center">NOMBRE CATEGORIA</th>
<th class="text-center">DESCRIPCIÓN</th>
</tr>
</thead>
<tbody>
<%
for(Categories c : ls)
{
%>
<tr>
<td class="text-center"><%= c.getCategoryID()%>
<a href="javascript:cargar('<%= c.getCategoryID() %>','<%= c.getCategoryName()%>','<%= c.getDescription() %>')">
<img src="../recursos/editar.jpg" width="25px" height="25px" data-toggle="modal" data-target="#miModal">
</a>
</td>
<td class="text-center"><%= c.getCategoryName() %></td>
<td class="text-center"><%= c.getDescription() %></td>
</tr>
<%
}
%>
</tbody>
</table>
</div>
</body>
<!--Este es el formulario modal-->
<div class="modal fade" id="miModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Formulario de Registro</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<form action="vCategoria.jsp" method="POST" name="modalito">
<input type="text" name="txtcatid" placeholder="ID Categoria" class="form-control" /><br>
<input type="text" name="txtcatname" placeholder="Nombre Categoria" class="form-control" /><br>
<input type="text" name="txtcatdes" placeholder="Descripción" class="form-control" /><br>
<input type="submit" name="btnGuardar" class="btn btn-primary" value="Guardar"/>
<input type="submit" name="btnMod" class="btn btn-info" value="Modificar"/>
<input type="submit" name="btnEliminar" class="btn btn-danger" value="Eliminar"/>
<input type="hidden" value="nuevo" name="opcion" /><br>
</form>
</div>
</div>
</div>
</div>
</div>
<!--Hasta aquí el modal-->
</body>
Sorry, in order to post as Resolved, I found the answer here: es.stackoverflow.com/a/104830 it is in Spanish but it did help.
I simply initiated my OneToMany List on my Entity in question and that resolved it.
#OneToMany(mappedBy = "categoryID") private List<Products> productsList = new
ArrayList<Products>
My Connection String
Class.forName("com.mysql.jdbc.Driver");
conn= DriverManager.getConnection("jdbc:mysql://localhost:3306/exam_system?useSSL=false&useUnicode=true&characterEncoding=utf8","root","Password");
My JSP File
<%#page import="java.util.ArrayList"%>
<jsp:useBean id="pDAO" class="myPackage.DatabaseClass" scope="page"/>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style-backend.css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<label Style="color: black"> ছন্দে</label>
<input type="hidden" name="pgprt" value="4">
<select name="coursename" class="text">
<%
ArrayList list1=pDAO.getAllCourses();
for(int i=0;i<list1.size();i=i+2){
%>
<option value="<%=list1.get(i)%>"><%=list1.get(i)%></option>
<%
}
%>
</select>
<input type="submit" value="Show" class="form-button">
</form>
</div>
<div class="panel form-style-6" style="max-width: 420!important;float: right">
<form action="controller.jsp" >
<div class="title">Add New Question</div>
<table Style="color: black;font-color: black">
<tr>
<td><label Style="color: black">Course Name</label></td>
<td colspan="3">
<select name="coursename" class="text">
<%
ArrayList list=pDAO.getAllCourses();
for(int i=0;i<list.size();i=i+2){
%>
<option value="<%=list.get(i)%>"><%=list.get(i)%></option>
<%
} request.setCharacterEncoding("UTF-8");
%>
</select>
</td>
</tr>
<tr>
<td><label Style="color: black">Your Question:</label></td>
<td colspan="4"><input type="text" name="question" class="text" placeholder="Type your question here" style="width: 420px;" ></td><br>
</tr>
<tr>
<td><label Style="color: black">Options</label></td>
<td><input type="text" name="opt1" class="text" placeholder="First Option" style="width: 130px;" ></td>
<td><input type="text" name="opt2" class="text" placeholder="Second Option" style="width: 130px;" ></td>
<td><input type="text" name="opt3" class="text" placeholder="Third Option" style="width: 130px;" ></td>
<td><input type="text" name="opt4" class="text" placeholder="Fourth Option" style="width: 130px;" ></td>
</tr>
<tr>
<td><label>Correct Answer</label></td>
<td colspan="4"><center><input type="text" name="correct" class="text" placeholder="Correct Answer" style="width: 130px;" ></center></td>
<tr>
<td colspan="5"><input type="hidden" name="page" value="questions">
<input type="hidden" name="operation" value="addnew">
<center><input type="submit" class="form-button" value="Add" name="submit"></center></td>
When Inputting Non-English Data It is Not Inserting Correctly in MySQL Database. But
I changed Database Pattern And Test By Passing Non-English Data In String And It Works Perfectly.
INSERT INTO `exam_system`.`contact`
(`Name`,
`Email`,
`Message`)
VALUES
('<{Name:fsfsd }>',
'<{Email:sdfsdf }>',
'<{Message: 1. চর্যাপদ কোন ছন্দে লেখা? }');
Before Answering I tried
Net Bean Font Change
Tried Change String Data To Byte
And Rest
Change Are in the symbol Code.
When Accepting Parameter or User Value Convert That Value Into Char .
String crr=request.getParameter("correct");
byte[] bytesCrr = crr.getBytes(StandardCharsets.ISO_8859_1);
crr = new String(bytesCrr, StandardCharsets.UTF_8);
In my application built on Java, JSP with BootStrap, and Servlet, there is the issue to send the data from Servlet to BootStrap Modal.
Based on my project, a user clicks the 'check button' in each table container and that table_id is caught in javascript and send it to Servlet with that value. Then Servlet operates on grabbing the data from the database based on its table_id. The result(orders in the code and results are displayed properly when printing out them) of the operation needed to send to the BootStrap modal section.
TableMonitor.jsp
<%# page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
<title>Migarock Table Monitoring System</title>
<link rel="canonical"
href="https://getbootstrap.com/docs/4.0/examples/pricing/">
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="pricing.css" rel="stylesheet">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link href="./css/tableMonitor.css" rel="stylesheet">
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
</head>
<body>
<!--
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
<h3 class="my-0 mr-md-auto font-weight-normal">Migarock Table Monitoring System</h3>
<a class="btn btn-outline-primary" href="#">Lock</a>
</div> -->
<div class="row">
<div class="col-2">
<div class="container">
<div class="card-deck mb-3 text-center ">
<div class="card mb-4 box-shadow ">
<div class="card-header status1">
<h3 class="my-0 font-weight-normal ">
<strong>Table_01</strong>
</h3>
</div>
<div class="card-body">
<a class="btn btn-outline-primary btn-lg btn-block mx-1 mt-1"
data-toggle="modal" href="#tableModal" data-table-id="1">Check</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-2">
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header">
<h3 class="my-0 font-weight-normal">
<strong>Table_02</strong>
</h3>
</div>
<div class="card-body">
<a class="btn btn-outline-primary btn-lg btn-block mx-1 mt-1"
data-toggle="modal" href="#tableModal" data-table-id="2">Check</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-2">
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header status2">
<h3 class="my-0 font-weight-normal">
<strong>Table_03</strong>
</h3>
</div>
<div class="card-body">
<a class="btn btn-outline-primary btn-lg btn-block mx-1 mt-1"
data-toggle="modal" href="#tableModal" data-table-id="3">Check</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-2">
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header">
<h3 class="my-0 font-weight-normal">
<strong>Table_04</strong>
</h3>
</div>
<div class="card-body">
<a class="btn btn-outline-primary btn-lg btn-block mx-1 mt-1"
data-toggle="modal" href="#tableModal" data-table-id="4">Check</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-2">
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header">
<h3 class="my-0 font-weight-normal">
<strong>Table_05</strong>
</h3>
</div>
<div class="card-body">
<a class="btn btn-outline-primary btn-lg btn-block mx-1 mt-1"
data-toggle="modal" href="#tableModal" data-table-id="5">Check</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-2">
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow ">
<div class="card-header status3">
<h3 class="my-0 font-weight-normal">
<strong>Table_06</strong>
</h3>
</div>
<div class="card-body">
<a class="btn btn-outline-primary btn-lg btn-block mx-1 mt-1"
data-toggle="modal" href="#tableModal" data-table-id="6">Check</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="tableModal" tabindex="1" role="dialog"
aria-labelledby="modal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="modal">Table Status</h2>
<button type="button" class="close" data-dismiss="modal"
aria-label="close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="controlBar">
<div class="row">
<div class="col-8" style="text-align: left;">
<button type="button" class="btn btn-outline-success btn-lg"
data-dismiss="modal">Add item</button>
<button type="button" class="btn btn-outline-secondary btn-lg"
data-dismiss="modal">Change Status</button>
</div>
<div class="col-4" style="text-align: right; padding-right: 10%;">
<button type="button" class="btn btn-outline-warning btn-lg"
data-dismiss="modal">Help</button>
<button type="button" class="btn btn-outline-info btn-lg"
data-dismiss="modal">Bill</button>
</div>
</div>
<div>
<div class="modal-body">
<h3>My name is ${test}</h3>
<!-- <form action="./evaluationRegisterAction.jsp" method="post"> -->
<div class="scrollbar scrollbar-primary">
<!-- <div> -->
<table class="table">
<thead>
<tr style="text-align: center;">
<th scope="col"><input type="checkbox"
class="select-all checkbox" name="select-all" /></th>
<th scope="col">OrderTime</th>
<th scope="col">Item</th>
<th scope="col">QTY</th>
<th scope="col">Price</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<c:out value="${requestScope.orders}">
<c:forEach items="${orders}" var="order">
<tr style="text-align: center;">
<td style="text-align: center;">
<div class="form-check">
<input type="checkbox" class="select-item checkbox"
name="select-item">
</div>
</td>
<td><span id="orders"></span> ${order.getTimeStamp()}</td>
<td>{order.getOrderItem()}</td>
<td>{order.getOrderQty()}</td>
<td>{order.getOrderPrice()}</td>
<td>{order.getOrderStatus()}</td>
<td><a class="btn btn-light btn-sm mx-1 mt-2"
data-toggle="modal" href="#changeStatus">Ordered</a> <!-- <a class="btn btn-dark btn-sm mx-1 mt-2" data-toggle="modal"
href="#changeStatus">Delivered</a> -->
</td>
</tr>
</c:forEach>
</c:out>
</tbody>
</table>
</div>
</div>
<div>
<table class="table">
<tr style="text-align: center;">
<td colspan="3">
<h4>Total</h4>
</td>
<td colspan="3">
<h4>(total)</h4>
</td>
</tr>
</table>
</div>
<div class="controlBar">
<div class="row">
<div class="col-6" style="text-align: left;">
<button type="button" class="btn btn-danger btn-lg"
data-dismiss="modal">Close Session</button>
</div>
<div class="col-6"
style="text-align: right; padding-right: 10%;">
<button type="button" class="btn btn-outline-danger btn-lg"
data-dismiss="modal">Close Window</button>
</div>
</div>
</div>
</div>
<!-- </form> -->
</div>
</div>
</div>
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top"> </footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script>
window.jQuery
|| document
.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script>
Holder.addTheme('thumb', {
bg : '#55595c',
fg : '#eceeef',
text : 'Thumbnail'
});
</script>
<script>
$(function() {
//button select all or cancel
$("#select-all").click(function() {
var all = $("input.select-all")[0];
all.checked = !all.checked
var checked = all.checked;
$("input.select-item").each(function(index, item) {
item.checked = checked;
});
});
//button select invert
$("#select-invert").click(function() {
$("input.select-item").each(function(index, item) {
item.checked = !item.checked;
});
checkSelected();
});
//button get selected info
$("#selected").click(
function() {
var items = [];
$("input.select-item:checked:checked").each(
function(index, item) {
items[index] = item.value;
});
if (items.length < 1) {
alert("no selected items!!!");
} else {
var values = items.join(',');
console.log(values);
var html = $("<div></div>");
html.html("selected:" + values);
html.appendTo("body");
}
});
//column checkbox select all or cancel
$("input.select-all").click(function() {
var checked = this.checked;
$("input.select-item").each(function(index, item) {
item.checked = checked;
});
});
//check selected items
$("input.select-item").click(function() {
var checked = this.checked;
console.log(checked);
checkSelected();
});
//check is all selected
function checkSelected() {
var all = $("input.select-all")[0];
var total = $("input.select-item").length;
var len = $("input.select-item:checked:checked").length;
console.log("total:" + total);
console.log("len:" + len);
all.checked = len === total;
}
});
$('#tableModal')
.on(
'show.bs.modal',
function(e) {
var tableID = $(e.relatedTarget).data('table-id');
console.log("test: ", tableID)
$(e.currentTarget).find('input[name="tableID"]')
.val(tableID);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
document.getElementById("response").value = xhttp.responseText;
}
};
xhttp.open("POST", "TableMonitor", true);
xhttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xhttp.send("tableId=" + tableID);
var orders = $(this).data('orders');
$('#orders').html(orders);
});
</script>
</body>
</html>
TableMonitor.java(Servlet)
package servlets;
import java.io.IOException;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import brokers.TableBrokder;
import model.Order;
/**
* Servlet implementation class TableMonitor
*/
#WebServlet("/TableMonitor")
public class TableMonitor extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* #see HttpServlet#HttpServlet()
*/
public TableMonitor() {
super();
// TODO Auto-generated constructor stub
}
/**
* #see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
getServletContext().getRequestDispatcher("/TableMonitor.jsp").forward(request, response);
}
/**
* #see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String table_id = request.getParameter("tableId");
String action = request.getParameter("action");
System.out.println("servlet: " + table_id);
List<Order> orders = null;
TableBrokder tb = new TableBrokder();
try {
orders = tb.getOrderAll(Integer.parseInt(table_id));
} catch (NumberFormatException | SQLException e) {
e.printStackTrace();
}
for (int i = 0; i < orders.size(); i++) {
orders.get(i).toString();
}
// response.sendRedirect("TableMonitor");
RequestDispatcher dispatcher = request.getRequestDispatcher("/TableMonitor.jsp");
request.setAttribute("orders", orders);
request.setAttribute("test", "test");
dispatcher.forward(request, response);
}
}
Even though I google it but didn't get clear answers. Could you help me with this issue?
Looks like you are making an ajax call in your js but in your servlet you are not returning the response. I highly recommend checking out this answer on how to make ajax calls with servlets.
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String table_id = request.getParameter("tableId");
String action = request.getParameter("action");
System.out.println("servlet: " + table_id);
List<Order> orders = null;
TableBrokder tb = new TableBrokder();
try {
orders = tb.getOrderAll(Integer.parseInt(table_id));
} catch (NumberFormatException | SQLException e) {
e.printStackTrace();
}
for (int i = 0; i < orders.size(); i++) {
orders.get(i).toString();
}
//convert your list of orders to json
String json = new Gson().toJson(orders);
//add json to response
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
When you make ajax calls you won't be able to do things like this:
request.setAttribute("orders", orders);
request.setAttribute("test", "test");
Because when you call this servlet url through ajax, you are not loading the jsp page again so the HttpServletRequest won't be passed to the jsp page. Hope this helps understand it some more.
I have completed HTML project and works find and no ERROR
Now my problem is that I am unable to find incomplete job in my Project. I use Netbeans for creating this project is there a way to find any incomplete work in existing project?
I used HTML, Flash, java, to create this entire project. Is there a tool to find this incomplete work or can I find it using Netbeans
So, how do I find incomplete work?
Thanks in advance
CODE
<!DOCTYPE html>
<html>
<head>
<title>Atomic Structure and Chemical Bonds</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type='text/css' rel='stylesheet' href='assets/css/bootstrap.min.css' />
<link type='text/css' rel='stylesheet' href='assets/css/VLAB.css' />
<link type='text/css' rel='stylesheet' href='assets/css/E20.css' />
<!--<link type='text/css' rel='stylesheet' href='assets/css/bootstrap-theme.min.css' />-->
<!--for Font-->
<link rel="stylesheet" type="text/css" media="screen" href="assets/fonts/webfontkit_proximaNova_reg/ProximaNova-Regular.css" />
<link rel="stylesheet" type="text/css" media="screen" href="assets/fonts/webfontkit_proximanova_sb/ProximaNova-Semibold.css" />
<script src="assets/js/jquery-1.9.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.ui.touch-punch.js"></script>
<script type="text/javascript" src="assets/js/jquery.shuffle.js"></script>
<script type="text/javascript" src="assets/js/calc.js"></script>
<!-- Icon Assets -->
<script type="text/javascript" src="assets/js/journal.js"></script>
<script type="text/javascript" src="assets/js/sound.js"></script>
<script type="text/javascript" src="assets/js/print.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
<script type="text/javascript">
function incrementButtons( upBtn, downBtn, qtyField )
{
var step = parseFloat( qtyField.value ) || 1,
currentValue = step;
downBtn.onclick = function()
{
currentValue = parseFloat( qtyField.value ) || step;
qtyField.value = ( currentValue -= Math.min( step, currentValue - step ) );
}
upBtn.onclick = function()
{
currentValue = parseFloat( qtyField.value ) || step;
qtyField.value = ( currentValue += step );
}
}
</script>
</head>
<body>
<div class="overlay"></div>
<div class="VLAB_container">
<header>
<div class="VLAB_head">VIRTUAL LABS</div>
<div class="VLAB_exit">X</div>
<div class="VLAB_print"></div>
<div class="VLAB_audio"></div>
</header>
<!-- Table Popup -->
<div id="VLAB_table" class="VLAB_table"
style="display:none;z-index:101;">
<div class="VLAB_table_title">Table <div class="VLAB_table_exit">X</div></div>
<div class="VLAB_table_subtitle">Title here </div>
<br/>
<div>
<table id="answered">
<thead>
<tr>
<th>Value 1</th>
<th>Value 2</th>
<th>Value 3</th>
<th>Value 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-id="all"><input type='text' value='' /></td>
<td data-id="all"><input type='text' value='' /></td>
<td data-id="all"><input type='text' value='' /></td>
<td data-id="all"><input type='text' value='' /></td>
</tr>
<tr>
<td data-id="all"><input type='text' value='' /></td>
<td data-id="all"><input type='text' value='' /></td>
<td data-id="all"><input type='text' value='' /></td>
<td data-id="all"><input type='text' value='' /></td>
</tr>
<tr>
<td data-id="all"><input type='text' value='' /></td>
<td data-id="all"><input type='text' value='' /></td>
<td data-id="all"><input type='text' value='' /></td>
<td data-id="all"><input type='text' value='' /></td>
</tr>
</tbody>
</table>
</div>
<div class="VLAB_table_buttons">
<button type="button" class="btn disabled">Graph</button>
<button type="button" class="btn">Save</button>
<button type="button" class="btn">Print</button>
</div>
</div>
<!-- Table Popup ENDS-->
<!-- Journal Popup-->
<div id="VLAB_journal" class="VLAB_journal" style="display:none;z-index:101;">
<div class="VLAB_journal_title">Journal <div class="VLAB_journal_navigation"><div class="VLAB_journal_exit">X</div>
<div class="VLAB_journal_next"></div>
<span class="VLAB_journal_Qno"></span>
<div class="VLAB_journal_prev"></div>
</div>
</div>
<div class="VLAB_journal_subtitle"></div>
<div id="journalQuestions" style="display:none;z-index:101;">
<form action="#" class="regform" method="get">
<p>What part of the digestive system would you see in a cross-section anterior to the gizzard?<br/>
<textarea class="VLAB_journal_text_area" id="Answer1"
name="Question1" placeholder=""></textarea></p>
<p>What structure in the earthworm has a similar function as the human heart? Explain your answer.<br/>
<textarea class="VLAB_journal_text_area" id="Answer2"
name="Question2" placeholder=""></textarea></p>
<p>What do two earthworms exchange during mating? Explain your answer.<br/>
<textarea class="VLAB_journal_text_area" id="Answer3"
name="Question3" placeholder=""></textarea></p>
<p>Describe the difference between a closed and an open circulatory system.<br/>
<textarea class="VLAB_journal_text_area" id="Answer4"
name="Question4" placeholder=""></textarea></p>
<p>Do earthworms have a front and a back end? Explain your answer.<br/>
<textarea class="VLAB_journal_text_area" id="Answer5"
name="Question5" placeholder=""></textarea></p>
<p>What characteristics distinguish an annelid from other worms?<br/>
<textarea class="VLAB_journal_text_area" id="Answer6"
name="Question6" placeholder=""></textarea></p>
</form>
</div>
<div class="VLAB_journal_buttons">
<button type="button" class="btn">Save</button>
<button id="journalPrint" type="button" class="btn">Print</button>
</div>
</div>
<!-- Journal Popup ENDS-->
<!-- AUDIO START -->
<div style="display:none;">
<audio preload="metadata" id="a1" class="a1">
<source class="aud_src" src="assets/audio/sound2drag.mp3" type = "audio/mp3">
<source class="aud_src" src="assets/audio/sound2drag.ogg" type = "audio/ogg">
</audio>
</div>
<!-- AUDIO END -->
<!-- Calculator -->
<form>
<div class="VLAB_CALC">
<div class="VLAB_CALC_title">Calculator
<div class="VLAB_CALC_exit">X</div>
</div>
<div class="VLAB_CALC_screen">
<input type="text" id="memory" class="pull-left" value="" readonly /> <input type="text" id="displayPanel" class="pull-right" value="0" readonly /> </div>
<div class="VLAB_CALC_buttonpad">
<div class="dark" onclick='ac()'>AC</div>
<div class="dark" onclick='ce()'>CE/C</div>
<div class="dark" onclick='perc()' > %</div>
<div class="dark right" onclick='getoperator("/")'>/</div>
<div onclick='getdigit("1")'>1</div>
<div onclick='getdigit("2")'>2</div>
<div onclick='getdigit("3")'>3</div>
<div class="dark right" onclick='getoperator("*")'>×</div>
<div onclick='getdigit("4")'>4</div>
<div onclick='getdigit("5")'>5</div>
<div onclick='getdigit("6")'>6</div>
<div class="dark right" onclick='getoperator("+")'>+</div>
<div onclick='getdigit("7")'>7</div>
<div onclick='getdigit("8")'>8</div>
<div onclick='getdigit("9")'>9</div>
<div class="dark right" onclick='getoperator("-")'>−</div>
<div onclick='getdigit("0")'>0</div>
<div class="dark" onclick='v(".")'>.</div>
<div class="dark right equal-sign" onclick='e()'>=</div>
<div class="dark lastrow" onclick='sto()' >STO</div>
<div class="dark lastrow" id="memoryBtn" onclick='rcl()'>RCL</div>
<div class="dark right lastrow" onclick=' sum_m()'>SUM</div>
</div>
</div>
</form>
<!-- Calculator END -->
<div id="VLAB_leftPanel" class="VLAB_leftPanel">
<div class="VLAB_leftPanel_head">Measurements</div>
<div class="VLAB_leftPanel_subhead">What are the structures and body systems of an earthworm?</div>
<div class="VLAB_leftPanel_content">
<p>We study earthworms to learn the structures and functions of segmented worms, also called annelids. Segmentation supports diversified functions of body parts and tissues. Studying the anatomy and body systems of annelids helps us understand the bodies of higher-level organisms. <br/><br/>Earthworms are classified in the phylum <i>Annelida</i>. (Kingdom: Animal; Phylum; Annelida; Class: Oligochaeta; Order: Opisthopora; Family: Lumbricidae; Genus: <i>Lumbricus</i>; Species:<i>Lumbricus terrestris</i>) The Annelida also include leeches and bristleworms. Segmented worms have bilateral symmetry and have a coelom, which is a fluid-filled body cavity surrounded by mesoderm. Earthworms have two body openings, a mouth and an anus. The basic body plan of segmented worms consists of a digestive tract within a tube. Earthworms are hermaphrodites, which means that an individual animal produces both sperm and eggs. During mating, two earthworms exchange sperm. Each earthworm forms a capsule for the eggs and sperm in which the eggs are fertilized. The capsule is left behind in the soil where the young earthworms emerge from the eggs in two to three weeks. Earthworms are herbivores. They obtain food by eating through the soil and extracting nutrients from it as food passes through the digestive tract. As an earthworm burrows, it loosens, aerates, and fertilizes the soil. Earthworm burrows provide passageways for plant roots and improve drainage of the soil.<br/><br/>
<b>Procedure</b><br/><br/> <b>1</b>. Click the <b>Lab manual</b> to read about earthworm anatomy.<br/><br/><b>2</b>. Click the <b>External anatomy button</b> to view a diagram of the external features of an earthworm.<br/><br/><b>3</b>. Drag and drop the <b>Labels</b> to the matching structures of the illustration.<br/><br/><b>4</b>. When all structures are labeled, the <b>Check button</b> is enabled. Click the <b>Check button</b> to receive feedback on whether the labels are matched with the correct structures. Correct the highlighted incorrect labels.<br/><br/><b>5</b>. Click the <b>Internal anatomy button</b> to view a diagram of the internal features of the earthworm and repeat steps 3 and 4.<br/><br/><b>6</b>. Answer the <b>Journal Questions</b>.</p>
</div>
<div class="VLAB_leftPanel_buttons">
<button id="journalBtn" type="button" class="btn">Journal</button>
<button id="calcBtn" type="button" class="btn">Calculator</button>
<button id="tableBtn" type="button" class="btn">Table</button>
</div>
</div>
<!-- right Panel for Interactivity part-->
<div class="VLAB_rightPanel">
<div id="page_content">
<div id="vlab_assets">
<!-- for development -->
<div calss="lab"><img height="683" width="700" src="assets/img/main.png" alt="image" style="position:absolute;"/></div>
<div style="position:absolute;margin-left:12px;margin-top:101px;"><img height="545" width="667" src="assets/img/bg_yellow.png" alt="image" style="position:absolute;"/></div>
<button id="me1" class="button">Hydrogen</button>
<button id="me2" class="button" style="margin-left:184px;">Hydrogen</button>
<button id="me3" class="button" style="margin-left:348px;">Hydrogen</button>
<button id="me4" class="button" style="margin-left:512px;width:160px;">Hydrogen</button>
<!--a class="term" id="pop1"><button class="buttona" style="margin-top:113px;margin-left:530px;width:122px;height:30px;">Show Labels</button></a-->
<script language="javascript">
var _0xd7e2=["\x6D\x61\x74\x63\x68","\x75\x73\x65\x72\x41\x67\x65\x6E\x74","\x74\x6F\x75\x63\x68\x73\x74\x61\x72\x74","\x63\x6C\x69\x63\x6B","\x6E\x6F\x43\x6F\x6E\x66\x6C\x69\x63\x74","\x68\x69\x64\x65","\x2E\x41\x6E\x73\x5F\x31\x50\x6F\x70","\x66\x61\x64\x65\x54\x6F\x67\x67\x6C\x65","\x73\x70\x61\x6E","\x63\x68\x69\x6C\x64\x72\x65\x6E","\x2E\x41\x6E\x73\x5F\x31","\x76\x61\x6C","\x53\x68\x6F\x77","\x48\x69\x64\x65","\x62\x69\x6E\x64","\x23\x62\x74\x6E\x53\x68\x6F\x77","\x72\x65\x61\x64\x79"];var what=(navigator[_0xd7e2[1]][_0xd7e2[0]](/iPad/i))?_0xd7e2[2]:_0xd7e2[3];var $=jQuery[_0xd7e2[4]]();$(document)[_0xd7e2[16]](function (_0xf214x3){$(_0xd7e2[6])[_0xd7e2[5]]();$(_0xd7e2[15])[_0xd7e2[14]](what,function (_0xf214x3){var _0xf214x4=$(this);$(_0xd7e2[10])[_0xd7e2[9]](_0xd7e2[8])[_0xd7e2[7]]();_0xf214x4[_0xd7e2[11]](_0xf214x4[_0xd7e2[11]]()==_0xd7e2[12]?_0xd7e2[13]:_0xd7e2[12]);} );} );
</script>
<script type="text/javascript" src="assets/js/jquery.1.10.2.min.js"></script>
<div class="Ans_1" style="position:absolute;margin-top:160px;margin-left:23px;opacity:1;">
<span style="opacity:1;" class="Ans_1Pop" ><img height="410" width="490" src="assets/img/label.png" alt="image"/></span>
</div>
<input type="button" id="btnShow" value="Show Labels" style="position:absolute;margin-top:113px;margin-left:530px;width:122px;height:30px;" />
<form id="f1" style="position:absolute;">
<p><input class="form-control transparent-input" type='text' name='qty' id='qty' value='0' readonly='readonly' style="position:absolute;font-family:verdana;font-weight:bold;margin-top:295px;margin-left:240px;width:55px;height:40px;border:black;background:black;color:white;text-align:center;"/></p>
<p><input type='button' name='add' value='' style="margin-top:277px;margin-left:317px;position:absolute;width:20px;height10px;opacity:0;"/></p>
<p><input type='button' name='subtract' value='' style="margin-top:305px;margin-left:317px;position:absolute;width:20px;height10px;opacity:0;"/></p>
</form>
<script type="text/javascript">
with( document.getElementById( 'f1' ) )
incrementButtons( add, subtract, qty );
</script>
<form id="f2" style="position:absolute;">
<p><input class="form-control transparent-input" type='text' name='qty' id='qty' value='0' readonly='readonly' style="position:absolute;font-family:verdana;font-weight:bold;margin-top:350px;margin-left:240px;width:55px;height:40px;border:black;background:black;color:white;text-align:center;"/></p>
<p><input type='button' name='add' value='' style="position:absolute;margin-top:347px;margin-left:317px;width:20px;height:20px;opacity:0;"/></p>
<p><input type='button' name='subtract' value='' style="position:absolute;margin-top:369px;margin-left:317px;width:20px;height:20px;opacity:0;"/></p>
</form>
<script type="text/javascript">
with( document.getElementById( 'f2' ) )
incrementButtons( add, subtract, qty );
</script>
<button id="check" class="buttona" style="margin-top:494px;margin-left:535px;width:102px;height:30px;">Check</button>
<form id="f3" style="position:absolute;">
<p><input class="form-control transparent-input" type='text' name='qty' id='qty' value='0' readonly='readonly' style="position:absolute;font-family:verdana;font-weight:bold;margin-top:574px;margin-left:342px;width:55px;height:40px;border:black;background:black;color:white;text-align:right;"/></p>
<p><input type='button' name='add' value='' style="position:absolute;margin-top:571px;margin-left:407px;width:12px;height:12px;opacity:0;"/></p>
<p><input type='button' name='subtract' value='' style="position:absolute;margin-top:586px;margin-left:407px;width:12px;height:12px;opacity:0;"/></p>
</form>
<script type="text/javascript">
with( document.getElementById( 'f3' ) )
incrementButtons( add, subtract, qty );
</script>
<form id="f4" style="position:absolute;">
<p><input class="form-control transparent-input" type='text' name='qty' id='qty' value='0' readonly='readonly' style="position:absolute;font-family:verdana;font-weight:bold;margin-top:574px;margin-left:428px;width:55px;height:40px;border:black;background:black;color:white;text-align:right;"/></p>
<p><input type='button' name='add' value='' style="position:absolute;margin-top:571px;margin-left:493px;width:12px;height:12px;opacity:0;"/></p>
<p><input type='button' name='subtract' value='' style="position:absolute;margin-top:586px;margin-left:493px;width:12px;height:12px;opacity:0;"/></p>
</form>
<script type="text/javascript">
with( document.getElementById( 'f4' ) )
incrementButtons( add, subtract, qty );
</script>
<form id="f5" style="position:absolute;">
<p><input class="form-control transparent-input" type='text' name='qty' id='qty' value='0' readonly='readonly' style="position:absolute;font-family:verdana;font-weight:bold;margin-top:574px;margin-left:513px;width:55px;height:40px;border:black;background:black;color:white;text-align:right;"/></p>
<p><input type='button' name='add' value='' style="position:absolute;margin-top:572px;margin-left:580px;width:12px;height:12px;opacity:0;"/></p>
<p><input type='button' name='subtract' value='' style="position:absolute;margin-top:586px;margin-left:580px;width:12px;height:12px;opacity:0;"/></p>
</form>
<script type="text/javascript">
with( document.getElementById( 'f5' ) )
incrementButtons( add, subtract, qty );
</script>
<div id="basic-modal-content" style="position:absolute;margin-top:221px;margin-left:132px;z-index:0;">
<img width="395" height="320" src="assets/img/video1.png" alt="image" />
</div>
<input type="button" id="video" class="buttona" style="margin-top:596px;margin-left:61px;width:80px;height:31px;" value="Video" />
<div id="video" style="position:absolute;margin-top:227px;margin-left:165px;z-index:1;">
<video id="video1" width="330" height="294" autoplay>
<source src="assets/audio/E20.mp4" type="video/mp4" />
<source src="assets/audio/E20.ogg" type="video/ogg" />
<source src="assets/audio/E20.webm" type="video/webm" />
Your browser does not support the video element.
</video></div>
<button id="reset" class="buttona" style="margin-top:596px;margin-left:184px;width:80px;height:31px;">Reset</button>
</div>
</div>
</div>
</div><!--End VLab Container-->
</body>
</html>
Unless the "incomplete work" / "incomplete job" is something that won't compile OR is flagged in the source code with "FIX ME" or "TO DO" tags (or the like), then I don't see how NetBeans or any other tool could distinguish between what is incomplete, and what is not.
There are tools that can detect some kinds of bug by analysing the source code, but I don't expect that that is what you mean by "incomplete".