2012-02-13 10 views
5

Web sitemde, mvc 3.1, tile 2 ve jquery kullanarak kısmi bir görüntü oluşturmaya çalışıyorum.SpringMVC, jquery, fayans ve kısmi rerendering

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

Benim fayans conf:

İşte benim bahar conf var

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

siz "productSearchResults" adlı bir iç içe özellik var Gördüğünüz gibi

. Bu sonuç sayfası ve bu sayfanın ajax ile yeniden oluşturulmasını istiyorum.

Benim denetleyicisi:

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

Benim JSP'lerin:

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> 

ve nihayet bir .js dosyası dahil pr içinde oductSearch.jsp: Yani burada

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

şey: Ben productsSearchResults.jsp sayfasında "searchCriteria.resultsSort" seçici değerini değiştirmek her zaman, (sonuçlar kiremit yeniden yüklenmesi isteyen tüm sayfayı yenilemeden).

Yukarıdaki kodla, tüm sayfayı (html etiketi de dahil olmak üzere) yeniden oluşturmayı ve yalnızca ilgilendiğim bölümü değil, baştan başlıyorum.

Hedefe nasıl ulaşacağım konusunda bir ipucu? Gerçekten mümkün mü yoksa kısmi oluşturma ilkesini yanlış anlamış mıyım?

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

Ve şimdi çalışıyor:

cevap

4

neyin yanlış olduğunu buldum, o yüzden benim kendi soru yanıtlama ...

Sadece bu içine javascript kodu değişti!

Kısmi yeniden oluşturma işleminin Beacause'ı, artık "searchCriteria.resultsSort" seçicinin artık sayfaya eklendiğinde, artık ekrana yeniden yüklendiğinde, bu satırı da bu satıra eklemek zorunda kaldığı anlaşılıyor. denetleyicisi:

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

Hepsi bu kadar! Umarım diğer insanlara yardımcı olur.

İlgili konular