Creating Refresh Area in V7

Creating Refresh Area in Websphere Commerce with Dojo

Refresh Areas are created when you need to refresh with new content when users interact with the user interface.
For this case, it is necessary to use the render context, refresh area and refresh controllers API from the WebSphere Commerce AJAX framework.

Follow a step-by-step in how to create a refresh area.

1.) Identify the fragment you want to refresh

2.) Create an action and a forward in struts-config-ext.xml

<forward className=”com.ibm.commerce.struts.ECActionForward” name=”ShipServiceMethodsDisplayView/10101″ path=”/ShoppingArea/CheckoutSection/SingleShipment/SingleShipmentShippingMethodDetails.jsp”/>

<action path=”/ShipServiceMethodsDisplayView” type=”com.ibm.commerce.action.ExtendedBaseAction”/>

3.) Create the Access Control Policies and Run in your environment or you can just insert into your database as well:

insert into acaction ( acaction_id, action) values ( (select min(acaction_id) – 1 from acaction), ‘ShipServiceMethodsDisplayView’);
insert into acactactgp (acaction_id, acactgrp_id) values ( (select acaction_id from acaction where action = ‘ShipServiceMethodsDisplayView’), (select acactgrp_id from acactgrp where groupname = ‘AllSiteUsersViews’) );

4.) Define in a .js file the context. The context will handle and allow to refresh the area

wc.render.declareContext(“shippingServiceAllAreaContext”,{orderId:”",addressId:”"},”");

5.) Declare the controler. This allow to refresh the context

wc.render.declareRefreshController({
id: “shippingServiceAllAreaController”,
renderContext: wc.render.getContextById(“shippingServiceAllAreaContext”),
url: “ShipServiceMethodsDisplayView”,
formId: “”

,modelChangedHandler: function(message, widget) {
var controller = this;
var renderContext = this.renderContext;
widget.refresh(renderContext.properties);
}
,renderContextChangedHandler: function(message, widget) {
var controller = this;
var renderContext = this.renderContext;
widget.refresh(renderContext.properties);
}
,postRefreshHandler: function(widget) {
var controller = this;
var renderContext = this.renderContext;
cursor_clear();
}

6.) Now, add the refresh area widget where the jsp is include

<div dojoType=”wc.widget.RefreshArea” widgetId=”shippingServiceAllArea”  controllerId=”shippingServiceAllAreaController” id=”shippingServiceAllArea”>
<%out.flush();%>
    <c:import url=”/${sdb.jspStoreDir}/ShoppingArea/CheckoutSection/SingleShipment/SingleShipmentShippingMethodDetails.jsp”>
        <c:param value=”${currentOrderId}” name=”orderId”/>
    </c:import>
<%out.flush();%>
</div>
<script type=”text/javascript”>
    dojo.addOnLoad(function() {
        parseWidget(“shippingServiceAllArea”);
    });
</script>

* Do not forget to add parseWidget with the refreshArea widget id.

7.) Now you must identify when to call the refresh controller and update the context according with your process

wc.render.getRefreshControllerById(‘shippingServiceAllAreaController’);
wc.render.updateContext(‘shippingServiceAllAreaContext’,{orderId:thisOrderId ,address:thisAddressId});