0

I'm using Spring-MVC 4.3.7 and trying to edit user data in JSP using an AJAX post request and to save the result in mySql. The form is in a Bootstrap modal.

I can send form data to a Spring controller (changed user data is printed in server log) but AJAX is always showing error alert and the controller doesn't update user data in mySql.

<form id="editForm">
  <div class="form-group">
    <label for="editName">Name</label>
    <input type="text" class="form-control" name="editName" id="editName" value="">
  </div>
  <div class="form-group">
    <label for="editUsername">Username</label>
    <input type="text" class="form-control" name="editUsername" id="editUsername" value="">
  </div>
  <div class="form-group">
    <label for="editRole">Role</label>
    <select id="editRole">
      <option value="0">User</option>
      <option value="1">Admin</option>
    </select>
  </div>
  <div class="modal-footer">
    <div class="btn-group btn-group-justified" role="group" aria-label="group button">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn- 
    danger" data-dismiss="modal" role="button">Close</button>
      </div>
      <div class="btn-group" role="group">
        <button type="submit" class="btn btn- 
    success btn-hover-green">Save</button>
      </div>
    </div>
  </div>
</form>

$("#editForm").submit(function(event) {
  // Prevent the form from submitting via the browser.
  event.preventDefault();

  // PREPARE FORM DATA
  var formData = {
    name: $("#editName").val(),
    username: $("#editUsername").val(),
    role: $("#editRole").val()
  };
  var dataJson = JSON.stringify(formData);

  $.ajax({
    type: "POST",
    contentType: "application/json",
    url: "../admin/editUser",
    data: dataJson,
    dataType: 'json',
    success: function(data) {
      alert("Success");
      console.log(data);
    },
    error: function(e) {
      alert("Error!");
      console.log(e);
    }
  });
});

@Autowired
UserService userService;

@RequestMapping(value = "admin/editUser", method = RequestMethod.POST)
public @ResponseBody void handleEditUser(@RequestBody User cmd) {
  try {
    System.out.println(cmd.getName());
    System.out.println(cmd + "done");
    userService.updateUser(cmd);
  } catch (DuplicateKeyException ex) {
    ex.printStackTrace();
  }
}

I tested the updateUser method and it is working fine.

I hope someone can help me with solution and explanation to my problem, Im stuck for 2 days on this error and I tried many different solutions but I can't get it to work. Thanks!

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Roki00
  • 1

1 Answers1

0

I found solutions for my problem:

First problem was in Ajax request with dataType i found solution and explanation here https://stackoverflow.com/a/6186905/10236226

Second problem was i forgot to add userId in formData from Modal, so after adding this code:

id: $("#modalId").data('id')

everything is working fine and sent data is saved to mysql. I hope that this can help someone if future.

Roki00
  • 1