Refreshing Areas

Top  Previous  Next

One of the technics that can be used with MoreMotion Face Ajax is refreshing an area on the page with a new content. The new content is obtained from the current page or from a SourceArea existing in a Ajax Source page.

 

SourceArea

A SourceArea should be prepared in a source page (a separate Page XSL StyleSheet document) by attaching a mo:type="SourceArea" attribute to a container HTML element in it.

 

  <div mo:type="SourceArea" mo:name="SourceArea1" mo:pageInfo="" >
    ...
  </div>

Attributes

mo:type

To denote a container element as a Source Area.

mo:name

The name of the SourceArea. This name is used identify the SourceArea in Ajax Source Page.

mo:pageInfo

This optional attribute can be used in case of pageInfo of the SourceArea is different than the TargetArea.

 
In the page configuration of the source page the page must be marked as Ajax Source Page by using the configuration element ajaxSourcePage with value true to block the direct access to it using the Display Page Service. Additionally the data requests used within the Source Areas should be specified in the sourceAreas attribute of the dataRequest elements.

Page Configuration of an Ajax Source Page:

  <root>
    <ajaxSourcePage>true</ajaxSourcePage>
 
    <dataRequest name="details" selectAll="true" sourceAreas="SourceArea1" />
    ...
  </div>

This is because during preparation of the Page XML Data for an Ajax Source Page, the MoreMotion ignores the data requests that are not required by the source areas.
 

TargetArea

Any container element can be marked with mo:type="TargetArea" attribute to denote that it is an Target area as follows.

 

  <div mo:type="TargetArea" mo:name="TargetArea1" id="TargetArea1" >
  </div>

Attributes

mo:type

To denote a container element as a TargetArea.

mo:name

The name of the TargetArea.

id

In a refresh call a TargetArea can be specified either with a DOM node handle or with a id referring to the value of this attribute.

Usually there is no initial content for the TargetAreas and before refreshing it with a new content they are invisible on the page. If there is a need for an initial content for an area then a SourceArea that is nested inside a TargetArea can be used.

Nesting A SourceArea inside a TargetArea

An area on a page can be denoted as both TargetArea and SourceArea. This way the initial content of the area can be refreshed with a new content provided by itself.

 

  <div mo:type="TargetArea" mo:name="TargetArea1" id="TargetArea1">
    <div mo:type="SourceArea" mo:name="SourceArea1" mo:pageInfo="">
     ...
    </div>
  </div>

During refresh, after performing a XSLT Transformation of the current page, the content of the TargetArea is replaced by the new content obtained from the SourceArea.

 
How to invoke the refresh

The refreshing of an area can be done by calling AjaxMgr.refreshAreas() method from any DHTML event procedure as follows.

 

  AjaxMgr.refreshAreas({
    actionName     : 'RefreshDetails'
    ,targetAreas   : 'TA_Details'
    ,requestParams : {ID:id,CAT:catElm.value}
    ,busyImage     : 'BusyImage1'
  });

See AjaxMgr.refreshAreas() method call in MoreMotion Face API.

The value of the actionName property should point to an existing actionParams configuration in the page configuration as follows.

actionParams element in the Page Configuration:

  <actionParams name="RefreshDetails"> 
    <sourceAreas>/AjaxSourcePage1.Details</sourceAreas> 
    <responseHandler>AjaxMgr.refreshAreasResponseHandler</responseHandler> 
  </actionParams> 

The sourceAreas sub-element here can define one or more AjaxSourcePage.SourceArea separated with commas.

 
Refreshing with RefreshAreasProcess

Refreshing an area can also be done using the RefreshAreasProcess