1

春のMVC

春のMVC形式でテキストボックスを追加するために、次のコードを実行しています。jquery を使用して、テキスト ボックスを春の形式で動的に追加しました。しかし、春のテキストボックスを追加しようとすると、このコードは機能しません。

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<html>
<head>
<title>Home</title>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>

<style type="text/css">
div {
    padding: 8px;
}
</style>

<script type="text/javascript">
    $(document).ready(function() {
        var counter = 2;
        $("#addButton").click(function() {
          if        (counter > 10) 
         {
                                                      alert("Only 10 textboxes allow");
                                                return false;
                                            }

                                            var newTextBoxDiv = $(document.createElement('div'))
                                                                .attr("id", 'TextBoxDiv'+ counter);
                                            newTextBoxDiv.append('<label>Input Title '+ counter
                                                                    + ' : </label>'
                                                                    + '<form:input path="labels[2]" id="textbox' + counter + '" />');

                                            newTextBoxDiv.appendTo("#TextBoxDiv"+ counter);
                                            counter++; 
                                            $("#TextBoxesGroup").append(newTextBoxDiv);

                        });//addButton close

                        // remove textbox
                        $("#removeButton").click(function() {
                            if (counter == 1) {
                                alert("No more textbox to remove");
                                return false;
                            }
                            counter--;
                            $("#TextBoxDiv" + counter).remove();
                        });// end remove textbox

                        // get textbox value
                        $("#getButtonValue").click(
                                function() {

                                    var msg = '';
                                    for (i = 1; i < counter; i++) {
                                        msg += "\n Textbox #" + i + " : "
                                                + $('#textbox' + i).val();
                                    }
                                    alert(msg);
                                });
                    }); // end get textbox value
</script>
</head>
<body>
    <form:form method="POST" commandName="subindicator" action="saveXML">
        <div>
    <div id='TextBoxesGroup'>
        <div id="TextBoxDiv1">
            <label>Input Title 1 : </label><form:input path="labels[1]" id='textbox1'/>
        </div>
    </div>
    <input type='button' value='Add Button' id='addButton'>
    <input type='button' value='Remove Button' id='removeButton'>
    <input type='button' value='Get TextBox Value' id='getButtonValue'>

    </div>
    </form:form>
</body>
</html>

このコードは html テキスト ボックスでは機能しますが、Spring テキスト ボックスの追加には機能せず、次の場合には機能しません。

newTextBoxDiv.append('<label>Input Title '+ counter
                                                                    + ' : </label>'
                                                                    + '<form:input path="labels[2]" id="textbox' + counter + '" />');

このコードをそのような方法で書くと、上記のコードが機能します-

var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + counter);

    newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
          '<input type="text" name="textbox' + counter + 
          '" id="textbox' + counter + '" value="" >');

解決策を教えてください

4

1 に答える 1

2

これが起こった理由は、

<form:input path="labels[2]" id="textbox' + counter + '" />

に変換されます。

<input name"labels[2]" id="labels2">

javascriptはスプリングフォームタグを理解できません。追加ボタンをクリックするたびに、インクリメントされたカウンター値を使用して、現在行っている方法で新しいインデックスを生成できます。

于 2012-12-05T10:48:18.647 に答える