javascript - 无法根据 Thymeleaf 变量执行脚本
问题描述
I have 2 simple scripts and 2 Thymeleaf variables, I want one script to be executed if thymeleaf variable is true, then again if other variable is true - related script to be executed and so on. But I get the following result - if one variable is true and script executed then second script won't be execudet even if second variable is true. So shortly, only one of scripts is executed, but need both (in sequence, not the same time). Here is the code:
<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";
}
解决方案
I don't think you can set the window.onload
variable twice... one will simply overwrite the other. You can either combine your logic like this:
<script th:inline="javascript">
var invalidInput = [[${invalidInput}]]; //Thymleaf variable
var exists = [[${exists}]];
window.onload = function() {
if(invalidInput) {
openForm();
} else if (exists) {
openForm();
}
};
</script>
Or alternatively you could use something like jQuery, which has this functionality built in for you.
When multiple functions are added via successive calls to this method, they run when the DOM is ready in the order in which they are added.
推荐阅读
- android-layout - 如何实现带有浮动标签的微调器?
- c - printf("%f",x) ok, printf("%F",x) error too many arguments for format
- machine-learning - 如何为日常预测建立线性回归模型
- javascript - REACTJS - 从在线构建导入 CKEditor 5
- c# - FromSqlInterpolated/FromSqlRaw 中的 LIKE 运算符不起作用,但流畅的 API 或 LINQ 表达式可以
- sql - 对包含 date 和 nvarchar(50) 的列使用聚集索引而不是非聚集索引
- nlp - 删除 NLTK 停用词
- php - 用PHP上传和显示图片
- spring-boot - 在 Spring Boot 日志记录控制台的开始/结束处需要方括号
- python - 计算空行和列