Question

I am working on a project using Spring. I am trying to fetch a set of data from the database and the value will be displayed on textboxes, but instead of giving me String, I keep encountered NaN (Not A Number). Here is part of the source code :

$( "#dialogFormSalesOrder" ).dialog({
                       autoOpen: false,
                       height: 300,
                       width: 600,
                       modal: true,
                       buttons: {
                          "Pick": function() {

                            //var bValid = true;
                            //allFields.removeClass( "ui-state-error" );

                            $(idSalesOrder).val($("#rdbSalesOrder:checked").val());


                        //window.location.replace("managedelivery.htm");
                           <% 

                               Connection connection = null;
                               String driverName = "com.mysql.jdbc.Driver";
                               Class.forName(driverName);
                               String serverName = "localhost:3306";
                               String mydatabase = "versedb";
                               String url = "jdbc:mysql://" + serverName +  "/" + mydatabase; // a JDBC url

                                String username = "root";
                                String password = "";
                                connection = DriverManager.getConnection(url, username,password);

                                Statement stmt = connection.createStatement();
                                ResultSet rs = stmt.executeQuery("Select idProduct, quantity from vrs_tsodetail where idSO='SO101'");

                                while(rs.next())

                                {%>



                                        $("#warehouse tbody" + "").append(
                                            "<tr>" +
                                            '<td><input id="idProduct" name="idProduct" value="' + <% String s = rs.getString(1).toString();  %> + '" /></td>' +
                                            '<td><input id="idQuantity" name="idQuantity" value="' + <%  s = rs.getString(2); %> + '" /></td>' +
                                            '<td><input id="idUnit" name="idUnit" value="cccccc" /></td>' + "</tr>"
                                        );

                                <%}%>




                            $( this ).dialog("close");
                        },
                        Cancel: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                    close: function() {
                        //allFields.val( "" ).removeClass( "ui-state-error" );

                    }

Answer 1

Here’s the extract of relevance from your code:

$("#warehouse tbody" + "").append(
    "<tr>" +
    '<td><input id="idProduct" name="idProduct" value="' + <% String s = rs.getString(1).toString();  %> + '" /></td>' +
    '<td><input id="idQuantity" name="idQuantity" value="' + <%  s = rs.getString(2); %> + '" /></td>' +
    '<td><input id="idUnit" name="idUnit" value="cccccc" /></td>' + "</tr>"
);

There are 2 problems here (there are actually more serious problems with this code in general, but they do not actually affect the functionality):

1. You are not printing anything to the response.
2. You’re expecting that Java and JavaScript runs in sync.

To solve problem 1, you need to use <%= %> instead of assigning them to a String in a <% %> and then totally ignoring it.

$("#warehouse tbody" + "").append(
    "<tr>" +
    '<td><input id="idProduct" name="idProduct" value="' + <%= rs.getString(1) %> + '" /></td>' +
    '<td><input id="idQuantity" name="idQuantity" value="' + <%= rs.getString(2) %> + '" /></td>' +
    '<td><input id="idUnit" name="idUnit" value="cccccc" /></td>' + "</tr>"
);

To solve problem 2, you need to remove those JavaScript string concatenations on Java/JSP-printed values. You should see Java/JSP as a HTML/JS code generator. Otherwise they will be treated as names of existing JavaScript variables. Assuming that 1st column returns "foo" and 2nd column returns "bar", this would only end up in the generated JS code like so (rightclick page in browser, do View Source to see it yourself):

$("#warehouse tbody" + "").append(
    "<tr>" +
    '<td><input id="idProduct" name="idProduct" value="' + foo + '" /></td>' +
    '<td><input id="idQuantity" name="idQuantity" value="' + bar + '" /></td>' +
    '<td><input id="idUnit" name="idUnit" value="cccccc" /></td>' + "</tr>"
);

But you don’t have those variables definied anywhere in JS code, right? They’re undefined. You need to inline it in the JS code instead:

$("#warehouse tbody" + "").append(
    "<tr>" +
    '<td><input id="idProduct" name="idProduct" value="<%= rs.getString(1) %>" /></td>' +
    '<td><input id="idQuantity" name="idQuantity" value="<%= rs.getString(2) %>" /></td>' +
    '<td><input id="idUnit" name="idUnit" value="cccccc" /></td>' + "</tr>"
);

This way it ends up in valid JS code like so:

$("#warehouse tbody" + "").append(
    "<tr>" +
    '<td><input id="idProduct" name="idProduct" value="foo" /></td>' +
    '<td><input id="idQuantity" name="idQuantity" value="bar" /></td>' +
    '<td><input id="idUnit" name="idUnit" value="cccccc" /></td>' + "</tr>"
);