Alexander Schnitzler

Howto: Ajax Requests with Extbase and Fluid

Written in 2011 for TYPO3 4.x and Extbase 1.x. The APIs have changed since; the article stays online as an archive.

Please note this article is deprecated if using Extbase > 1.3, means TYPO3 4.5

Welcome to this short tutorial about Extbase and Ajax. If you are familiar with TYPO3 you might have heard of the eID concept that gives you the possibility to stop the rendering process very early and run your own script instead. That means, only the most needed components are initiated to save memory and time and at the earliest moment possible you output whatever you need. That indeed is a nice feature of TYPO3 but I’m not gonna talk about it this time for different reasons.

Instead I want to introduce another way having the ability to use all the features TYPO3 and Extbase come with. So, let’s get started with a very small new extension.

So, what has to be done. At first you need a working Extbase extension with just one controller, two actions and one template for one of these actions. To keep it simple there is no model, no repository, nothing but the controller.

<?php

class Tx_AsAjaxexample_Controller_ExampleController extends Tx_Extbase_MVC_Controller_ActionController 
{
  /**
   * @return void
   */
  public function indexAction() {}

  /**
   * @return void
   */
  public function ajaxAction() {
    $json = array(
      'jQuery',
      'ExtJS',
      'Prototype',
      'MooTools'
    );

    return json_encode($json);
  }
}

All the magic here is to create a new PAGE object with a typeNum different from “0″ (line 2) and assign the content of the extension to the blank page (line 11). Adding type=99 to the request url let’s this PAGE come into play and outputs nothing else but what we need, the JSON string. Please be sure not to print the parsetime ( <!– Parsetime: 254ms –> ) by adding the following line to your localconf.php:

<?php
$TYPO3_CONF_VARS["FE"]["debug"] = '0';

Now we’re ready to put the plugin on a site and view it in the frontend. In case you are not using my example extension here’s the template for you:

<button id="ajax">fetch list</button>
<button id="clear">delete list(s)</button>
<div id="list">List(s):</div>
 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
ajaxUrl = "{f:uri.action(action:'ajax', pageType:'99')}";
 
(function($) {
  $(document).ready(function(){
    $('#clear').click(function(){
      $('#list').text('List(s):');
      return false;
    });
 
    $('#ajax').click(function(){
      $.getJSON(ajaxUrl, function(data) {
        var items = [];
 
        $.each(data, function(key, val) {
          items.push('<li id="'   key   '">'   val   '</li>');
        });
 
        $('<ul/>', {
          html: items.join('')
        }).appendTo('#list');
      });
 
      return false;
    });
  });
})(jQuery);
</script>

Update: Added return false; to the click-functions for disabling their normal submit-behaviour.

I guess the code is self-explaining. There’s one button to do the request, one to clear the DOM and a placeholder div for the result. The rest is easy JS with jQuery. Having my extension installed you can now test it. As you probably can see it’s not super-fast but also not too bad. I did some tests with firebug and the request mostly took about 300ms.

Alright, that’s it again. Hopefully that is a little help in your daily business.

← All posts