SpringMVC, jQuery, azulejos, y rerendering parcial

Question

que estoy tratando de hacer una representación parcial de mi sitio web, utilizando Spring MVC 3.1, azulejos, 2 y jQuery.

Aquí es mi primavera conf:

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

los cuadros de 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> 

Como se puede ver que hay un atributo anidado llamado "productSearchResults". Esta es la página de resultados, y quiero que esta página se vuelva a procesar a través de ajax.

Mi controlador:

@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"; 
} 

Mis JSP:

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> 

y finalmente un archivo .js incluido en la 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); 
     } 
    }); 
}); 

Así que aquí está la cosa: cada vez que se cambia el valor del selector "searchCriteria.resultsSort" en la página productsSearchResults.jsp, quiero que el resultado del azulejo se vuelva a cargar (sin volver a cargar la página entera)

Con el código proporcionado anteriormente, me las arreglo para volver a hacer toda la página (incluyendo la etiqueta html ...), pero no sólo la parte que el interés de mí.

Cualquier sugerencia sobre cómo lograr mi objetivo? ¿Es realmente posible o malinterpreté el principio de representación parcial?

Answer 1

He encontrado lo que estaba mal, así que estoy respondiendo a mi propia pregunta ...

acabo de cambiar el código JavaScript en esto:

$('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); 
    } 
}); 
}); 

Y ahora funciona!

Debido a la parcialización de la representación, parece que el selector "searchCriteria.resultsSort" ya no está asignado al formulario, una vez que la página se vuelve a cargar en la pantalla, entonces también tuve que agregar esta línea a mi Controlador:

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

¡Eso es todo! Espero que ayude a otras personas.