Concept:I have a dynamic form in struts2 java, when user click the "Add new Edu" link, a jquery function will be fired to extend the dynamic form. Here is my jsp:\[code\]<html><head><script language="text/javascript" src="http://stackoverflow.com/questions/15778922/js/jquery-1.9.0.js"></script><script language="text/javascript" src="http://stackoverflow.com/questions/15778922/js/common.js"></script><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Education List</title></head><body><s:form action="/save" method="POST"> <div class="educationForm"> <c:if test="${ (not empty educations) }"> <c:if test="${ fn:length(educations) ge 1 }"> <c:forEach items="${educations}" var="edu" varStatus="status"> <div class="educations"> <label>Position</label><input type="text" name="educations[${ status.index }].index" value="http://stackoverflow.com/questions/15778922/${ educations[status.index].index }" /><br/> <label>School</label><input type="text" name="educations[${ status.index }].school" value="http://stackoverflow.com/questions/15778922/${ educations[status.index ].school }" /><br/> <label>Degree</label><input type="text" name="educations[${ status.index }].degree" value="http://stackoverflow.com/questions/15778922/${ educations[status.index ].degree }" /><br/> <label>GPA</label><input type="text" name="educations[${ status.index }].scored" value="http://stackoverflow.com/questions/15778922/${ educations[status.index ].scored }" /><br/> <label>Start Date</label><input type="text" name="educations[${ status.index }].startDate" value="http://stackoverflow.com/questions/15778922/${ educations[status.index].startDate }" /><br/> <label>End Date</label><input type="text" name="educations[${ status.index }].endDate" value="http://stackoverflow.com/questions/15778922/${ educations[status.index].endDate }" /><br/> </div> </c:forEach> </c:if> </c:if> <div class="educations"> <label>Position</label><input type="text" name="educations[${fn:length(educations)}].index" value="http://stackoverflow.com/questions/15778922/${fn:length(educations) + 1}" /><br/> <label>School</label><input type="text" name="educations[${fn:length(educations)}].school" /><br/> <label>Degree</label><input type="text" name="educations[${fn:length(educations)}].degree" /><br/> <label>GPA</label><input type="text" name="educations[${fn:length(educations)}].scored" /><br/> <label>Start Date</label><input type="text" name="educations[${fn:length(educations)}].startDate" /><br/> <label>End Date</label><input type="text" name="educations[${fn:length(educations)}].endDate" /><br/> </div> </div> <a href="http://stackoverflow.com/questions/15778922/#" id="addButton">Add new Edu</a> <input type="submit" value="http://stackoverflow.com/questions/15778922/Save" /> </s:form><div class="template_educations" style="display:none"> <div class="educations"> <label>Position</label><input type="text" name="educations[_X_].index" /><br/> <label>School</label><input type="text" name="educations[_X_].school" /><br/> <label>Degree</label><input type="text" name="educations[_X_].degree" /><br/> <label>GPA</label><input type="text" name="educations[_X_].scored" /><br/> <label>Start Date</label><input type="text" name="educations[_X_].startDate" /><br/> <label>End Date</label><input type="text" name="educations[_X_].endDate" /><br/> </div></div></body></html>\[/code\]Common.js file:\[code\]$(document).ready(function(){ $("#addButton").click(function(event){ event.preventDefault(); $(".educationForm").append($(".template_educations").html); $(".educationForm").children(".educations").last().children("input").each(function(){ var count = $(".educationForm").children(".education").length(); var value = http://stackoverflow.com/questions/15778922/$(this).attr("name"); value.replace("_X_", count + 1); $(this).attr("name", value); }); });});\[/code\]Problems:
- It seem like the jquery function does not work properly. I tried some suggest in Use jquery click to handle anchor onClick() but it didn't help.
- Usually, I use chrome to debug javascript. But in this case, the js file doesn't appear in sources tab of chrome develpoing tools so I can't debug it in chrome.