मैं वसंत एमवीसी 3.1, टाइल्स 2, और jquery का उपयोग करके, मेरी वेबसाइट का आंशिक प्रतिपादन करने की कोशिश कर रहा हूं।स्प्रिंगएमवीसी, jquery, टाइल्स, और आंशिक पुनर्वितरण
यहाँ मेरी वसंत conf है:
<beans:bean class="org.springframework.js.ajax.AjaxUrlBasedViewResolver">
<beans:property name="viewClass" value="org.springframework.js.ajax.tiles2.AjaxTilesView"/>
</beans:bean>
मेरे टाइल्स 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>
जैसा कि आप देख वहाँ एक नेस्टेड विशेषता "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 फ़ाइल शामिल पीआर में 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);
}
});
});
बात है: हर बार है कि मैं productsSearchResults.jsp पेज में "searchCriteria.resultsSort" चयनकर्ता मान बदलने के लिए, मैं परिणाम टाइल पुनः लोड किया जा करना चाहते हैं (पूरे पृष्ठ को फिर से लोड के बिना)।
ऊपर दिए गए कोड के साथ, मैं पूरे पृष्ठ को फिर से प्रस्तुत करने का प्रबंधन करता हूं (एचटीएमएल टैग सहित ...) लेकिन न केवल उस हिस्से का हिस्सा जो मुझे रूचि है।
मेरे लक्ष्य को प्राप्त करने के तरीके पर कोई संकेत? क्या यह वास्तव में संभव है या मैंने आंशिक प्रतिपादन सिद्धांत को गलत समझा?