Base AJAX Component

Deprecated

Available since version 1.0.0

Why is this deprecated?

An robust alternative that supersedes this feature is the open-source Sling Dynamic Include (SDI) library. SDI has been contributed to the Apache Sling project and provides: SSI, ESI, and JSI (Javascript-Side Include; which is effectively what this ACS AEM Commons feature provided) capabilities.

We recommend evaluating Sling Dynamic Include before using this feature.

Purpose

Provide a simple extension point for turning “normal” components into components that are pulled into the page via AJAX.

How to Use

  1. Requires jQuery 1.8+
  2. Install the ACS AEM Commons package
  3. Make sure the acs-commons.components clientlib is included (preferably at the end of the page)
  4. On any existing component definition; set the component’s sling:resourceSuperType to be acs-commons/components/content/base/ajax

  5. Optionally, set the property ajaxSelectors on the cq:Component node. This selector is used to resolve the script for this cq:Component

    • If this value is not set, ‘ajax’ is default

  6. Rename the default component JSP to be ajax.jsp (or whatever your custom ‘ajaxSelectors’ property specifies)

    • Ex. apps/mycomponent@ajaxSelectors: nocache would use /apps/mycomponent/nocache.jsp to render the AJAX request for the resource.

    • Ex. apps/mycomponent@ajaxSelectors: foo.bar would use /apps/mycomponent/foo/bar.jsp to render the AJAX request for the resource.

  7. Either <cq:include path="foo" resourceType="acme/components/text"/> or drag the component into a ParSys

Show loading indicator while AJAX request is loading

The Base AJAX component comes with a default loading indicator, generated by spin.js. To use this loading indicator, you need to do the following steps

  • Make sure the acs-commons.components.ajax.loading-indicator clientlib is included (preferably at the end of the page)
  • Set the property ajaxLoadingIndicator on the cq:Component node to acs-ajax-loading-indicator

Notes

  • If you leave a default script with the same name as the component, the ajax functionality will be ignored and the component will render as usual.

    • Ex. /apps/mycomponent/mycomponent.jsp

  • You CANNOT include one AJAX’d component in another; only the first will load. This is done by checking for the existence of the string ‘data-ajax-component’ in the AJAX result.

Example

Default configuration

  • /apps/geometrixx/compoments/title

    • sling:resourceSuperType: acs-commons/components/content/base/ajax

  • /apps/geometrixx/compoments/title/title.jsp

    • moved to: /apps/geometrixx/compoments/title/ajax.jsp
    • title.jsp will no longer exist

Default configuration including loading indicator

  • /apps/geometrixx/compoments/title

    • sling:resourceSuperType: acs-commons/components/content/base/ajax
    • ajaxLoadingIndicator: acs-ajax-loading-indicator

  • /apps/geometrixx/compoments/title/title.jsp

    • moved to: /apps/geometrixx/compoments/title/ajax.jsp
    • title.jsp will no longer exist

Customized selector configuration

  • /apps/geometrixx/compoments/title

    • sling:resourceSuperType: acs-commons/components/content/base/ajax
    • ajaxSelectors: nocache

  • /apps/geometrixx/compoments/title/title.jsp

    • moved to: /apps/geometrixx/compoments/title/nocache.jsp
    • title.jsp will no longer exist