用片段百里香叶填充模态形式的数据

Question

我使用的是Spring引导和Thymelaf。我有一个模式表单来创建/编辑信息：

<div class="modal" id="myModal" th:fragment="content">
<form th:object="${object}">
<div class="modal-dialog">
<div class="modal-content">
&lt;!&ndash; Modal Header &ndash;&gt;
<div class="modal-header row">
<div class="col-md-10">
<h4 class="modal-title">Create/Edit</h4>
</div>
<div class="col-md-2">
<button type="button" class="close" data-dismiss="modal"
style="float: right;">&times;</button>
</div>
</div>
&lt;!&ndash; Modal body &ndash;&gt;
<div class="modal-body">
<div class="form-group">
<label for="ID">ID</label>
<input type="text" class="form-control" id="ID" placeholder="ID"
th:field="*{id}">
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="name"
th:field="*{name}">
</div>
<div class="form-group">
<label for="description">Description</label>
<input type="text" class="form-control" id="description" placeholder="Description"
th:field="*{description}">
</div>
<div class="form-group">
<label for="date">Date</label>
<input type="date" class="form-control" id="date" placeholder="Date"
th:field="*{date}">
</div>
<div class="form-group">
<label for="other">Other</label>
<input type="text" class="form-control" id="other" placeholder="other"
th:field="*{other}">
</div>

</div>
&lt;!&ndash; Modal footer &ndash;&gt;
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</form>
</div>

由于Object为null，我无法放置在index.html中。当用户点击按钮对用户进行装箱/编辑时，模态将弹出数据。按钮为：

<button type="button" class="btn btn-success" onclick="triggerModal(null)">Create New</button>

我的Jquery函数：

function triggerModal(id) {
if(id==null){
var url = "/create";
}else{
var url = "/create/{"+id+"}";
}
$('#content').load(url);
$('#myModal').modal({show:true});
}

控制器：

@GetMapping(value = {"/create","/create/{id}"})
public String createObject(Model theModel, @PathVariable(required = false)String id){
if(id!=null){
Optional<Object> object= objectRepository.findById(id);
if(object.isPresent()){
theModel.addAttribute("Object", object.get());
return "/form-modal::content";
}
}
theModel.addAttribute("Object", new Object());
return "/form-modal::content";
}

这是我放在index.html 上的div标签

<div id="content"></div>

我已经成功地将模态插入到加载了数据的HTML正文中，但模态没有正确显示。

Answer 1

我已经解决了它。只需将th：fragment放在模态类中即可

<div >
<form th:object="${object}" th:fragment="content">
<div class="modal-dialog">
<div class="modal-content">
&lt;!&ndash; Modal Header &ndash;&gt;
<div class="modal-header row">
<div class="col-md-10">
<h4 class="modal-title">Create/Edit</h4>
</div>
<div class="col-md-2">
<button type="button" class="close" data-dismiss="modal"
style="float: right;">&times;</button>
</div>
</div>
&lt;!&ndash; Modal body &ndash;&gt;
<div class="modal-body">
<div class="form-group">
<label for="ID">ID</label>
<input type="text" class="form-control" id="ID" placeholder="ID"
th:field="*{id}">
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="name"
th:field="*{name}">
</div>
<div class="form-group">
<label for="description">Description</label>
<input type="text" class="form-control" id="description" placeholder="Description"
th:field="*{description}">
</div>
<div class="form-group">
<label for="date">Date</label>
<input type="date" class="form-control" id="date" placeholder="Date"
th:field="*{date}">
</div>
<div class="form-group">
<label for="other">Other</label>
<input type="text" class="form-control" id="other" placeholder="other"
th:field="*{other}">
</div>

</div>
&lt;!&ndash; Modal footer &ndash;&gt;
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</form>
</div>

并更改索引文件中的div标记：

<div class="modal" id="myModal"></div>