打开包含预先填充字段的对话框（单击编辑链接后）

Question

（点击修改链接后）： java.lang.NumberFormatException：null 出现错误

我要做的是填充单击编辑按钮后弹出的对话框。我使用了一个插件。 DEMO ：http://jsbin.com/amixeb/1/edit?html,css,js,output。我只想使用编辑部分如问题所示。我没有使用脚本标签中的所有功能。我只想预先填充字段：student-Id，Firsname ，对话框打开后，姓氏，年级。

// 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>

//我的脚本

<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>     

我的外部链接：

        <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>

这里发生了什么？：当我点击编辑链接（出现在每一行）时。我收到以下错误

   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)    

我哪里错了？请帮助。

Answer 1

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

NULL指针反射导致这样的。删除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>

Answer 2

我选择了一个更好的方法。不仅仅是弹出一个对话框。我们可以使用js来填充表单字段。

演示于：http://jsfiddle.net/Marventus/me9t13s5/

HTML

  <h1>Student Info:</h1>

  <form class="data-form">
<label>Student ID
    <input type="text" />
</label>
<label>First Name
    <input type="text" />
</label>
<label>Last Name
    <input type="text" />
  </label>
 <label>Year Level
    <input type="text" />
  </label>
 </form>
 <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>
<tr>
    <td>1</td>
    <td>Frank</td>
    <td>Sinatra</td>
    <td>5</td>
</tr>
<tr>
    <td>2</td>
    <td>Miles</td>
    <td>Davis</td>
    <td>4</td>
   </tr>
    <tr>
    <td>3</td>
    <td>Tom</td>
    <td>Waits</td>
    <td>6</td>
  </tr>
 </table>

JS

  $(document).ready(function () {
$("td", this).on("click", function () {
    var tds = $(this).parents("tr").find("td");
    $.each(tds, function (i, v) {
        $($(".data-form input")[i]).val($(v).text());
    });
});
});