防止在表单提交后使用Thymeleaf片段，Ajax和Spring Boot重新加载

Question

I've searched for a long time here but nothing helped.

I have a Spring Boot application together with Thymeleaf Bootstrap and jQuery

Application Layout

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...

Answer 1

Make sure you don't see any error in the JavaScript console. I think you should move the preventDefault line into very first place of the submit function.

 $(document).ready(function() {

    $('#addDevice').submit(function(event) {
        event.preventDefault();

        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);
            }
        });

    });
});

Hope that helps!