Question 11109 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Prevent redirect on form submissions in thymleaf email template – Jquery

I have a spring boot application with REST APIs which are working fine. In the same project I have one API to send the email notifications to customers which uses the thymleaf for creating the HTML email template and I need to provide the option of Yes and No button and the customer will click on one of them and I need to hit the REST API based on that.

For that I have created the form and on click of button it redirects me to the new page with blank URL and when I refresh the page it hits the REST API. I want to prevent the redirection to the new page and hit the REST API on button click. I have gone through many StackOverflow examples and tried that but it is not working.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.language}" lang="en">
<head>
    <title th:text="#{email.notification.title}">Notification Alert</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<script>
$('#submit-decline').on('click', function() {
    var form = $('#decline-form');
    $.ajax({
        url: http://localhost:8082/decline,
        data: form.serialize(),
        type: get,
        success: function(result) {
            // Do something with the response.
            // Might want to check for errors here.
        }, error: function(error) {
            // Here you can handle exceptions thrown by the server or your controller.
        }
    })
}
</script>

<body>
    <p>
        Hi Team,<br>
        Below are the changes found in the table
    </p>

    <table border="1" style="width:750px">
        <tr>
            <td><b>File</b></td>
            <td><b>Entity</b></td>
            <td><b>Client</b></td>
            <td><b>Timestamp</b></td>
            <td><b>Changes</b></td>
        </tr>
        <tr>
            <td th:text="${notification.fileName}"></td>
            <td th:text="${notification.entity}"></td>
            <td th:text="${notification.client}"></td>
            <td th:text="${notification.timestamp}"></td>
            <td th:text="${notification.changes}"></td>
        </tr>
    </table>

    <p>
        Would you like to approve the changes -
    </p>

    <form id="decline-form" th:action="@{http://localhost:8082/decline}" th:method="get" >
        <input id="submit-decline" type="submit" value="No"/>
    </form>

    <p>
        <span>Regards, </span>
        <br/>
        <em>Team.</em>
    </p>

</body>
</html>

@Override
    public void sendNotificationEmail(NotificationDTO notificationDTO) throws MessagingException {
        NotificationDTO notificationDTOWithDetail= fileUtil.getFieldsFromFileName(notificationDTO);
        System.out.println("65 " + notificationDTOWithDetail);
        String lang = defaultThymeleafLang;
        Locale locale = Locale.forLanguageTag(lang);
        Context context = new Context(locale);
        context.setVariable(ThymeleafEvaluationContext.THYMELEAF_EVALUATION_CONTEXT_CONTEXT_VARIABLE_NAME,
            new ThymeleafEvaluationContext(applicationContext, null));
        context.setVariable(NOTIFICATION, notificationDTOWithDetail);
        context.setVariable("emailApproveService",emailApproveService);
        context.setVariable("emailDeclineService",emailDeclineService);
        String content = templateEngine.process("notificationEmail", context);
        String subject =
                messageSource.getMessage(
                        "email.notification.subject",
                        new Object[] {
                                notificationUtil.getNotificationSubject(
                                        notificationDTOWithDetail.getApplicationName())
                        },
                        locale);
        String primaryNotifiers = notificationUtil.getPrimaryNotifiers(notificationDTOWithDetail.getApplicationName());
        String ccNotifiers =  notificationUtil.getCcNotifiers(notificationDTOWithDetail.getApplicationName());

        sendEmail(primaryNotifiers, ccNotifiers, subject, content, false, true);
    }

package com.rwg.web;

import com.rwg.service.EmailDeclineService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import java.time.Instant;
import java.util.HashMap;
import java.util.Map;

@RestController
@Slf4j
public class EmailDeclineResource {

    private final EmailDeclineService emailDeclineService;
    EmailDeclineResource(
            EmailDeclineService emailDeclineService){
        this.emailDeclineService=emailDeclineService;
    }

    @GetMapping("/decline")
    public String decline() {
        ...
        return "success message";
    }

}

EDIT:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.language}" lang="en">
<head>
    <title th:text="#{email.notification.title}">Notification Alert</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<script>
$("#decline-form").submit(function (event) {
    .get("http://localhost:8082/decline").done(function (data) {
        console.log('success')
    });
    event.preventDefault();
});
</script>

<body>
    <p>
        Hi Team,<br>
        Below are the changes found in the table
    </p>

    <table border="1" style="width:750px">
        <tr>
            <td><b>File</b></td>
            <td><b>Entity</b></td>
            <td><b>Client</b></td>
            <td><b>Timestamp</b></td>
            <td><b>Changes</b></td>
        </tr>
        <tr>
            <td th:text="${notification.fileName}"></td>
            <td th:text="${notification.entity}"></td>
            <td th:text="${notification.client}"></td>
            <td th:text="${notification.timestamp}"></td>
            <td th:text="${notification.changes}"></td>
        </tr>
    </table>

    <p>
        Would you like to approve the changes -
    </p>

    <form id="decline-form" th:action="@{http://localhost:8082/decline}" th:method="get" >
        <input id="submit-decline" type="submit" value="No"/>
    </form>

    <p>
        <span>Regards, </span>
        <br/>
        <em>Team.</em>
    </p>

</body>
</html>
Tags:

2

Answers


  1. 0

    When you submit a form in HTML, by default, it will redirect to the URL mentioned in action attribute. To prevent it, use AJAX to send decline request.

    $("#decline-form").submit(function (event) {
    $.ajax({
       url: http://localhost:8082/decline,
       data: form.serialize(),
       type: get,
       success: function(result) {
          // Do something with the response.
          // Might want to check for errors here.
       }, error: function(error) {
           // Here you can handle exceptions thrown by the server or your controller.
       }
   });
   event.preventDefault();
});

    event.preventDefault() will prevent the default redirection on submit.

    Login or Signup to reply.
  2. 0

    Thymeleaf behaves the same as a regular HTML page. Every form automatically redirects to the "action" attribute. The only way to prevent it is to use AJAX.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search