I've searched for a long time here but nothing helped.
I have a Spring Boot application together with Thymeleaf Bootstrap and jQuery
In the application Layout The right menu is in The mqttCenter.html:
<div class="panel panel-default panel-back">
<div class="panel-body button-wrapper">
<a type="button" onlick="showIotManagerFrag();"
href="javascript:void(0);" class="btn btn-primary btn-block">IoT - Manager</a>
</div>
</div>
<div id=deviceManager></div>
where the button opens a thymeleaf Fragment with ajax request and puts it into the upper shown deviceManager div element. This is the layout next to the navigationbar. Because i realized with an ajax call theres no pagerefresh or direction to another page.
And here is the fragments.html:
<div id="device-management" th:fragment="deviceManager" class="panel panel-default panel-back">
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">IoT - Manager:</h1>
</div>
</div>
<div class="row">
<div class="col-md-5">
<h3 class="text-center bottom-buffer">Fügen Sie ein neues IoT - Device hinzu:</h3>
<form id="addDevice" name="addDevice" th:action="@{/users/addDevice}" th:object="${device}" method="post">
<div class="form-group">
<label class="control-label" for="name">Device - Name:</label>
<input type="text" class="form-control" id="firstName" th:field="*{name}" placeholder="Name eingeben">
</div>
<div class="form-group">
<label class="control-label" for="name">Device - Typ:</label>
<select class="form-control" id="sel1" th:field="*{type}">
<option th:each="deviceType : ${deviceTypes}" th:value="${deviceType.type_id}" th:text="${deviceType.type}"></option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="topic">MQTT - Topic:</label>
<input type="text" class="form-control" id="topic" th:field="*{topic}" placeholder="Topic eingeben">
</div>
<div class="form-group">
<label class="control-label"for="description">Beschreibung:</label>
<textarea class="form-control" rows="5" id="description" th:field="*{description}" placeholder="Eine kurze Beschreibung"></textarea>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-default button-width"><span class="glyphicon glyphicon-send"></span> Hinzufügen</button>
</div>
</div>
</form>
</div>
<div class="col-md-2"></div>
<div class="col-md-5">
<h3 class="text-center bottom-buffer">Löschen Sie ein vorhandenes IoT - Device:</h3>
<form id="removeDevice" name="removeDevice" th:action="@{/users/removeDevice}" th:object="${device}" method="post">
<div class="form-group">
<label class="control-label" for="name">IoT - Device auswählen:</label>
<select class="form-control" id="sel1" th:field="*{name}">
<option th:each="deviceName : ${deviceList}" th:value="${deviceName.device_id}" th:text="${deviceName.name}"></option>
</select>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-default button-width"><span class="glyphicon glyphicon-send"></span>Löschen</button>
</div>
</div>
</form>
<div id="device-submit"></div>
</div>
</div>
</div>
</div>
This fragment is called from mqttCenter.html and is in a different file fragments.html. The modelobjects are passed by the Ajax Controller Call.
So I want no refresh or redirect to other pages after the submit of the forms inside. I've looked on many ajax requests here like put forms into json and work with @ResponseBody and suitable Mediatypes in my Controller but nothing worked.
Teh Resopnsebody always redirected me to the Requestmapping url instead back to the ajax success Method.
Here a Code snippet from Controller und Ajax for form Submit.
@RequestMapping(value = "/users/addDevice", method = RequestMethod.POST, consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE,
produces = MediaType.TEXT_PLAIN_VALUE)
@ResponseBody
public String deviceSaving(@Valid @ModelAttribute("addDevice") AddDevice device, BindingResult bindingResult)
{
do Stuff.
return "success- String"
and here Ajax Call in fragments.html:
$(document).ready(function()
{
$('#addDevice').submit(function(event)
{
var json = $('#addDevice').serialize();
$.ajax({
url: "addDevice",
data: JSON.stringify(json),
type: "POST",
beforeSend: function(xhr)
{
xhr.setRequestHeader("Accept", "application/json");
xhr.setRequestHeader("Content-Type", "application/json");
},
success: function(data)
{
var respContent = typeof(data);
console.log(respContent);
respContent += "<span>"
respContent += smartphone + "</span>"
$("#device-submit").html(respContent);
}
});
event.preventDefault();
});
});
What i'm doing wrong? Thanks for help...
