Search code examples
javahtmlajaxspring-bootthymeleaf

How to use thymeleaf to update a table dynamically?

I have a html code which includes the following part:

<div class="ui-table">
                <div class="items">
                    <div class="justify-content-end d-flex">
                        <span class="text-color-3 mr-4 edit">edit</span>
                        <span class="text-color-3 remove">remove</span>
                    </div>
                    <div class="item">
                        <div class="top d-flex">
                            <div class="col-6 pl-0">
                                <img th:src="@{images/location.png}">
                                IBIS RESTAURANT
                            </div>
                            <div class="col-6">
                                <img th:src="@{images/event.png}">
                                14/01/1991
                            </div>
                        </div>
                        <div class="bottom pl-3">
                            <div>
                                <img th:src="@{images/plus.png}">
                                <span>Nice</span>
                            </div>
                            <div>
                                <img th:src="@{images/plus.png}">
                                <span>Family Friendly</span>
                            </div>
                            <div>
                                <img th:src="@{images/plus.png}">
                                <span>Good</span>
                            </div>                      
                        </div>
                    </div>
                </div>
                <div class="items">
                    <div class="justify-content-end d-flex">
                        <span class="text-color-3 mr-4 edit">edit</span>
                        <span class="text-color-3 remove">remove</span>
                    </div>
                    <div class="item">
                        <div class="top d-flex">
                            <div class="col-6 pl-0">
                                <img th:src="@{images/location.png}">
                                IBIS RESTAURANT2
                            </div>
                            <div class="col-6">
                                <img th:src="@{images/event.png}">
                                14/01/1992
                            </div>
                        </div>
                        <div class="bottom pl-3">
                            <div>
                                <img th:src="@{images/plus.png}">
                                <span>Nice2</span>
                            </div>
                            <div>
                                <img th:src="@{images/plus.png}">
                                <span>Family Friendly2</span>
                            </div>
                            <div>
                                <img th:src="@{images/plus.png}">
                                <span>Good2</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

which creates a table like page. As default, I have some information in the table (as you see). On this page, there is also a button which is supposed to update the table. This button triggers an ajax function like the following:

$.ajax({
    type : "POST",
    url : "/findUserReviews", 
    dataType : "JSON",
    success : function(data) {

        console.log("hiasdfdf");
    }
});

As you can see, a springcontroller method is called which do some searches and finally set the following model object:

@RequestMapping(value = "/findUserReviews")
public @ResponseBody List<Review> findUserReviews(Model model) {

    ModelAndView modelAndView = new ModelAndView();
    
    List<Review> resultReviews = reviewRepository.findByUser(user);
    List<Review> allUserReviews = new ArrayList<Review>(resultReviews);

    modelAndView.addObject("myReviewList", allUserReviews);

    return allUserReviews;
}

Now, what I want to do is to update the table that I have with the information that I get using the above controller using thymeleaf. For example, I would like to have myReviewList[0].date instead of 14/01/1991 when I click on the update button but I don't know how I can do it.

Any help would be appreciated.

PS 1: I'm new to the whole topic of spring boot, thymeleaf and ajax. If I am totally wrong and there is a better or simpler way, I am open to new ways :).

PS 2: I want to have my table in the existing format and for some reason don't want to use table tag.

Update 1: Here is the sample data:

    [
  {
    "id": "5fb69a6bc8a2bf2620fb6d29",
    "first_point": "first_point",
    "second_point": "",
    "third_point": "",
    "fourth_point": "",
    "fifth_point": "",
    "sixth_point": "",
    "seventh_point": "",
    "place": {
      "place_name": "Ibis Budget Essen Nord, Am Lichtbogen 1, 45141 Essen, Germany",
      "id": "5fb69a6bc8a2bf2620fb6d28",
      "longitude": 6.98807,
      "latitude": 51.47436,
      "municipalitySubdivision": "Altenessen-Süd",
      "municipality": "Essen",
      "countrySecondarySubdivision": "Essen",
      "countryTertiarySubdivision": "undefined",
      "countrySubdivision": "North Rhine-Westphalia",
      "country": "Germany",
      "place_category": "HOTEL_MOTEL"
    },
    "user": {
      "id": "5fad89730923613ac83edb27",
      "email": "[email protected]",
      "password": "$2a$10$7g.DHMvBaC2dsafaerwerweefscweVB2k5R6jaQkTpx/gPHy",
      "fullname": null,
      "enabled": true,
      "roles": [
        {
          "id": "5e5aa2db383ba54434092e8b",
          "role": "ADMIN"
        }
      ],
      "firstname": "test2-new",
      "lastname": "test2"
    },
    "date": "Thu Nov 19 17:16:43 CET 2020",
    "textScore": 0
  }
]

