Question

Disclaimer: HTML, JQuery, Ajax skill level — rubbish. Always been a thick client person.

I’ve got a form that allows the user to enter a customer code and an email address. I want to display the customer’s name when the customer code is valid. I’ll blunder my way through Ajax and Spring MVC to do that, but as a first step, I figured I’d use a jquery function to add a row to the table under the customer code. I can’t get it to work, however.

Here’s my JSP:

<%@include file="/common/header.jsp" %>
<h1>
    <a href="/customerEmailList.do"><spring:message code="customer.email.title"/></a>
    <span class="breadcrumb"><spring:message code="ui.breadcrumb.separator"/></span>
    <spring:message code="action.add"/>
</h1>
<form:form action="customerEmailAdd.do" commandName="customerEmailEntry">
    <table>
        <tr>
            <td colspan="3"><form:errors cssClass="error"/></td>
        </tr>
        <tr>
            <td><spring:message code="customer.email.code"/> <span class="mandatory">*</span></td>
            <td><form:input id="customerCode" path="customerCode" maxlength="8" size="10"/></td>
            <td><form:errors path="customerCode" cssClass="error"/></td>
        </tr>
        <span id="identifiedCustomer">
        </span>
        <tr>
            <td><spring:message code="customer.email.edit.field"/> <span class="mandatory">*</span></td>
            <td><form:input path="emailAddress" maxlength="255" size="50"/></td>
            <td><form:errors path="emailAddress" cssClass="error"/></td>
        </tr>
        <tr>
            <td colspan="3">
                <hr/>
            </td>
        </tr>
        <tr>
            <td colspan="3" align="right">
                <input type="submit" class="green-button" value="<spring:message code="button.save"/>"/>
            </td>
        </tr>
    </table>
</form:form>

<script type="text/javascript">
    $ ( document ).ready ( function () {
        $ ( '#identifiedCustomer' ).html ( '<tr><td>Hello, world</td></tr>' );
    } );    
</script>

<%@include file="/common/footer.jsp" %>

jquery (1.8.3) is being pulled in via the common header.

When the form loads, the text Hello, world is displayed, but it’s not a new table row. It shows up before the table. I would have expected it to create a new row between the customerCode and emailAddress field rows.

What have I done wrong?

Answer 1

Instead of using .html use .replaceWith

.html changes the contents of the span but does not remove them. The span in the middle of the table and with its own <tr> is invalid. .replaceWith will create a new element and remove the <span> from the DOM.

However, depending upon how the DOM is structured this may cause problems because the span starts at an invalid spot. Why not juse use <tr id="identifiedCustomer"> instead of <span>?