'How to use th:each to pass a string to JavaScript code embedded in html page

I start by creating a test list with links to an image. Then I pass it to the model under the name _links

    @GetMapping("/{id}")
    public String showItem(@PathVariable int id, Model model)
    {
        List<String> imageLinks = new ArrayList<>();
        imageLinks.add("/resources/static/images/products/1/product_test_image.jpg");
        imageLinks.add("/resources/static/images/products/1/product_test_image2.jpg");
        imageLinks.add("/resources/static/images/products/1/product_test_image3.jpg");
        
        model.addAttribute("_links", imageLinks);
        return "item/item";
    }

Then, at a certain place in the html code, I draw the number of buttons equal to the number of pictures in the _links list.
I can pass the cycle number to the imgSrc method. But I can't pass the link string itself. When I try to send it, the page stops displaying normally. Therefore, this line is commented out.

    <div th:each="link, iStat : ${_links}">
        <span id="current_img" th:text="${link}"></span>
        <input type="image" th:src="${link}" alt="miniature" th:onclick="'imgSrc(\'' + ${iStat.index} + '\');'" style="width: 80px; height: 80px; margin: 3px">
   <!-- <input type="image" th:src="${link}" alt="miniature" th:onclick="'imgSrc(\'' + ${link} + '\');'" style="width: 80px; height: 80px; margin: 3px"> -->
    </div>

And finally the method I'm calling. The last line is commented out but it shows what I want to achieve. Namely, by clicking on the picture in the list, I want to change the large picture to the new one selected in the loop.

<script language="JavaScript">

            var selectedImage = document.getElementById("current_img");

            var mainImage = document.getElementById("main_product_image");
            var debug = document.getElementById("debug");
            var debug2 = document.getElementById("debug2");
            
            function imgSrc(link)
            {
                mainImage.src = selectedImage.innerHTML;
                debug.innerHTML = selectedImage.innerHTML;
                debug2.innerHTML = link;
//                mainImage.src = link;
            }

        </script>

It is curious that link is normally passed to th:text.
Thanks in advance to all who answer.

javascriptjavahtmlthymeleaf


Solution 1:[1]

The problem was solved. Here is a test code that displays in the message a link to the image of the button we clicked on.

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>Item name</title>
  <link rel="stylesheet" type="text/css" href="/resources/static/css/styles.css">
</head>

<body style="margin: 0">
  <div class="page" style="margin: 0">
    <div th:each="link, iStat : ${_links}">
      <input type="image" th:src="${link}" value="Click me" onclick="buttonClick(this)">
    </div>
  </div>

  <script type="text/javascript">
    function buttonClick(e) {
      var att = e.getAttribute('src');
      alert(att);
    }
  </script>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Сергей

Related Questions