IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Développement Web en Java Discussion :

Problème de refresh de fragment thymeleaf avec Ajax-Jquery sous Spring


Sujet :

Développement Web en Java

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2010
    Messages
    49
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2010
    Messages : 49
    Par défaut Problème de refresh de fragment thymeleaf avec Ajax-Jquery sous Spring
    Bonjour,
    J'espère tout d'abord être dans la bonne section.
    Je n'ai pas beaucoup d'expérience en codage, et sur un petit projet, je me heurte à un soucis que je ne comprends pas bien (enfin, celui-ci en particulier). J'essaie de développer une application avec Spring boot, thymeleaf et jquery. Je bloque sur l'aspect "Ajax". Voici mon code:
    Mon fragment principal:
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" th:href="@{/css/StyleMenuDeroulant.css}" />
    <link rel="stylesheet" th:href="@{/css/masterStyle.css}" />
    <link rel="stylesheet" th:href="@{/css/catalogueRaisonne.css}" />
     
    <script type="text/javascript"
    	th:src="@{/js/libraries/jquery-3.6.1.complet.js}"></script>
     
    </head>
    <body>
     
    	<main>
     
    		<div id="barre-navigation"
    			th:replace="fragments/app-fragments :: barre-navigation-frag">
    			NavNew</div>
     
    		<!-- ================================================================================================== -->
    		<!-- Le contenu principal de la page -->
     
     
    		<div id="home-main-content" class="pplContent"
    			th:fragment="fragmentCatalogueRaisonne"
    			th:object="${catalogueRaisonneForm}">
     
    			<form th:action="${#httpServletRequest.requestURI}" method="post"
    				th:object="${catalogueRaisonneForm}">
    				<!-- action="catalogueRaisonne/decennieSelect" -->
     
    				<div id="selectionDecennies" style="margin-top: 300px;"
    				class="selectionDecennies">
     
     
    					<th:block th:each="decennie : ${decennies}">
    						<input type="button" th:id="${decennie}" th:value="${decennie}"
    							th:name="${decennie}" onclick="doAjax()"
    							th:field="selectedDecennie">
    						<!--  onclick="retrieveGuests()"-->
    						</input>
     
    					</th:block>
     
    				</div>
     
     
    				<div id="resultsBlock">
    					Le bloc Resultat
    				</div>
     
    		</form>
    		</div>
     
    		<script th:inline="javascript" th:src="@{/js/catalogueRaisonne.js}"></script>
     
    		<div id="home-footer"
    			th:replace="fragments/app-fragments :: copyright">Footer</div>
    	</main>
    </body>
    </html>

    Le fragment que je souhaite insérer dans ma div "resultsBlock"
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="utf-8">
    <title>Insert title here</title>
    </head>
    <body>
    	<th:block th:fragment="frag" th:object="${catalogueRaisonneForm}">
     
    		<div id="test1" class="selectionDecennies">
    	<th:block th:if="${!years.isEmpty()}" 
    		th:each="year : ${years}" >
    			<!-- th:value="${decennie}" -->
    				<input type="button" th:id="${year}"
    					th:value="${year}" th:name="${year}" > 
    				</input>
     
    			</th:block>	
    			</div>	
    	</th:block>
    </body>
    </html>

    Pour cela, j'ai un BaseController:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    package vernano.foundation.vernano.controllers.catalogueRaisonne;
     
    import java.util.ArrayList;
    import java.util.Arrays;
    import java.util.List;
     
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.ModelAttribute;
     
    import forms.CatalogueRaisonneForm;
    import vernano.foundation.vernano.services.ICatalogueRaisonneService;
     
    @Controller
    public class BaseCatalogueRaisonneController {
     
    	protected final ICatalogueRaisonneService catalogueRaisonneService;
     
    	public BaseCatalogueRaisonneController (ICatalogueRaisonneService catalogueRaisonneService) {
    		this.catalogueRaisonneService = catalogueRaisonneService;
    	}
     
    	@ModelAttribute("catalogueRaisonneForm")
    	public CatalogueRaisonneForm getCatalogueRaisonneForm() {
    		CatalogueRaisonneForm catalogueRaisonneForm = new CatalogueRaisonneForm();
     
    		return catalogueRaisonneForm;
    	}
     
    	@ModelAttribute("decennies")
    	public List<String> getDecennies(){
    		List<String> decennies = new ArrayList<>();
    		decennies.addAll(Arrays.asList("1960-1969", "1970-1979", "1980-1989", "1990-1999", "2000-2009"));
    		return decennies;
    	}
     
    	@ModelAttribute("years")
    	public List<String> getYears (final CatalogueRaisonneForm catalogueRaisonneForm){
    		if (catalogueRaisonneForm.getSelectedDecennie() != null && !catalogueRaisonneForm.getSelectedDecennie().isEmpty()) {
    			return catalogueRaisonneService.getYearsByDecennie(catalogueRaisonneForm.getSelectedDecennie());
    		} else {
    			return new ArrayList<>();
    			}
     
    	}
     
    }
    Pour la partie Ajax, j'ai un AjaxController:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    package vernano.foundation.vernano.controllers.catalogueRaisonne;
     
    import java.util.List;
     
    import javax.annotation.PostConstruct;
     
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.ModelMap;
    import org.springframework.validation.BindingResult;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.ModelAttribute;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.servlet.ModelAndView;
     
    import forms.CatalogueRaisonneForm;
    import vernano.foundation.vernano.services.ICatalogueRaisonneService;
     
    @Controller
    @RequestMapping("catalogueRaisonne")
    public class AjaxCatalogueRaisonneController extends BaseCatalogueRaisonneController {
     
    	public AjaxCatalogueRaisonneController(ICatalogueRaisonneService catalogueRaisonneService) {
    		super(catalogueRaisonneService);
    	}
     
    	@PostMapping("/decennieSelect/{decennieDep}") //params=
    	public ModelAndView onDecennieSelect(@ModelAttribute("catalogueRaisonneForm") CatalogueRaisonneForm catalogueRaisonneForm, 
    			@PathVariable("decennieDep") String decennie, final BindingResult bindingResult, final ModelMap model) {
     
    		List<String> years = catalogueRaisonneService.getYearsByDecennie(decennie);
     
    		ModelAndView modelAndView = new ModelAndView("catalogueRaisonne-years-frag::frag");
     
    		/* On nettoie la liste si jamais elle existe déja */
    		if(catalogueRaisonneForm.getYears() != null && !catalogueRaisonneForm.getYears().isEmpty()) {
    			catalogueRaisonneForm.getYears().clear();
    		}
     
     
    		catalogueRaisonneForm.setYears(years);
    		catalogueRaisonneForm.setSelectedDecennie(decennie);
     
    		modelAndView.addObject("years", getYears(catalogueRaisonneForm));
    		return modelAndView;
    	}
     
    	@GetMapping("/decennieSelect")
    	public ModelAndView fetch2() {
    		ModelAndView modelAndView = new ModelAndView("catalogueRaisonne-years-frag::frag");
    		return modelAndView;
    	}
    }
    et enfin, le js:
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    function doAjax(){
    	console.log('Je rentre dans la seconde fonction JS');
    	console.log('le name vaut : ' + event.target.id);
    	const decennie = event.target.name;
    	const anneeDepart = decennie.substring(0,4);
    	console.log(anneeDepart);
    		$.ajax({
    			type:'POST',
    			url:'catalogueRaisonne/decennieSelect/' + decennie,
    			success: function(response){ //data
    				$("#resultsBlock").replaceWith(response); 
    			},
    			error: function(exception){
    				alert('Exeption : ' + exception);
    			}
    		});
    	};

    Lorsque j'arrive sur ma page (controller non ajax), j'ai bien ma liste de décennies qui s'affiche. Quand je clique pour la première fois sur l'un des boutons, par exemple "1970-1979", mon fragment se charge avec les bonnes données et m'affiche ce que je souhaite dans ma div. Mais si je clique sur une autre décennie, par exemple "1990-1999", les données envoyées sont bonnes mais les années affichées restent les même. Je n'arrive pas à afficher les nouvelles données dans la div. Quelqu'un aurait-il une idée de ce qu'il se passe?
    Je me demande s'il ne faudrait pas ajouter des "input en "type='hidden'", mais je ne sais pas trop comment les mettre. Je suis ouvert à toute suggestion!

  2. #2
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2010
    Messages
    49
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2010
    Messages : 49
    Par défaut
    Bonjour,
    pour ceux que ça intéresserait, j'ai fini par trouver une solution. Le problème du "replaceWith" fait que ma div de départ n'existe plus une fois qu'elle a été remplacée (au premier click). Du coup, remplacer le 'replaceWith' par 'html' résout le soucis.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $("#resultsBlock").html(response);

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 3
    Dernier message: 27/09/2011, 23h23
  2. Réponses: 60
    Dernier message: 22/09/2011, 08h25
  3. Réponses: 2
    Dernier message: 12/07/2011, 22h21
  4. Développement de portlet liferay avec ajax jquery
    Par djcors dans le forum Développement Web en Java
    Réponses: 2
    Dernier message: 05/07/2011, 11h23
  5. Réponses: 3
    Dernier message: 08/06/2009, 11h09

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo