无法根据 Thymeleaf 变量执行脚本 <script th:inline="javascript">答案

【问题标题】：Unable to execute scripts depending on Thymeleaf variables <script th:inline="javascript">无法根据 Thymeleaf 变量执行脚本 <script th:inline="javascript">
【发布时间】：2020-06-04 14:10:34
【问题描述】：

我有 2 个简单的脚本和 2 个 Thymeleaf 变量，如果 thymeleaf 变量为真，我希望执行一个脚本，然后如果另一个变量为真，则再次执行相关脚本，依此类推。但我得到以下结果 - 如果一个变量为真并且脚本执行，那么即使第二个变量为真，第二个脚本也不会被执行。很快，只有一个脚本被执行，但都需要（按顺序，而不是同时）。代码如下：

    <script th:inline="javascript">
    var flag = [[${invalidInput}]]; //Thymleaf variable
    window.onload = function() {
        if(!flag)
            return; 
        openForm(); 
    };
</script>

<script th:inline="javascript">
    var flag = [[${exists}]];
    window.onload = function() {
        if(!flag)
            return;
        openForm();
    };
</script>



<!-- MODAL -->
<div class="form-popup" id="myForm">
    <form id="registration" th:action="@{/registrate}" th:object="${newUser}" method="post" class="form-container">
        <h1>Registration</h1>

        <div class="alert" th:if="${exists}">
            User already exists! Please try again.
        </div>

        <div class="invalidInput" th:if="${invalidInput}">
            Username or password too short.
        </div>
************************************************************
<script>
    function openForm() {
        document.getElementById("myForm").style.display = "block";
    }

@PostMapping("/registrate")
    public String login (@ModelAttribute(value = "newUser") User newUser, BindingResult bindingResult, Model model) {
        userValidator.validate(newUser, bindingResult);

         if(usrService.isUserPresent(newUser.getUsername())){
            model.addAttribute("exists",true);
            return "login";
        }
         else if(bindingResult.hasErrors()){
             model.addAttribute("invalidInput",true);
            return "login";
        }

【问题讨论】：

这和java有什么关系？

标签： javascript java spring thymeleaf

【解决方案1】：

我认为您不能将window.onload 变量设置两次...一个只会覆盖另一个。您可以像这样组合您的逻辑：

<script th:inline="javascript">
  var invalidInput = [[${invalidInput}]]; //Thymleaf variable
  var exists = [[${exists}]];

  window.onload = function() {
    if(invalidInput) {
      openForm(); 
    } else if (exists) {
      openForm();
    }
  };
</script>

或者你也可以使用像 jQuery 这样的东西，它为你内置了这个功能。

https://api.jquery.com/ready/

当通过连续调用此方法添加多个函数时，它们会在 DOM 准备就绪时按照添加顺序运行。

【讨论】：