Ajax call not updating result on thymeleaf spring boot app

Question

I have a springboot app and I am using thymeleaf as a front end. Trying to to do ajax call on click of submit button.

Here is my controller code:

  @RequestMapping(value="/person", method = RequestMethod.GET)
public String testing(@RequestParam(value = "objectId") String groupObjectId, Model model) throws PersistenceException{
    Long objectID = Long.parseLong(objectId);
    User User = userService.findUser(objectID);
    model.addAttribute("user",user);
    return "userList::userList";
 }

This is my javascript ajax call:

   function getUserInfo(groupObjectId){
   $.ajax({
    type : "GET",
    url : "/person"+"?objectId="+objectId,
    timeout : 100000,
    success : function(result) {
        console.log("SUCCESS: ", result);
            $("#userListPanel").show();

        },
    error : function(e) {
            console.log("ERROR: ", e);
        },
    done : function(e) {
            console.log("DONE");
        }
    });

I have an index page that have different fragments:

        <div th:replace="organizationList :: organizationList" 
        th:remove="tag"></div>
        <div th:replace="userList :: userList" 
        th:remove="tag"></div>

I have defined onclick event on one of the field in organizationlist as:

          <td class="col-xs-2"><a th:id="${org.name}" th:text="${org.name}" th:href="'javascript:getUserInfo(\'' + ${org.objectID} + '\');'"></a></td>

My call is getting successful and I see the result in Chrome console as below along with other content in that panel:

         <tr>
                <td><a href="#">Username1</a></td>
                <td>firstName</td>
                <td>LastName</td>
          </tr>

The problem is these changes don't reflect in my page. The panel comes back as empty. Is there anything I am missing in my ajax call? I have also tried below these options once my ajax call is done:

                  $("userListPanel").append(result);
            $("userListPanel").html(result);

Or any way to retrieve the values I am setting in model?

Here is my original userList template:

  <div xmlns:th="http://www.thymeleaf.org" th:fragment="userList" th:remove="tag">
<div id="userListPanel" class="panel panel-primary collapse">
    <div class="panel-heading">
        <div class="panel-title">
            <span data-toggle="collapse" data-target="#userListBody" class="glyphicon glyphicon-minus"></span>
            Organization: orgA
            <span class="panel-title pull-right"> No. of Documents: 3</span>
        </div>
    </div>
    <div id="userListBody" class="panel-body panel-collapse panel-body-resizable collapse in panel-body-fixed-height paddingTop0" 
  th:fragment="resultsList">
        <table class="table table-striped table-hover" id="userListTable">
            <thead>
            <tr>
                <th>Name</th>
                <th>DOB</th>
                <th>Status</th>
            </tr>
            </thead>
            <tbody id="userListTableBody">
            <tr th:each="user:${userList}">
                <td th:text="${user.name}"></td>
                <td th:text="${user.dob}"></td>
                <td th:text="${user.status}"></td>
            </tr>
            </tbody>
        </table>
    </div>
  </div>

Answer 1

I returned a ResponseEntity object of 'User' type from the controller and generated my table data dynamically on ajax call. That's the only way it worked.