Update 2: The information that I need from the above data object is:

That is, the html code that you see right now, is a sample one filled in with some sample values. In reallity, the content of the table will come from the data object (i.e. from place_name, date, first_point,first_point,..., seventh_point elements).

Solution

  • You can create html structure inside your ajax success function .First you need to loop through JSON Array then get values using value.keyname and append these htmls using += to some variable.Lastly , use .append method of jquery to append divs inside your ui-table div.

    Demo Code :

    var data = [{
  "id": "5fb69a6bc8a2bf2620fb6d29",
  "first_point": "first_point",
  "second_point": "Okay",
  "third_point": "Goods",
  "fourth_point": "",
  "fifth_point": "",
  "sixth_point": "",
  "seventh_point": "",
  "place": {
    "place_name": "Ibis Budget Essen Nord, Am Lichtbogen 1, 45141 Essen, Germany",
    "id": "5fb69a6bc8a2bf2620fb6d28",
    "longitude": 6.98807,
    "latitude": 51.47436,
    "municipalitySubdivision": "Altenessen-Süd",
    "municipality": "Essen",
    "countrySecondarySubdivision": "Essen",
    "countryTertiarySubdivision": "undefined",
    "countrySubdivision": "North Rhine-Westphalia",
    "country": "Germany",
    "place_category": "HOTEL_MOTEL"
  },
  "date": "Thu Nov 19 17:16:43 CET 2020",
  "textScore": 0
}, {
  "id": "5fb69a6bc8a2bf2620fb6d29",
  "first_point": "first_point",
  "second_point": "Okay",
  "third_point": "Goods",
  "fourth_point": "",
  "fifth_point": "",
  "sixth_point": "",
  "seventh_point": "",
  "place": {
    "place_name": "Soemthingsss",
    "id": "5fb69a6bc8a2bf2620fb6d28",
    "longitude": 6.98807,
    "latitude": 51.47436,
    "municipalitySubdivision": "Altenessen-Süd",
    "municipality": "Essen",
    "countrySecondarySubdivision": "Essen",
    "countryTertiarySubdivision": "undefined",
    "countrySubdivision": "North Rhine-Westphalia",
    "country": "Germany",
    "place_category": "HOTEL_MOTEL"
  },
  "date": "Thu Nov 29 17:16:43 CET 2020",
  "textScore": 0
}];
/*$.ajax({
    type : "POST",
    url : "/findUserReviews", 
    dataType : "JSON",
    success : function(data) {*/

var html = "";
//loop through json datas
$(data).each(function(index, value) {
  //generate htmls and append same to variable `html`
  html += '<div class="items"> <div class = "justify-content-end d-flex"><span class = "text-color-3 mr-4 edit">edit</span><span class ="text-color-3 remove"> remove</span> </div>'

  html += '<div class="item"><div class="top d-flex"><div class="col-6 pl-0"> <img th:src="@{images/location.png}"><h5>Place</h5>' + value.place.place_name + '</div>'

  html += '<div class="col-6"><img th:src="@{images/event.png}">' + value.date + '</div></div><div class="bottom pl-3"> <div> <img th:src="@{images/plus.png}"><span>' + value.first_point + '</span> </div><div> <img th:src="@{images/plus.png}"> <span>' + value.second_point + '</span></div><div><img th:src="@{images/plus.png}"><span>' + value.third_point + '</span></div></div></div>'

  //same for all point i.e : value.fourth_poin..etc
})
$(".ui-table").append(html) //append datas inside your div
/*  }
});*/
    .remove {
  background-color: red;
}

.edit {
  background-color: blue;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ui-table"></div>