Use jquery to handle click() and debug jquery in chrome

Question

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:

<html>
<head>
<script language="text/javascript" src="js/jquery-1.9.0.js"></script>
<script language="text/javascript" src="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="${ educations[status.index].index }" /><br/>
                        <label>School</label><input type="text" name="educations[${ status.index }].school" value="${ educations[status.index ].school }" /><br/>
                        <label>Degree</label><input type="text" name="educations[${ status.index }].degree" value="${ educations[status.index ].degree }" /><br/>
                        <label>GPA</label><input type="text" name="educations[${ status.index }].scored" value="${ educations[status.index ].scored }" /><br/>
                        <label>Start Date</label><input type="text" name="educations[${ status.index }].startDate" value="${ educations[status.index].startDate }" /><br/>
                        <label>End Date</label><input type="text" name="educations[${ status.index }].endDate" value="${ 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="${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="#" id="addButton">Add new Edu</a>
    <input type="submit" value="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>

Common.js file:

$(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 = $(this).attr("name");
            value.replace("_X_", count + 1);
            $(this).attr("name", value);
        });         
    });
});

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.

Any suggestion for my problems?

In include jquery using a cdn <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> — Arun P Johny
– Arun P Johny, Commented Apr 3, 2013 at 5:13
I think the problem is in script tag language="text/javascript" is invalid please try language="javascript" — Arun P Johny
– Arun P Johny, Commented Apr 3, 2013 at 5:14

Arun P Johny · Accepted Answer · 2013-04-03 05:16:26Z

1

Your script tag definition is invalid, the language attribute should have the value javascript instead if text/javascript>.

<script language="javascript" src="js/jquery-1.9.0.js"></script>
<script language="javascript" src="js/common.js"></script>

answered Apr 3, 2013 at 5:16

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Beetroot-Beetroot Over a year ago

Or just omit the language attribute completely.

Doan Cuong Over a year ago

It works. Thank for your help. Now I'm trying to change the version to 1.9.1 to fix some bugs :D

Collectives™ on Stack Overflow

Use jquery to handle click() and debug jquery in chrome

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related