Dojo Refresh Area (AJAX Request using DOJO) in WCS

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>

Leave a Reply