How can you use a spring form tag to assign an html value to a variable using jquery/javascript?

Question

I have a drag and drop UI. Its like a bucket list. What I have done is I have seperated the forms and the UI html for easier data manipulation. I have an empty form like this: (Take note that I am using spring form tags "form:")

<form:form method="POST" id="sampleForm" commandName="sampleForm" modelAttribute="sampleForm" class="navbar-form navbar-center">
    <table id="formToBeSaved">
    </table>
</form:form>

And then I have a script that is triggered whenever my other sortable receives an item. Sample below:

$("#sortable2").sortable({
        connectWith : "#sortable2 ul",
        scroll: false,
        receive: function(event,ui) {

        var saveElement = '<tr id="saveRow['+statusCounter+']"><td><form:input type="hidden" '+
                'path="sampleFormModel['+statusCounter+']." class="form-control" '+
                'id="name['+statusCounter+'].sampleForm" value="'+ someValue +'"></form:input></td></tr>'

                console.log(saveElement);

                $("#formToBeSaved").append(saveElement);

                statusCounter = statusCounter + 1;

                console.log(statusCounter);
            };

        },

Now the problem is, whenever I submit the form thru ajax an error occurs. It seems that the system does not recognize my < form:input > tag (since I am using spring) because I've just assigned it as a string into a variable. Is there a way to fix this? Thanks stackoverflow community!

Answer 1

You are using Spring XML templates, but the web browser can only work with HTML. This works when you are declaring your code in JSP files because Sprint will parse them and transform them to HTML.

So instead of manually adding JSP to the document, you should edit your JSP files in a way they generate the JSP you expect. In this case, you could use <c:forEach> to generate each <tr> . This answer could help you to do that.

If you only have access to the datas required by these <tr> dynamically, I do not know Sprint enough to help you. Maybe you could find some resources on this question .