'Open Bootstrap dialog window from Spring MVC

I have a Spring MVC controller and bootstrap page.

When I submit the form and send some payload to this endpoint if some condition is not met I would like to display confirmation window:

API:

    @PostMapping(value = "/pairs")
    public String addPair(@ModelAttribute StepForm addPairStepForm,
                          Model model) {
    ....... // do some check
    }

Bootstrap page:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<main>
        
    <!-- Modal -->
    <div class="modal fade" id="validationModal" tabindex="-1" aria-labelledby="validationModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="validationModalLabel">Confirmation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Pair already exists for the same exchange.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary">Continue</button>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
                   
        <div class="row justify-content-center align-items-center">
            <div class="col-md-10">
                <form id="add_pair_form" class="form-inline" action="#" th:action="@{/pairs}"
                      th:object="${stepForm}"
                      autocomplete="off"
                      method="post">

                    <div class="row g-3 align-items-center mb-1 mt-1">
                        <div class="col-auto">
                            <label for="pair" class="form-label">New</label>
                        </div>
                        <div class="col-auto">
                            <input id="pair" class="form-control" name="pair" type="text"
                                   placeholder="Pair to be added."
                                   th:field="*{pair}"
                                   required
                                   autofocus>
                        ......................................
                        </div>                            
                    </div>

                    <div class="form-group mb-1 mt-1">
                    <button type="submit" class="btn btn-primary submit_btn">Submit</button>

                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#validationModal">
                        Validate
                    </button>
                </div>
                    
                </form>

            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
            crossorigin="anonymous"></script>       
</main>
</body>
</html>

How I can open the modal dialog window when I submit the form and Post some payload to Spring BE?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Open Bootstrap dialog window from Spring MVC

Sources

Related Questions