mercredi 4 septembre 2019

Handling checkbox with Thymeleaf

I'm a beginner in Thymeleaf, I have a list containing objects included in a model. I want to change one of the attributes by selecting the checkbox.

Using Thymeleaf, Spring MVC to achieve this.

Thymeleaf view

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

                <table class="container">
                    <thead>
                        <tr>
                            <th>CLIENT</th>
                            <th>NOM</th>
                            <th>GROUPE</th>
                            <th>AGENCE</th>
                            <th>NMBE IMP</th>
                            <th>MNT_IMP</th>
                            <th>NOMBRE JOURS</th>
                            <th>SD</th>
                            <th>DEPASSEMENT</th>
                            <th>NOMBRE JOURS SDB</th>
                            <th>TOT CREANCE</th>
                            <th>MAX NBJ</th>
                            <th>ENGAGEMENT</th>
                            <th>CLASSE</th>
                            <th>MOTIF DE PROLONGATION</th>
                            <th>COMMENTAIRE</th>
                            <th>PROPOSE</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="c, itemStat : ${prolForm.transfertAnticipes}">
                            <input class="hidden"
                                th:name="|transfertAnticipes[${itemStat.index}].matricule|"
                                th:value="${util.matricule}" />
                            <input class="hidden"
                                th:name="|transfertAnticipes[${itemStat.index}].cli|"
                                th:value="${c.cli}" />

                            <input class="hidden"
                                th:name="|transfertAnticipes[${itemStat.index}].dateSysteme|"
                                th:value="${c.dateSysteme}" />

                            <td th:text="${c.cli}"></td>
                            <td th:text="${c.nom}"></td>
                            <td th:text="${c.groupe}"></td>
                            <td th:text="${c.agence}"></td>
                            <td th:text="${c.nbreImp}"></td>
                            <td th:text="${c.mntImp}"></td>
                            <td th:text="${c.nombreJours}"></td>
                            <td th:text="${c.sd}"></td>
                            <td th:text="${c.depassement}"></td>
                            <td th:text="${c.nombreJoursSdb}"></td>
                            <td th:text="${c.totCreance}"></td>
                            <td th:text="${c.maxNbj}"></td>
                            <td th:text="${c.engagement}"></td>
                            <td th:text="${c.classe}"></td>
                            <td><select th:style="'width: 80px'"
                                th:name="|transfertAnticipes[${itemStat.index}].motifProlC|">
                                    <option th:each="m : ${motifProl}" th:value="${m.codenv}"
                                        th:selected="${m.codenv == c.mott}" th:text="${m.libelle}"></option>
                            </select></td>
                            <td><input type="text" maxlength="120"
                                th:style="'width:60px ; background-color: #dce8e6; border:0'"
                                th:name="|transfertAnticipes[${itemStat.index}].obs1|"
                                th:value="${c.obs1}" /></td>
                            <td><input type="checkbox" name="${c.prolProposeCBoolean}"/></td>
                        </tr>
                    </tbody>
                </table>
                <div class="bouton">
                    <input class="btn btn-success submit" type="submit"
                        value="Sauvegarder" />
                </div>
                <div class="bouton">
                    <input class="btn btn-success submit" type="reset" value="Annuler" />
                </div>
            </form>

My models

public class TransfertAnticipeDto {

    private List<TransfertAnticipe> transfertAnticipes;

    public TransfertAnticipeDto() {
        this.transfertAnticipes = new ArrayList<TransfertAnticipe>();
    }

    public TransfertAnticipeDto(List<TransfertAnticipe> transfertAnticipes) {
        super();
        this.transfertAnticipes = transfertAnticipes;
    }

    public void addTransfertAnticipe(TransfertAnticipe transfertAnticipe) {
        this.transfertAnticipes.add(transfertAnticipe);
    }

    public List<TransfertAnticipe> getTransfertAnticipes() {
        return transfertAnticipes;
    }

    public void setTransfertAnticipes(List<TransfertAnticipe> transfertAnticipes) {
        this.transfertAnticipes = transfertAnticipes;
    }
} 

public class TransfertAnticipe {
    private String cli;
    ...,
    private String prolProposeC;
    private boolean prolProposeCBoolean;

    public TransfertAnticipe() {
        super();
        // TODO Auto-generated constructor stub
    }

    public TransfertAnticipe(
            String cli,
            ...,
            String prolProposeC,
            boolean prolProposeCBoolean) {
        super();
        this.cli = cli;
                ...
        this.prolProposeC = prolProposeC;
        this.prolProposeCBoolean = prolProposeCBoolean;
    }
}

My controller

    @RequestMapping(value = "/ajouterProlongation")
    public String ajouterProlongation(@ModelAttribute TransfertAnticipeDto form, BindingResult bindingResult,
            Model model) {
        for (TransfertAnticipe ta : form.getTransfertAnticipes()) {

            System.out.println("----Prolongation! : " + ta.isProlProposeCBoolean());
            }
        return "244251";
}

I added the attribute prolProposeCBoolean (initialized at false) to get the new value after checkbox click, but i'm always getting false. this is a preview of the console after click:

----Prolongation! : false
----Prolongation! : false
----Prolongation! : false
----Prolongation! : false
----Prolongation! : false

I want the attribute (prolProposeCBoolean) to change depending on the checkbox (true if checked, and false if not).

Tried th:field with th:value and It didnt work too.




Aucun commentaire:

Enregistrer un commentaire