'How to pass parameters from Modal form to Spring Controller with thymeleaf or Jquery?

Anyone can help me? I made a Modal with a form to update a database. I receive data from Mysql DB but when i click on submit, the modal closes, but new parameters don't pass to the Spring controller... Where is the error?

Model class:

    @Entity
    @Table(name = "generi")
    public class Genere { 
        @Id
        @GeneratedValue(strategy = GenerationType.IDENTITY)
        private int idGenere;
        
        @Column
        private String nomeGenere;
    
        
        public Genere () {}
        
        /**
         * @param idGenere
         * @param nomeGenere
         */
        public Genere(int idGenere, String nomeGenere) {
            setIdGenere(idGenere);
            setNomeGenere(nomeGenere);
        }
...and GETTERS and SETTERS

Service Class

@Service
public class GenereService {
@Autowired
private GenereRepository genereRepository;

public List<Genere> getGeneri(){
    List<Genere> listGeneri = new ArrayList<Genere>();
    genereRepository.findAll().forEach(listGeneri::add);
    return listGeneri;
}

public void inserisciNuovoGenere(Genere genere) {
    genereRepository.save(genere);
}

public void cancellaGenere(int idGenere) {
    if (genereRepository.findById(idGenere) != null) {
        genereRepository.deleteById(idGenere);
    }
}

public void updateGenere (Genere genere) {
    if (genereRepository.findById(genere.getIdGenere()) != null )
        genereRepository.save(genere);
}

Controller

@Controller
public class GenereController {

@Autowired
private GenereService genereService;

@GetMapping("/generi")
public String getGeneri (Model model) {
    model.addAttribute("newGen", new Genere());
    model.addAttribute("generi", genereService.getGeneri());
    return "generi";
}


@PostMapping("/generi")
public String postGeneriInsert(@ModelAttribute (name  = "newGen") Genere newGen) {
    genereService.inserisciNuovoGenere(newGen);
    return "redirect:/generi";
}

@GetMapping("/generi/delete/{idGenere}")
public String getGenereDelete (@PathVariable int idGenere) {
    genereService.cancellaGenere(idGenere);
    return "redirect:/generi";
}


@PostMapping("/updateGen")
public String postUpdateGenere(@ModelAttribute Genere genere) {
    genereService.updateGenere(genere);
    return "redirect:/generi";
}

generi.html

   <body>
        <th:block th:include="fragments/update_scripts.html"></th:block>
        <div class="container">
            <div th:replace="fragments/common :: Logout"></div>
        </div> <!-- end container -->

        <div class="container login">
            <h3>Gestione Generi</h3>
           
            <form th:object="${newGen}" th:action="@{/generi}" method="post">
                <div class="form-group">
                    <label for="gen">Aggiungi un nuovo genere</label>
                    <input type="text" id="gen" class="form-control" th:field="*{nomeGenere}" required="required">
                </div>
                <input type="submit" class="btn btn-primary" value="Aggiungi">
            </form>
            
            <br><br>
            
            <table class="table table-stripped">
                <thead>
                    <tr>
                        <th scope="col">Id</th>
                        <th scope="col">Genere</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="genere : ${generi}">
                        <td th:text="${genere.idGenere}"></td>
                        <td th:text="${genere.nomeGenere}"></td>
                        
                        <td>
                            <button type="button"
                                    class="btn btn-info btn-sm"
                                    data-toggle="modal"
                                    data-target="#updateGen"
                                    th:attr="data-id=${genere.idGenere},
                                             data-lab=${genere.nomeGenere}">Modifica</button>
                            <button type="button"
                                    class="btn btn-outline-danger btn-sm"
                                    data-toggle="modal"
                                    data-target="#deleteConfirm"
                                    th:attr="data-id=${genere.idGenere},
                                             data-lab=${genere.nomeGenere}">Elimina</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div> 
        




        <div th:replace="fragments/common :: deleteConfirm"></div> 
        <div th:replace="fragments/update_modals :: updateGen"></div> 
        <div th:replace="fragments/common :: bootstrap"></div>
        
    </body>

update_modal.html

        <!-- modal Update Genere   -->
        <div class="modal fade" id="updateGen" tabindex="-1" th:fragment="updateGen"  aria-labelledby="updGenModal">
            <div class="modal-dialog" >  
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="updGenModal">Modifica il Genere</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    
                    <div class="modal-body">
                        <div>
                            <p id="Prova">Modal di Prova: </p>
                        </div>
                        <form th:action="@{/updateGen}" th:object="${genere}" method="post">
                        
                            <input type="hidden"  class="form-control" id="idGen" name="idGenere" value=""/>
                            <div class="form-group"> 
                                <label for="modGen" class="col-form-label">Genere</label>
                                <input type="text" class="form-control" id="modGen" name="nomeGenere" th:field="*{nomeGenere}" value=""  required="required" />
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-outline-warning" id="btnUpdGen" value="Aggiorna" data-dismiss="modal" />
                        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal" >Annulla</button>
                    </div>
                </div>
            </div>
        </div>    
        <!-- End modal Update Genere  -->

Update_script

<script >
            $(document).ready(function() {

                $('#updateGen').on('show.bs.modal', function (event) {
                    var button = $(event.relatedTarget);
                    var id = button.data('id');
                    var label = button.data('lab');
                    var modal = $(this);
                    $('#Prova').html('Modifica  -> ' + label);
                    modal.find('.modal-body #modGen').val(label);
                })
            });
        </script>

And that's all... Sorry for my long post, and if I made some errors creating it... but it's my first time on StackOverflow...

htmljqueryspringhibernatebootstrap-modal


Sources

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

Source: Stack Overflow

Solution Source

Related Questions