Mohit Kumar Mohit Kumar - 1 year ago 71
CSS Question

Opening a dialog box with pre-populated fields (after clicking edit link)

(after clicking edit link) : java.lang.NumberFormatException: null comes as error

What I am trying to do is to populate the dialog box that popped up after clicking edit button.I used a plugin for the same.DEMO :,css,js,output .I only want to use the edit part as descibed in the question.I am not using all the functions in script tag.I just want to pre-populate the fields :student-Id,Firsname,lastname,yearlevel after the dialog box opens.


<div class="CSSTableGenerator" >
<div id="users-contain" class="ui-widget">
<h1>Existing Users:</h1>
<table id="users" class="ui-widget ui-widget-content" border="1">
<tr class="ui-widget-header ">
<th>Student ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Year Level</th>


<c:forEach items="${allStudents}" var="stud">
<tr class="nr">
<td><a class="edit" href="">Edit</a></td>

<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form name="frm" action="./StudentServlet" method="POST" onSubmit="return validateForm()">
<label for="student-ID">Student ID</label><input type="text" id="Student-ID" class="text ui-widget-content ui-corner-all" name="Student-ID" value="" />
<label for="first-name">First Name</label><input type="text" id="first-name" class="text ui-widget-content ui-corner-all" name="first-name" value="" />
<label for="last-name">Last Name</label><input type="text" id="last-name" class="text ui-widget-content ui-corner-all" name="last-name" value="" />
<label for="yearLevel">year Level</label><input type="text" id="yearLevel" class="text ui-widget-content ui-corner-all" name="yearLevel" value="" />


<form name="frm" action="./StudentServlet" method="POST" >
<td><strong>Student ID --></strong><input type="text" name="studentId" value="${student.studentId}" /> </td>
<td><strong>First Name --></strong><input type="text" name="firstname" value="${student.firstname}" /> </td>
<td><strong>Last Name --></strong> <input type="text" name="lastname" value="${student.lastname}" /> </td>
<td><strong>Year Level --></strong><input type="text" name="yearLevel" value="${student.yearLevel}" /> </td>


//my scripts

$(function () {

var new_dialog = function (type, row) {
var dlg = $("#dialog-form").clone();
var Student-ID = dlg.find(("#Student-ID")),
first-name = dlg.find(("#first-name")),
last-name = dlg.find(("#last-name")),
yearLevel = dlg.find(("#yearLevel"));
type = type || 'Create';
var config = {
autoOpen: true,
height: 300,
width: 350,
modal: true,
buttons: {

"Cancel": function () {
close: function () {
if (type === 'Edit') {
config.title = "Edit User";

//commented out delete(config.buttons['Create an account']);

config.buttons['Edit account'] = function () {



function get_data() {
var _Student-ID = $(row.children().get(1)).text(),
_first-name = $(row.children().get(2)).text();
_last-name = $(row.children().get(3)).text();
_yearLevel = $(row.children().get(4)).text();

//Do I need to use such function for doing the action mentioned in the above question.

function save_data() {
$("#users tbody").append("<tr>" + "<td>" + (fname.find("option:selected").text() + ' ').concat(lname.find("option:selected").text()) + "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() + "</td>" + "<td><a href='' class='edit'>Edit</a></td>" + "<td><span class='delete'><a href=''>Delete</a></span></td>" + "</tr>");

//not used
$(document).on('click', 'span.delete', function () {

function () {
// alert($(this).text());

return false;
$(document).on('click', 'td a.edit', function () {
new_dialog('Edit', $(this).parents('tr'));
return false;




MY external links:

<link rel="stylesheet" href="" />
<script src="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />


body {
font-size: 62.5%;
label, input {
display: block;
input.text {
margin-bottom: 12px;
width: 95%;
padding: .4em;
fieldset {
padding: 0;
border: 0;
margin-top: 25px;
h1 {
font-size: 1.2em;
margin: .6em 0;
div#users-contain {
width: 350px;
margin: 20px 0;
div#users-contain table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
div#users-contain table td, div#users-contain table th {
border: 1px solid #eee;
padding: .6em 10px;
text-align: left;
.ui-dialog .ui-state-error {
padding: .3em;
.validateTips {
border: 1px solid transparent;
padding: 0.3em;
#dialog-form {
display: none;

What is happening here??:When I CLICK on the edit link (present in every row).I get the following error

Warning: StandardWrapperValve[StudentServlet]: Servlet.service() for servlet StudentServlet threw exception
java.lang.NumberFormatException: null
at java.lang.Integer.parseInt(
at java.lang.Integer.parseInt(
at com.joseph.controller.StudentServlet.processRequest(
at com.joseph.controller.StudentServlet.doGet(


Answer Source

Opening a dialog box with pre-populated fields (after clicking edit link)

NULL pointer reflection caused such. remove em

<table class="data-table" id="test">
        <th>Student ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Year Level</th>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download