SpringMVC, jquery, tiles e rerendering parziale

Question

Sto provando a eseguire un rendering parziale del mio sito Web, utilizzando spring mvc 3.1, tiles 2 e jquery.

Ecco la mia conf primavera:

<beans:bean class="org.springframework.js.ajax.AjaxUrlBasedViewResolver"> 
    <beans:property name="viewClass" value="org.springframework.js.ajax.tiles2.AjaxTilesView"/> 
</beans:bean> 

le piastrelle conf:

<definition name="productSearch" extends="baseLayout"> 
    <put-attribute name="mainSection"> 
     <definition template="/WEB-INF/views/productSearch.jsp"> 
      <put-attribute name="productSearchResults" value="/WEB-INF/views/productSearchResults.jsp" /> 
     </definition> 
    </put-attribute> 
</definition> 

Come si vede c'è un attributo nidificato denominata "productSearchResults". Questa è la pagina dei risultati, e voglio che questa pagina venga riprodotta tramite ajax.

mio regolatore:

@RequestMapping(params = "search=true", value = "/", method = RequestMethod.POST) 
public String searchHandler(@Valid final SearchFormBean searchformBean, final Model model) { 
    model.addAttribute("productsList", productsService.findProducts(searchformBean.getSearchCriteria())); 
    return "productsSearch"; 
} 

miei jsps:

productsSearch.jsp:

<form:form id="product-search-form" method="post" modelAttribute="productSearchFormBean"> 
    <input type="hidden" name="search" value="" /> 
    <form:input path="searchCriteria.name" /> 
    // AND SOME OTHER FIELDS... 
    <button type="submit" onclick="this.form.search.value='true';">Search</button> 
</form> 

productSearchResults.jsp:

<div id="products-result"> 
    <div id="search-results-info" class="section-content"> 
      Order results : 
     <form:select path="searchCriteria.resultsSort"> 
      <form:option value="orderByName">Name</form:option> 
      <form:option value="orderByDame">Date</form:option> 
     </form:select> 
    </div> 

    <div id="products-content" class="section-content">     
     <c:forEach var="product" items="${productsList}"> 
      <article> 
       // PRODUCT INFORMATIONS DISPLAYED HERE... 
      </article> 
     </c:forEach> 
    </div> 
</div> 

e, infine, un file .js incluso nel pr oductSearch.jsp:

$('select[id="searchCriteria.resultsSort"]').change(function() { 
    $.ajax({ 
     type : "POST", 
     url : "/myapp/product/search/", 
     data : "search=true&fragments=productSearchResults", 
     success : function(response) { 
      $("#search-results").html(response); 
     }, 
     error : function(e) { 
      alert('Error : ' + e); 
     } 
    }); 
}); 

Quindi, ecco la cosa: ogni volta che cambio il valore del selettore "searchCriteria.resultsSort" nella pagina productsSearchResults.jsp, voglio la tessera risultati da ricaricare (senza ricaricare l'intera pagina).

Con il codice sopra riportato, riesco a rendere nuovamente l'intera pagina (incluso il tag html ...) ma non solo la parte che mi interessa.

Qualche suggerimento su come raggiungere il mio obiettivo? È davvero possibile o ho frainteso il principio del rendering parziale?

Answer 1

ho trovato cosa non andava, quindi sto rispondendo alla mia domanda ...

Ho appena cambiato il codice JavaScript in questo:

$('select[id="searchCriteria.resultsSort"]').change(function() { 
$.ajax({ 
    type : "POST", 
    beforeSend : function(req) { 
     req.setRequestHeader("Accept", "text/html;type=ajax"); 
    }, 
    url : "/myapp/product/search/", 
    data : "search=true&fragments=productSearchResults", 
    success : function(response) { 
     $("#search-results").html(response); 
    }, 
    error : function(e) { 
     alert('Error : ' + e); 
    } 
}); 
}); 

E ora funziona!

A causa del parziale ri-rendering, sembra che il selettore "searchCriteria.resultsSort" non sia più mappato al modulo, una volta che la pagina è stata ricaricata sullo schermo, quindi ho dovuto aggiungere anche questa linea al mio controller:

model.addAttribute("searchCriteria", searchformBean.getSearchCriteria()); 

Questo è tutto! Spero che aiuti le altre persone.