Here I’m describing the steps that how we can easily work with dojo refresh area.
1. Create a refreshable div of dojo
<div dojoType="wc.widget.RefreshArea" id="MiniShoppingCart" widgetId="MiniShoppingCart" controllerId="MiniShoppingCartController" onmouseover="showMiniShopCartDropDown('placeHolder','quick_cart_container','orderItemsList');" role="wairole:region" waistate:live="polite" waistate:atomic="true" waistate:relevant="all">
<%out.flush();%>
<c:import url="${jspStoreDir}include/MiniShopCartDisplay.jsp">
<%-- variables come from HeaderDisplay.jspf --%>
<c:param name="storeId" value="${param.storeId}"/>
<c:param name="catalogId" value="${param.catalogId}"/>
<c:param name="langId" value="${param.langId}"/>
</c:import>
<%out.flush();%>
</div>
2. This line is used to initialize the parameters of a included js in a page.
dojo.addOnLoad(function() { CommonControllersDeclarationJS.setControllerURL('MiniShoppingCartController', getAbsoluteURL()+'AjaxQuickCartDisplay?storeId=<c:out value="${WCParam.storeId}"/>&catalogId=<c:out value="${WCParam.catalogId}"/>&langId=<c:out value="${WCParam.langId}"/>');
}
3. Entry in CommonContextsDeclaration.js
wc.render.declareContext("MiniShoppingCartContext",null,"")
Note: Please check the commas or semicolon after or previous this statement.
4. Entry in ControllerDeclaration
wc.render.declareRefreshController({
id: "MiniShoppingCartController",
renderContext: wc.render.getContextById("MiniShoppingCartContext"),
url: "",
formId: ""
/**
* Refreshs the mini shopping cart.
* If a new order item is added via an Ajax service call, set the mini shopping cart to display the new order item in the dropdown.
* Otherwise, only refresh the contents of mini shopping cart to the updated order information.
* This function is called when a modelChanged event is detected.
*
* @param {string} message The model changed event message
* @param {object} widget The registered refresh area
*/
,modelChangedHandler: function(message, widget) {
var controller = this;
var renderContext = this.renderContext;
if(message.actionId in order_updated || message.actionId == 'AjaxDeleteOrderItemForShippingBillingPage'){
var param = [];
if(message.actionId == 'AjaxAddOrderItem'){
param.addedOrderItemId = message.orderItemId + "";
showDropdown = true;
}
widget.refresh(param);
}
},
/**
* Destroys the old mini shopping cart dialog with previous order information.
* If order item was added, display the mini shopping cart dropdown with the new order item added contents.
* This function is called after a successful refresh.
*
* @param {object} widget The registered refresh area
*/
/**This is a sample of other method.*/
renderContextChangedHandler: function(message, widget) {
var controller = this;
var renderContext = this.renderContext;
if (controller.testForChangedRC(["payment${i}"]) || controller.testForChangedRC(["paymentTCId${i}"])) {
if (renderContext.properties.payment${i} == "empty") {
viewName = "EmptySnippetView";
} else {
viewName = paymentSnippetsURLMap[renderContext.properties.payment${i}];
}
controller.url = viewName + '?storeId=<c:out value="${WCParam.storeId}" />&catalogId=<c:out value="${WCParam.catalogId}" />&langId=<c:out value="${WCParam.langId}" />';
widget.refresh(renderContext.properties);
}
},
postRefreshHandler: function(widget) {
var controller = this;
var renderContext = this.renderContext;
//The dialog contents has changed..so destroy the old dialog with stale data..
destroyDialog();
if(showDropdown){
//We have added item to cart..So display the drop down with item added message..
showMiniShopCartDropDown("placeHolder",'quick_cart_container','orderItemAdded');
showDropdown = false;
}
}
}),
5. On the jsp above the created div
<script type="text/javascript">dojo.addOnLoad(function() {
parseWidget("orderTotalAmountArea");
});</script>