Nooku Framework

Nooku Framework allows you to retrieve any view through an AJAX call. You don't need to do anything special. You only need to add the output format you require. You do this by adding format=x to your URL.

Advanced : Nooku Framework 0.7 forces the JDocument rendered to raw if you make an AJAX request. This allows you do use format=x to specify the format rendered by the framework. You can read the discussion about this change here : http://groups.google.com/group/nooku-framework/browse_frm/thread/b45d...

Out of the box we support the following formats :

• html
• json
• csv

Above formats just work, no extra files need to be added. You can override these formats in your own view or define your own format by adding a format.php file to your view folder. Here you either extend from a framework view format, or define a new format and extend from KViewAbstract.

For example if you want to render the boats data from com_harbour as JSON using AJAX all you would need to do is make an AJAX call with the following request : http://mysite/index.php?option=com_harbour&view=boats&format=json

If you want to override the default behavior of the how the JSON is rendered you would add a 'json.php' file to

• com_harbour
  • views
    • boats
      • json.php

The code would look something like :

class ComHarbourViewJson extends KViewJson
{
        public function display()
        {
                //do custom logic here
        }
}

For an example on how to render your view data as rss/atom feed, check out com_profiles persons view, you can find it at : components/com_people/views/people/feed.php

For advanced users : The feed.php renders a feed of people and includes the vcard of each person in the item description. This is possible because templates can be loaded cross-view, eg : $description = $this->loadTemplate('site::com.profiles.view.person.hcard');

A jQuery GET/POST example

Let's make an example using jQuery to retrieve and post data to Nooku.

To do a GET request your JS would become something like

$.get('index.php?option=com_foo&view=bar',
    function(response) {
        // callback
    }
);

This should trigger your _actionRead() method in the controller ComFooControllerBar.

$.get('index.php?option=com_foo&view=bars',
    function(response) {
        // callback
    }
);

This calls _actionBrowse() in ComFooControllerBar.

If you want to pass parameters to the request just add them in the correct place

$.get('index.php?option=com_foo&view=bars',
    'user=62&thingid=20',
    function(response) {
        // callback
    }
);

Nooku wants us to use REST in the best way, so the only actions allowed on our controllers should be BREAD: browse, read, edit, add, delete, that translate directly to the HTTP methods GET, POST, PUT, DELETE.

So GET actions are only used to fetch data from the model, like doing a SELECT on a KModelTable.

If you want to modify data in the database table, Nooku provides you everything you need out of the box, using the POST HTTP method:

$.post('index.php?option=com_foo&view=bar',
    {
        _token: '<?=JUtility::getToken()?>',
        enabled: 1,
        otherfield: 'value'
    },
    function(response){
        //your actions
    }
);

To submit a form in an AJAXed way, and immediately refresh a portion of your screen to reflect the new data, you can create an event handler that serializes the form data and submits it to the server; suppose you have a form with an id="new-comment-form". This form submits a new comment in your page. This code prevents the page from submitting in the 'old style' way, and posts the data using AJAX based on the form action field.

$('#new-comment-form').live('submit', function(event) {
    event.preventDefault();
    $.post($(this).attr('action'),
        $(this).serialize(),
        function(json){
            refreshStories();
        }
    );
});

refreshStories() is a function that retrieves the updated data using $.get() in an HTML format, and puts it inside the element with id="replies"

function refreshStories() {
    $.get('index.php?option=com_foo&view=bars&layout=default_bars&format=raw',
            'user=62&thingid=20',
            function(response, status) {
                $('#replies').html(response);
            },
            'html');    
}