SpringMVC, jquery, плитки и частичная перерисовка

Я пытаюсь сделать частичный рендеринг своего веб-сайта, используя Spring mvc 3.1, плитки 2 и jquery.

Вот мой весенний конф:

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

Мои плитки:

<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>

Как вы видите, есть вложенный атрибут с именем "productSearchResults". Это страница результатов, и я хочу, чтобы эта страница была повторно отображена через ajax.

Мой контроллер:

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

Мой 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>

и, наконец, файл .js, включенный в productSearch.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);
        }
    });
});

Итак, вот что: Каждый раз, когда я меняю значение селектора searchCriteria.resultsSort на странице productsSearchResults.jsp, я хочу, чтобы плитка результатов была перезагружена (без перезагрузки всей страницы).

С помощью приведенного выше кода мне удалось повторно отобразить всю страницу (включая тег html ...), а не только ту часть, которая меня интересует.

Есть какие-нибудь подсказки о том, как достичь моей цели? Возможно ли это на самом деле, или я неправильно понял принцип частичного рендеринга?

5
задан Christos Loupassakis 13 February 2012 в 19:20
поделиться