show values from controller in modal page before submit

Question

Trying to add a model confirmation page (continue/cancel) with some info in it.

The info comes from a form with a couple of inputs...

I have created a litte project, I think it ilustrates this requirement.

Before submit I want to show in modal page a value depending on the values entered in the form. In this case I have 3 input to make a simple sum.

So the modal page show the sum, and the user can decide to continue or not.

This is the link of the project. I'm stucked in index.html jquery section.

[https://github.com/davisoski/action-listener][1]

I think this is the correct approach, but I'm not able to make it in my case

[https://qtzar.com/2017/03/24/ajax-and-thymeleaf-for-modal-dialogs/][2]

Any idea

UPDATE 1

I have a simple form with 3 fields. I have a controller with a postmapping for /saveform, This method just call a service and make a sum. No problem with that.

<form action="#" th:action="@{/saveform}" th:object="${modelform}"
                    method="post">

    <div class="form-group row">
        <div class="col-12 col-md-6  col-lg-3">
            <label class="col-form-label col-form-label-sm" for="value1">Value1</label>
            <input class="form-control form-control-sm" th:field="*{value1}"
                id="value1" type="text" />
        </div>
    </div>
    <div class="form-group row">
        <div class="col-12 col-md-6  col-lg-3">
            <label class="col-form-label col-form-label-sm" for="value2">Value2</label>
            <input class="form-control form-control-sm" th:field="*{value2}"
                id="value2" type="text" />
        </div>
    </div>
    <div class="form-group row">
        <div class="col-12 col-md-6  col-lg-3">
            <label class="col-form-label col-form-label-sm" for="value3">Value3</label>
            <input class="form-control form-control-sm" th:field="*{value3}"
                id="value3" type="text" />
        </div>
    </div>

    <div class="form-group row">
        <div class="col-12 col-md-6  col-lg-3">

            <a data-toggle="modal" href="#myModal" class="btn btn-primary"><i
                class="icon-plus-squared"></i><span>Calculate Sum</span></a> <a
                data-toggle="modal" href="#myModal" class="btn btn-primary"
                th:onclick="'javascript:openModal();'"><i
                class="icon-plus-squared"></i><span>Calculate Sum2</span></a>



        </div>
    </div>

</form>

What I want to do is place in the middle of the process a modal page with that sum, so the user can decide if continue or cancel

I added a model like this (see index.html in the github project), I cant see the way to make a previus call to a method or something to show the value of sum in the model page. I used to do in JSF using actionListeners, but here I dont know how to do it. The blog from qtzar.com gave me an idea

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">We have calculated the sum of
                    values</h5>
                <button type="button" class="close" id="close"
                    data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you agree with this sum???</p>
            </div>
            <div class="modal-footer">
                <!-- 
                <a href="#" data-dismiss="modal" class="btn">Close</a> <a
                    href="#" class="btn btn-primary">Save changes</a>
-->
                <button type="button" class="btn btn-primary btn-ok"
                    id="continue">Continue</button>
                <button type="button" class="btn btn-danger"
                    data-dismiss="modal" id="cancel">Cancel</button>
            </div>
        </div>
    </div>
</div>

UPDATE 2

It should be something like this:

$(function() {
        $.ajax({
            url : "/sum",
            success : function(data) {
                $("#modalHolder").html(data);
                $("#myModal").modal("show");
            }

        });

    }

and define in the controller a @RequestMapping

@RequestMapping("/sum")

but I can't see how to pass parameters and where to put the return values to to modal

UPDATE 3:

Modified modal page, added th:fragment:

        <!--  Modal -->
        <div class="modal" id="personModal" role="dialog"
            th:fragment="modalContents">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">We have calculated the sum of values</h5>
                        <button type="button" class="close" id="close"
                            data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>Are you agree with this sum???</p>
                        <h4 class="btn" th:text="${sum}"></h4>
                    </div>
                    <div class="modal-footer">

                        <button type="button" class="btn btn-primary btn-ok" id="continue">Continue</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal"
                            id="cancel">Cancel</button>
                    </div>
                </div>
            </div>
        </div>

Added two method in controller, one to calculate the sum to show in modal dialog and another to send to the server.

@PostMapping({ "/saveform" })
    public String saveForm(Model model, RedirectAttributes ra) {
        LOG.info("HomeController.saveForm");

        //Simulate the sum
        model.addAttribute("sum", "25");

        return "/::modalContents";

    }

    @RequestMapping("/sum")
    public String mySum(Model model) {

        model.addAttribute("sum", "24");

        return "/::modalContents";

    }

I'm think I'm close, but I'm getting error 500.


  [1]: https://github.com/davisoski/action-listener
  [2]: https://qtzar.com/2017/03/24/ajax-and-thymeleaf-for-modal-dialogs/

Answer 1

I'm not sure if this is the answer you're looking for since it doesn't give you the Model object directly, but since nobody has answered this yet I will at least give you a way to get the parameters of the request.

Here's a part of some code I wrote some time ago, you can use @RequestParam to get parameters. An example request for the database/addUser method would be database/addUser?id=12&bookingIds=1&bookingIds=11&name=Olafur&[email protected] which you can of course create with ajax

Also, could it be that you're just simple sending Spring "/sum" without any data.

I'm really sorry if this doesn't help you, so feel free to downvote in that case. I will leave you a snippet that explains a lot of the syntax of @ReqeuestParam here. :)

@RestController
@RequestMapping(path="/database") 
public class MainController {

    @CrossOrigin
    @GetMapping(path = "/addUser") // Map ONLY GET Requests
    public @ResponseBody
    String addNewUser(
         @RequestParam(required = false) Long id,
         @RequestParam(required = false) ArrayList<Long> bookingIds,
         @RequestParam(required = false) ArrayList<Long> reviewIds,
         @RequestParam String name,
         @RequestParam String email
    ) {
        UserEntity u = new UserEntity();
        if(id != null)        u.setId(id);
        if(bookingIds != null) u.setBookingIds((Map<Integer, Long>) Converter.arrayListToMap(bookingIds));
        if(reviewIds != null) u.setReviewIds((Map<Integer, Long>) Converter.arrayListToMap(bookingIds));
        u.setName(name);
        u.setEmail(email);
        u = userRepository.save(u);
        return u.getId().toString();
    }