Launch a Bootstrap modal window using Spring MVC backend

Question

Launch a Bootstrap modal window using Spring MVC backend

I am working with a Spring MVC controller and a bootstrap page.

My goal is to display a confirmation window when submitting a form and sending some payload to a specific endpoint if certain conditions are not met:

API:

@PostMapping(value = "/pairs")
public String addPair(@ModelAttribute StepForm addPairStepForm,
                      Model model) {
....... // perform checks and trigger modal dialog in front end
}

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/bootstrap@5.3.0/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/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
            crossorigin="anonymous"></script>       
</main>
</body>
</html>

I am looking for a way to trigger the modal dialog window upon form submission and response from the Spring backend. The aim is to conduct validation on the backend and if an error occurs, display the dialog window.

javascript spring bootstrap-4

Answer 1

Answer №1

To initiate the display of your modal, you require a signaling mechanism within your view.

Utilizing Spring and Thymeleaf, one approach is to set a boolean flag, such as

pairAlreadyExistsWithTheSameExchange

, in your Spring model within the addPairs method when certain conditions are met:

@PostMapping(value = "/pairs")
public String addPair(@ModelAttribute StepForm addPairStepForm,
                      Model model) {
  ....... // perform checks and trigger modal dialog on the frontend
  
  // set flag if necessary
  model.addAttribute("pairAlreadyExistsWithTheSameExchange", true);

  // ...
  return "path to your thymeleaf page";
}

Next, update your view to acknowledge this new model attribute and show the modal accordingly.

For instance, include the modal in a way that makes it visible by adding the show class and setting display: block if

pairAlreadyExistsWithTheSameExchange

is true:

<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9cbc6c6ddcad8cdbfcbaac7ceccfbcfe"/>
</body>

Alternatively, keep the modal structure from your original code and inject a JavaScript snippet like the following into your HTML:

<script type="text/javascript" th:if="${pairAlreadyExistsWithTheSameExchange}">
    var validationModal = new bootstrap.Modal(document.getElementById('validationModal'));
    validationModal.show();
</script>

This approach allows for a clear and straightforward implementation compared to other methods such as using request parameters.

Answer 2

To initiate the display of your modal, you require a signaling mechanism within your view.

Utilizing Spring and Thymeleaf, one approach is to set a boolean flag, such as

pairAlreadyExistsWithTheSameExchange

, in your Spring model within the addPairs method when certain conditions are met:

@PostMapping(value = "/pairs")
public String addPair(@ModelAttribute StepForm addPairStepForm,
                      Model model) {
  ....... // perform checks and trigger modal dialog on the frontend
  
  // set flag if necessary
  model.addAttribute("pairAlreadyExistsWithTheSameExchange", true);

  // ...
  return "path to your thymeleaf page";
}

Next, update your view to acknowledge this new model attribute and show the modal accordingly.

For instance, include the modal in a way that makes it visible by adding the show class and setting display: block if

pairAlreadyExistsWithTheSameExchange

is true:

<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9cbc6c6ddcad8cdbfcbaac7ceccfbcfe"/>
</body>

Alternatively, keep the modal structure from your original code and inject a JavaScript snippet like the following into your HTML:

<script type="text/javascript" th:if="${pairAlreadyExistsWithTheSameExchange}">
    var validationModal = new bootstrap.Modal(document.getElementById('validationModal'));
    validationModal.show();
</script>

This approach allows for a clear and straightforward implementation compared to other methods such as using request parameters.

Answer 3

Answer №2

For instance, let's say you need to verify the input with id="pair". Your objective is to determine if this input field is either empty or not:

$( "#add_pair_form" ).submit(function( event ) {
  event.preventDefault();
  const pairValue = $("#pain").val();

  if(pairValue.trim() == "") {
     // display alert dialogue
    alert('YOUR ERROR MESSAGE');
    return;
  }
  ...

  $.ajax({
    url: "API_URL",
    success: function(result){
      // result holds the data from response
      ....
    }
  });
});

Remember, this was just an illustration :)

Answer 4

For instance, let's say you need to verify the input with id="pair". Your objective is to determine if this input field is either empty or not:

$( "#add_pair_form" ).submit(function( event ) {
  event.preventDefault();
  const pairValue = $("#pain").val();

  if(pairValue.trim() == "") {
     // display alert dialogue
    alert('YOUR ERROR MESSAGE');
    return;
  }
  ...

  $.ajax({
    url: "API_URL",
    success: function(result){
      // result holds the data from response
      ....
    }
  });
});

Remember, this was just an illustration :)

Launch a Bootstrap modal window using Spring MVC backend

Answer №1

Answer №2

Similar questions

A tutorial on how to switch out a font-awesome icon simply by clicking on it - collapsible content

What is the best way to incorporate my light/dark mode theme into index.js and have my header serve as the switch location?

Error with Ajax-bound selection (dropdown) - possibly due to an empty list in certain browsers

Create an onClick function that can direct you to a specific hyperlink without triggering a new browser window to open

Switching from HTML to BBCode during the editing process

Is there a way to always keep an element positioned directly above a fluid image that is perfectly centered?

Acquire the HTML code, make substitutions, and save it as a string variable without altering the DOM element

Exploring the possibilities with Node.js and OpenCV

What could be causing my Javascript prompts to not appear in my Express.IO .ejs file?

Link the Sass variable to Vue props

Is it possible to combine several m3u8 files into a single m3u8 file?

ng-required is ineffective when used with number inputs that have a minimum value requirement

Filtering JSON data by the keys of a Backbone.js model

A guide to performing a LEFT JOIN on two JSON data sources from external URLs

Capturing user-selected option from dropdown menu using npm

Creating multiple div elements with changing content dynamically

What is the reason for the malfunctioning of this button upon clicking?

Experimenting with AngularJS 1.6 class-oriented controllers through the lens of Jasmine/Karma testing

Building a Spring Boot/Angular application that routes using an independent HTML file

Unable to resolve 500 error on Vercel in Next.js despite successful local development