The HIJAX controller progressively enhances page loading for browsers that have the new HTML5 history object pushState/popState function.

The controller binds to all hrefs on the page and loads new pages asynchronously. This functionality allows for much quicker page loading because css & javascript and static content are loaded once on the first page. You can also apply page transition effects while preserving the expected behavior of the browser back button. On mobile devices the site can be "saved to the home screen" and will behave similarly to a native app.

Once the a new page is loaded via AJAX the controller looks for all html elements marked with data-hijax="true" (typically the main content area of the page) on the old page and replaces the content of those elements with the content of the equivalent elements on the new page. All Responsive controllers within the dynamic hijax elements are stopped before the load and any new controllers loaded on the new page are started.

Sometimes is it nessesary to disable HIJAX on specific links. eg. link to a section of the site that has a different wrapper or different dynamic areas or legacy pages from older versions of a site, etc.

These links can be exempted from the HIJAX behavior as follows:

  • target="some-target"
  • data-no-hijax="true"

Default configuration excludes the following link forms

  • href="http://...
  • href="//...
  • href="javascript...
  • href="mailto...
  • href="#....

Pages loaded from javascript functions instead of by href href (document.location.href = '/some-path') need to be coded as an event trigger $('body').trigger('DigitopiaLoadPage','/some-path') to work with this controller.

Links to other pages: page 1 / page 2 / page 3 / page 4 (data-no-hijax="true") / page 4 as js trigger / offsite / content handler function / content handler static

  1. In your site wrapper, mark the dynamic content area(s) (if more than one, for example content & sidebar, they should not be nested) with data-hijax="true".
                          
  2. Boot the Responsive Controller with HIJAX capability enabled.
                          

Sometimes it is necessary to generate content for certain pages on the client side. The HIJAX controller matches content handler path to the current url and gets the content from the associated contentHandler by calling the contentHandler or using the content.

  1. Define the content handlers and boot the digitopiaController
                          
  2. The content must be well formed markup containing the common element(s) marked as data-hijax="true" and must be wrapped in a body tag so that the new page can be merged with the old content.

The HAJAX controller emits the following events:

  • DigitopiaWillLoadNewPage: A new page is about to load
  • DigitopiaDidLoadNewPage: A new page has loaded
  1. On this site the top navigation bar is outside of the dynamic contents area but we to change the highlighted tab when a new page is displayed. To do this we watch 'DigitopiaDidLoadNewPage' events and adjust the classes accordingly.
                          
  2. We attach the controller to the container for the top navigation data-jsclass="NavController"
                          

Loading...