JQuery .append() adds invisible elements, visible text

Question

I am using JQuery to add form elements when a button is pressed. The problem is that I can't get the elements to render. Just the text "-- start typing name --" is rendered. When I right click and inspect element I see all the jquery rendered elements. There is no styling to keep the newly added elements from being view-able. No console errors.

This is a snippet from my .js file it should insert form elements

$(document).ready(function() {


    var orgPosition = 0;
    $("#addOrgButton").click(function() {
        orgPosition++;

        $('#orgs').append('<br><div class="field_container"><form:label path="org_id"><spring:message code="label.org_id" /></form:label><form:select id="org_id" class="selectorg" path="jobOrgs[' + orgPosition + '].org_id"><form:option value="0">-- Start typing name --</form:option><form:options items="${organizationsList}" itemLabel="organization" itemValue="org_id" /></form:select></div>');
    });

from my jsp...

<form:form id="formid" method="post" action="addJob.html" commandName="jobModel">
    <div id="orgs">
        <div class="field_container">
            <form:label path="full_name">
                <spring:message code="label.jobFullName" />
            </form:label>
            <form:input class="input" path="full_name" />
            <form:errors path="full_name" cssClass="job_error" />
        </div>
        <br>
        <div class="field_container">
            <form:label path="abbreviation">
                <spring:message code="label.abbreviation" />
            </form:label>
            <form:input path="abbreviation" />
        </div>
        <br>
        <div class="field_container">
            <form:label path="org_id">
                <spring:message code="label.org_id" />
            </form:label>
            <spring:bind path="jobOrgs[0].org_id">
                <form:select id="org_id" class="selectorg" path="${status.expression}">
                    <form:option value="0">-- Start typing name --</form:option>
                    <form:options items="${organizationsList}" itemLabel="organization" itemValue="org_id" /></form:select>
            </spring:bind>
        </div>
    </div>
    <input type="button" id="addOrgButton" value="Add" />
    <br>
</form:form>

This is a screenshot of the page with relevent elements after clicking "Add." As you can see there are elements on the page but they are invisible. I should have two "Organization" drop down lists. my page after clicking "Add"

are they even valid elements? This is getting parsed by the browser not the server so how would the browser understand `` and your other elements - view your other organization drop down and see if it looks the same as the one you just created — wirey00, Apr 03 '14 at 13:50
@ᾠῗᵲᄐᶌ is the same element which displays "Organization" before the first drop down list. — BoatCode, Apr 03 '14 at 13:52
It's on the jsp page - which runs on the server side though and gets parsed there into valid HTML - your browser doesn't understand that — wirey00, Apr 03 '14 at 13:54
@f00bar, I've tried it without any CSS at all. firebug confirms that there is no styling involved. — BoatCode, Apr 03 '14 at 13:54
@ᾠῗᵲᄐᶌ, I see what you're saying. How would I get around this? — BoatCode, Apr 03 '14 at 13:57
so you just want to make a copy of the dropdown? or are the options different? — wirey00, Apr 03 '14 at 13:58
Options would be the same...maybe I could code several of these into the page as invisible and make them visible when "add" is clicked... but I didn't want to limit how many could be added — BoatCode, Apr 03 '14 at 13:59
there's always [.clone()](http://api.jquery.com/clone/) which allows you to make a copy of an element - then you just have to increment that number — wirey00, Apr 03 '14 at 14:02
@ᾠῗᵲᄐᶌ, Awesome! I found someone else's thread where they have a clone() and regular expression matcher to increment. Its all making sense now. Thank you! — BoatCode, Apr 03 '14 at 14:14

score 2 · Accepted Answer · edited May 23 '17 at 11:49

There is a very helpful article here... jquery clone form fields and increment id

So the answer is to use clone() and use a regular expression to increment your index. Details and an example are given at above link. Appending a Spring form element will not work as the append is happening browser side and spring form elements are compiled server side. Browsers know nothing of Spring elements.

JQuery .append() adds invisible elements, visible text

1 Answers1