title: Spring Ajax/Json User Update Form
body: <p>Basically so far, I have a JSP page where the administrator can view all the current registered users in a simple table. The administrator can then update User information(authority, email, etc) when the specific table row 'update' button is clicked. </p>
  
  <p>I would like to know how I can make a pop up modal appear on the screen with a form and the current user information displayed in it, rather then redirecting it to another page and shopping a form. Are there any good tutorials which show how to implement this type of functionality?</p>
  
  <p>I am building this web application based on the Spring framework.
  This is my JSP page so far.. For testing I just made a button named Ajax Testing, although really I want my 'update' button to instantiate a modal and load user information.</p>
  
  <pre><code>&lt;c:forEach var="user" items="${users}"&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;c:out value="${user.id}" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;c:out value="${user.name}"/&gt;&lt;/td&gt;
              &lt;td&gt;&lt;c:out value="${user.username}"/&gt;&lt;/td&gt;
              &lt;td&gt;&lt;c:out value="${user.email}"/&gt;&lt;/td&gt;
              &lt;td&gt;&lt;c:out value="${user.dob}"/&gt;&lt;/td&gt;
              &lt;td&gt;&lt;c:out value="${user.authority}"/&gt;&lt;/td&gt;
              &lt;td&gt;
                  &lt;a id="update" href="&lt;c:url value="/viewUser"&gt;&lt;c:param name="id" value="${user.id}"/&gt;&lt;/c:url&gt;"&gt;&lt;button&gt;Update&lt;/button&gt;&lt;/a&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;a id="delete" href="&lt;c:url value="/deleteUser"&gt;&lt;c:param name="id" value="${user.id}"/&gt;&lt;/c:url&gt;"&gt;&lt;button&gt;Delete&lt;/button&gt;&lt;/a&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;a id="loadUser" href="&lt;c:url value="/ajaxTest"&gt;&lt;c:param name="id" value="${user.id}"/&gt;&lt;/c:url&gt;"&gt;&lt;button&gt;Ajax Test&lt;/button&gt;&lt;/a&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/c:forEach&gt;
  &lt;/table&gt;
   &lt;div id="personIdResponse"&gt; &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          $("#loadUser").click(function(){
              var personId = +$('#loadUser').val();
              $.get('${pageContext.request.contextPath}/SDP_v1.2_JSON_TEST/ajaxTest/' + personId, function(user) {
                    $('#personIdResponse').text(user.name + ', = username ' + user.username);
                  });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>This is my controller:</p>
  
  <pre><code>@RequestMapping("/viewUser")
  public String updateUser(Model model, @RequestParam(value = "id", required = false) Integer id) {
  
      User user = usersService.getUser(id);
  
      model.addAttribute("user", user);
  
      return "settings";
  }
  
  @RequestMapping("/ajaxTest")
  @ResponseBody
  public User ajaxTest(@RequestParam(value = "id", required = false) Integer id) {
      return usersService.getUser(id);
  }
  
  @RequestMapping("/updateUser")
  public String updateUser(Model model, User user) {
  
      usersService.updateUser(user);
      getUsers(model);
      return "users";
  }
  
  @Secured("ROLE_ADMIN")
  @RequestMapping("/deleteUser")
  public String deleteUser(Model model,
          @RequestParam(value = "id", required = false) Integer id) {
  
      if (id == null) {
          List&lt;User&gt; users = usersService.getUsers();
  
          model.addAttribute("users", users);
          return "users";
      } else {
          usersService.delete(id);
  
          List&lt;User&gt; users = usersService.getUsers();
  
          model.addAttribute("users", users);
          return "users";
      }
  
  }
  </code></pre>
  
  <p>I cannot get anything in the set text displayed in the </p>