Spring MVC 3.2 Thymeleaf Ajax Fragments

Je suis en train de construire une application avec Spring MVC 3.2 et Thymeleaf moteur de template. Je suis débutant dans le Thymeleaf.

J'ai tout qui fonctionne, y compris Thymeleaf mais je me demandais si quelqu'un sait d'un simple et claire toturial sur la façon de faire simple requête Ajax contrôleur et du résultat rendu une partie seulement d'un modèle (fragment).

Mon appli a tout configuré (Printemps 3.2, printemps-sécurité, thymeleaf, ...) et fonctionne comme prévu. Maintenant, je voudrais faire une requête Ajax (assez simple avec jQuery mais je n'ai pas wan pas à utiliser est depuis Thymeleaf dans son tutoriel, chapitre 11: le Rendu des Fragments de Modèle (lien) mentiones il peut être fait avec des fragments.

Actuellement, j'ai dans mon Contrôleur

@RequestMapping("/dimensionMenuList")
public String showDimensionMenuList(Model model) {

    Collection<ArticleDimensionVO> articleDimensions;
    try {
        articleDimensions = articleService.getArticleDimension(ArticleTypeVO.ARTICLE_TYPE);
    } catch (DataAccessException e) {
        //TODO: return ERROR
        throw new RuntimeException();
    }

    model.addAttribute("dimensions", articleDimensions);

    return "/admin/index :: dimensionMenuList";
}

la partie de la vue où je voudrais remplacer <ul></ul> les éléments de menu:

<ul th:fragment="dimensionMenuList" class="dropdown-menu">
    <li th:unless="${#lists.isEmpty(dimensions)}" th:each="dimension : ${dimensions}">
        <a href="#" th:text="${dimension.dimension}"></a>
    </li>
</ul>

Aucune idée de qui est grandement apprécié. Surtout si je n'ai pas d'inclure plus de cadres. C'est déjà trop pour java web app comme il est.

InformationsquelleAutor y0gie007 | 2014-01-07

Ici est une approche que je suis tombé sur un post de blog:

Je ne voulais pas l'utilisation de ces dispositifs dans cette section, je suis en utilisant jQuery pour envoyer une requête AJAX vers le serveur, attendre la réponse et partiellement mise à jour de la vue (fragment de rendu).

La Forme

<form>
    <span class="subtitle">Guest list form</span>
    <div class="listBlock">
        <div class="search-block">
            <input type="text" id="searchSurname" name="searchSurname"/>
            <br />
            <label for="searchSurname" th:text="#{search.label}">Search label:</label>
            <button id="searchButton" name="searchButton" onclick="retrieveGuests()" type="button" 
                    th:text="#{search.button}">Search button</button>
        </div>

        <!-- Results block -->
        <div id="resultsBlock">

        </div>
    </div>
</form>

Ce formulaire contient une entrée de texte avec une chaîne de recherche (searchSurname) qui sera envoyé au serveur. Il y a aussi une région (resultsBlock div) qui sera mise à jour de la réponse envoyée par le serveur.

Lorsque l'utilisateur clique sur le bouton, le retrieveGuests() la fonction sera appelée.

function retrieveGuests() {
    var url = '/th-spring-integration/spring/guests';

    if ($('#searchSurname').val() != '') {
        url = url + '/' + $('#searchSurname').val();
    }

    $("#resultsBlock").load(url);
}

Le jQuery charge de la fonction fait une requête vers le serveur à l'url spécifiée et place le code HTML renvoyé dans l'élément spécifié (resultsBlock div).

Si l'utilisateur entre une chaîne de recherche, il va rechercher tous les invités avec le nom de famille. Sinon, ce sera le retour de l'compléter la liste des invités. Ces deux demandes d'atteindre le contrôleur suivant la demande des mappages:

@RequestMapping(value = "/guests/{surname}", method = RequestMethod.GET)
public String showGuestList(Model model, @PathVariable("surname") String surname) {
    model.addAttribute("guests", hotelService.getGuestsList(surname));

    return "results :: resultsList";
}

@RequestMapping(value = "/guests", method = RequestMethod.GET)
public String showGuestList(Model model) {
    model.addAttribute("guests", hotelService.getGuestsList());

    return "results :: resultsList";
}

Depuis le Printemps est intégré avec Thymeleaf, il va maintenant être en mesure de revenir à des fragments de HTML. Dans l'exemple ci-dessus, la chaîne de retour "résultats :: resultsList" fait référence à un fragment nommé resultsList qui se trouve dans la page de résultats. Prenons un oeil à cette page de résultats:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org" lang="en">

<head>
</head>

<body>
    <div th:fragment="resultsList" th:unless="${#lists.isEmpty(guests)}" id="results-block">
        <table>
            <thead>
                <tr>
                    <th th:text="#{results.guest.id}">Id</th>
                    <th th:text="#{results.guest.surname}">Surname</th>
                    <th th:text="#{results.guest.name}">Name</th>
                    <th th:text="#{results.guest.country}">Country</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="guest : ${guests}">
                    <td th:text="${guest.id}">id</td>
                    <td th:text="${guest.surname}">surname</td>
                    <td th:text="${guest.name}">name</td>
                    <td th:text="${guest.country}">country</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Le fragment, qui est un tableau avec les clients enregistrés, sera inséré dans les résultats de bloc.

InformationsquelleAutor Sohail

Rendu seulement Thymeleaf fragments fonctionne aussi bien avec les ModelAndView.

Votre contrôleur

@RequestMapping(value = "/feeds", method = RequestMethod.GET)
public ModelAndView getFeeds() {
    LOGGER.debug("Feeds method called..");
    return new ModelAndView("feeds :: resultsList");
}

Votre point de vue

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">

<head></head>
<body>
    <div th:fragment="resultsList" id="results-block">
        <div>A test fragment</div>
        <div>A test fragment</div>
    </div>
</body>
</html>

Ce qui est effectivement rendu

<div id="results-block">
    <div>A test fragment</div>
    <div>A test fragment
    </div>
</div>

Est-il fait un rafraichissement de la page?
Dépend de la façon dont vous l'appelez. Si son un appel ajax la page d'habitude actualiser sinon il va.
J'ai vraiment aimé cette. J'ai essayé de retourner le nom de la vue de l'approche et ça fonctionne aussi. Comme ceci: public String getFeeds() { return "feeds :: resultsList"; }
Oui ce serait le travail.
Comment faire pour retourner plusieurs fragment?? @AbdullahKhan

InformationsquelleAutor Abdullah Khan

1

Comme une version alternative de Sohail la grande réponse, je veux donner une version à l'aide de javascript peut envoyer l'ensemble de la th:objet du contrôleur, l'intégration de Thymeleaf dans vos formulaires, de ne pas avoir à utiliser @PathVariable qui devient malpropre ou pas utilisable quand vous avez des formes avec de nombreux champs.

Pour la forme (à l'aide d'un exemple qui renvoie un objet qui a un id et un nom de Chaînes, et alimente un combobox avec une Carte qui a certains de ces objets de valeurs), nous avons:
```
<form method="post" th:action="@{/yourMapping}" th:object="${object}" id="yourFormId">
    <select th:field="*{mapOfObjects}">
       <option 
          th:each="entry: ${mapOfObjects}"
          th:value="${entry.value.id}"
          th:text="${entry.value.name}" >
       </option>
    </select>

    <p>Name: 
       <input type="text" th:field="*{name}" />
    </p>
</form>
```
Lorsque ce formulaire est soumis (à l'aide d'un bouton de type submit par exemple), l'ensemble du document sera remplacé. Cependant on peut intercepter cette soumettre avec javascript et faire de l'ajax-chemin. Pour atteindre cet objectif, nous allons ajouter un intercepteur à notre formulaire en utilisant une fonction. Le premier appel de la fonction qui ajoute de l'intercepteur à droite après la forme:
```
<script>formInterceptor("yourFormId");</script>
```
Et la fonction ressemble à ceci (le placer dans l'en-tête du document ou de l'endroit où adapté à vos besoins):
```
<script>
function formInterceptor(formName) {
    var $form = $("#" + formName);

    $form.on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            url : $form.attr('action'),
            type : 'post',
            data : $form.serialize(),
            success : function(response) {
                if ($(response).find('.has-error').length) {
                    $form.replaceWith(response);
                }
                else{
                    $("#ajaxLoadedContent").replaceWith(response);
                }
            }
        });
    });
};
</script>
```
Maintenant, chaque fois que le formulaire est soumis, cette fonction permet de déclencher, et il permettra de:
- Empêcher l'original du formulaire de soumission
- Faire un appel ajax à l'aide de l'url définie dans le formulaire de th:action
- Sérialiser les données du formulaire. Votre commande sera en mesure de recevoir ce dans un objet
- Remplacer la partie de votre code html avec le retour de l'fragment
La partie remplacée devrait ressembler à ceci
```
<div id="ajaxLoadedContent"></div>
```
Et le contrôleur peut recevoir de la th:objet dans la forme, avec des valeurs remplies, comme ceci (Remplacer Objet avec votre type de l'objet et "objet" avec un nom propre):
```
@PostMapping(value = /yourMapping)
public String ajaxCtrlExample(@ModelAttribute("object") Object object, Model model) {
    return yourFragmentPath;
}
```
Et c'est tout. Appel de la fonction qui ajoute de l'intercepteur après chaque formulaire que vous avez besoin en ajax-version.

InformationsquelleAutor Jorge.V

Vous devez vous connecter pour publier un commentaire.