ボタンが押されたときにJQueryを使用してフォーム要素を追加しています。問題は、レンダリングする要素を取得できないことです。「-- 名前の入力を開始 --」というテキストだけがレンダリングされます。要素を右クリックして検査すると、jquery でレンダリングされたすべての要素が表示されます。新しく追加された要素が表示されないようにするスタイルはありません。コンソール エラーはありません。
これは私の .js ファイルからのスニペットで、フォーム要素を挿入する必要があります
$(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>');
});
私の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>
これは、[追加] をクリックした後の関連要素を含むページのスクリーンショットです。ご覧のとおり、ページには要素がありますが、それらは見えません。2 つの「組織」ドロップダウン リストが必要です。