SpringMVC, jquery, tiles, và rerendering một phần

Question

Tôi đang cố gắng thực hiện một phần hiển thị trang web của mình, sử dụng spring mvc 3.1, tiles 2 và jquery.

Dưới đây là conf mùa xuân của tôi:

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

gạch của tôi 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> 

Như bạn thấy có một thuộc tính lồng nhau đặt tên là "productSearchResults". Đây là trang kết quả và tôi muốn trang này được hiển thị lại thông qua ajax.

điều khiển của tôi:

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

JSP của tôi:

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> 

và cuối cùng là một tập tin .js bao gồm trong 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); 
     } 
    }); 
}); 

Vì vậy, đây là điều: mỗi khi tôi thay đổi "searchCriteria.resultsSort" giá trị chọn trong trang productsSearchResults.jsp, tôi muốn ngói kết quả được nạp lại (không tải lại toàn bộ trang).

Với mã được đưa ra ở trên, tôi quản lý để hiển thị lại toàn bộ trang (bao gồm thẻ html ...) nhưng không chỉ là phần mà tôi quan tâm.

Bất kỳ gợi ý nào về cách đạt được mục tiêu của tôi? Là nó thực sự có thể hoặc tôi hiểu lầm nguyên tắc dựng hình một phần?

Answer 1

Tôi tìm thấy những gì đã sai, vì vậy tôi trả lời câu hỏi của riêng tôi ...

tôi chỉ cần thay đổi mã javascript vào đây:

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

Và bây giờ nó hoạt động!

Bẻ nhạt khi hiển thị lại một phần, có vẻ như bộ chọn "searchCriteria.resultsSort" không còn được ánh xạ tới biểu mẫu nữa, khi trang được tải lại màn hình, vì vậy tôi cũng phải thêm dòng này vào bộ điều khiển:

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

Đó là tất cả! Hy vọng nó sẽ giúp người khác.