Mohit Kumar Mohit Kumar - 1 month ago 6
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 : http://jsbin.com/amixeb/1/edit?html,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.

//Studentinfo.jsp

<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">
<thead>
<tr class="ui-widget-header ">
<th>Student ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Year Level</th>
<th>Actions</th>
</tr>
</thead>

<tbody>

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

</tr>
</c:forEach>
</tbody>
</table>
</div>
<hr>
<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()">
<fieldset>
<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="" />
</fieldset>
</form>
</div>



</div>

</section>
<br>
<form name="frm" action="./StudentServlet" method="POST" >
<tr>
<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>
</tr>

<table>


//my scripts

<script>
$(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 () {
dlg.dialog("close");
}
},
close: function () {
dlg.remove();
}
};
if (type === 'Edit') {
config.title = "Edit User";
get_data();

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

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


};

}
dlg.dialog(config);

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();
Student-ID.val(_Student-ID);
first-name.val(_first-name);
last-name.val(_last-name);
yearLevel.val(_yearLevel);


}
//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>");
dlg.dialog("close");
}
};


//not used
$(document).on('click', 'span.delete', function () {
$(this).closest('tr').find('td').fadeOut(1000,

function () {
// alert($(this).text());
$(this).parents('tr:first').remove();
});

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

$("#create-user").button().click(new_dialog);

});

</script>


MY external links:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js" type="text/javascript"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />


CSS

<style>
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;
}
}
</style>


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(Integer.java:542)
at java.lang.Integer.parseInt(Integer.java:615)
at com.joseph.controller.StudentServlet.processRequest(StudentServlet.java:35)
at com.joseph.controller.StudentServlet.doGet(StudentServlet.java:84)


WHERE AM I GOING WRONG ?? plz help.

Answer

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">
  <thead>
     <tr>
        <th>Student ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Year Level</th>
    </tr>
  </thead>