Call Spring MVC using Jquery rather than form

Question

Following jsp code works fine in the forntend with Form but I wanted to find out how to call the action using Jquery. In short I do not want to use action and directly invoke the same through jquery.

<form:form id="uploadCSVForm" modelAttribute="PeopleFileUpload" method="post" enctype="multipart/form-data" action="/admin/institutions/${mrceuser.person.institution.id}/uploadCsv">
        <p>
          <form:label for="fileData" path="fileData">File</form:label><br/>
          <form:input path="fileData" type="file"/>
        </p>
        <p>
          <input type="button" value="Save" onclick="InstitutionDialog.prepareForSubmit('#uploadCSVForm');" />
          <input type="button" value="Cancel" onclick="InstitutionDialog.hide();return false;"/>
        </p>
      </form:form>

I have achieved the same using

 ChangeDialog.noInputSubmit(ChangeDialog.InstitutionsProperty, "Uploaded CSV for " + jQuery('input#name').val(),
      function () {jQuery('#uploadCSVForm').submit()});

Where ChangeDialog.noInputSubmit looks like this :

ChangeDialog.noInputSubmit = function (changeArea, message, callback) {
    ChangeDialog.changeArea = changeArea.id;
    var valueMap = ChangeDialog.getValueMap();
    valueMap.description = message;
    jQuery.ajax({
        url:RootPath.getPath()+'/admin/changes/',
        type:'POST',
        data:valueMap,
        success:callback,
        error:ChangeDialog.handleError
    });
    return false;
};

Rohit Gaikwad · Accepted Answer · 2016-09-30 06:53:04Z

1

If you want to submit the form using jquery only, then you need to prevent the submit event first then trigger the submit event on success as below :

$('#btnSubmit').click(function (e) {
e.preventDefault(); //  prevent default action of submit button
var element = this;    
ajax({
    url:RootPath.getPath()+'/admin/changes/',
    type:'POST',
    data:valueMap,
    contentType: "application/json; charset=utf-8",
    success: function (data) {
    if (data.status == "Success") {
        alert("Done");
        $(element).closest("form").submit(); // submit form
    } else {
        alert("Error occurs on the Database level!");
    }
    },
    error:ChangeDialog.handleError
});
});

You can change the method name, parameters as per your requirement, but the core logic should be same.

answered Sep 30, 2016 at 6:53

Rohit Gaikwad

3,9443 gold badges21 silver badges42 bronze badges

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

Collectives™ on Stack Overflow

Call Spring MVC using Jquery rather than form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related