AJAX

Joomlatools UI has built-in support for AJAX driven navigation to build fast en responsive apps.

We strongly believe in interfaces that run without JavaScript as well as with it. Therefore the AJAX support loads entire pages and grabs the specified content and loads in the current layout.

Shark alert: Only use the built-in AJAX navigation if you know what you’re doing!

  1. The first step for using the built-in AJAX navigation is making sure all pages exist.
  2. The next step is adding an ID to the element in the markup you want to load the new page content in.
  3. As a third step make sure that same ID also exists on the page you are loading with AJAX.
  4. As a last step add a [data-ajax-target] attribute to the anchor linking to the AJAX page and make sure it’s content is the name of the created ID.

Example

Main page

Link to AJAX content

Main page content

<div class="k-component">
  <div id="k-ajax">
    <div class="k-container">
      <div class="k-container__full">
        <p><a href="../ajax-page/index.html" data-ajax-target="k-ajax">Link to AJAX content</a></p>
        <p>Main page content</p>
      </div>
    </div>
  </div>
</div>

AJAX page

<div class="k-component">
  <div id="k-ajax">
    <div class="k-container">
      <div class="k-container__full">
        <p>AJAX successfully loaded</p>
        <p><a href="../ajax/index.html" data-ajax-target="k-ajax">Load main content again</a></p>
      </div>
    </div>
  </div>
</div>

Now when clicking the link, the content found in the <div id="k-ajax"> div on the AJAX page, will get loaded inside the <div id="k-ajax"> on the main page.

This way, when JavaScript is broken or not loaded at all, the user will always be able to load the page linked to.

On AJAX load

By default, all the JavaScript in the UI is being checked and reloaded when needed after the AJAX page is done loading.

If you’re building your own app you might run some other JavaScript as well. Create the following function to hook into the AJAX success event:

kodekitUI.onAjaxLoad = function() {}

You’ve got access to the responseTxt, statusTxt, xhr, pageHead and pageTitle.

Need Help?

Let our developers personally assist you. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.