Continuum Canvas Ajax in a Layout Tutorial

Last updated
Save as PDF

Overview

There are two common schools of though when it comes to using templates to build dynamic web interfaces - Server Side processing and Client Side Ajax.

This tutorial walks you through the process of building a sample Continuum Canvas Layout that includes Widget data using Ajax and jQuery.

This tutorial is more advanced, and assumes that you are familiar with the Canvas Editor and creating, editing, saving, and testing Widgets and Layouts. We suggest that you complete the Continuum Canvas Layout Tutorial before continuing. If you want to skip it and see a server-side example, go to the Continuum Canvas Server Side Tutorial.

Step 1. Create a Layout

In the Canvas Editor, in the tutorials Project, create a new Layout. Use ajax as the Component, and ajax.layout as the Name.
Take the default Layout definition, and create the .js and .html files referenced therein.

You can skip the .css reference if you like - we wont' be doing any styling in this tutorial. If so, remove the styles reference from the Layout.

Step 2. Create a Widget

We'll need a Widget to provide data for this tutorial. In the layouts Project, ajax Component, create a resource called tasklist.widget.

This Widget will retrieve a list of Tasks. It's assumed there are Tasks defined - if not, log in and create a few.

Ajax can work with different types of response data, but for this example we're getting HTML.

If you did the previous tutorial you'll recognize this is the same as the first Widget we created there. If you're feeling advanced, skip ahead and reference that Widget instead of creating a new one!

Didn't do the other tutorial? Use the following Widget definition:

{ 
    "type" : "format",
    "datasource": {
        "name": "_CATO"
    },
    "options": {
        "prefix": [
            "<table>\n",
            "   <thead>\n",
            "       <th>Task Name</th>\n",
            "       <th>Version</th>\n",
            "   </thead>\n",
            "   <tbody>\n"
        ],
        "suffix": [
            "   \n</tbody>",
            "\n</table>"
        ],
        "row_template": [
            "<tr>",
            "<td>{0}</td>",
            "<td>{1}</td>",
            "</tr>"
            ],
        "row_separator": "\n",
        "record_format" : "list"
    },
    "code" : "select task_name, version from task limit 10" 
}

Save the Widget, and Test it to make sure there are results.

HTML via Ajax

Ajax works by getting data, and inserting it into an HTML document, typically into a 'placeholder' element. Let's create a placeholder:

The HTML

Edit ajax.html, and paste in the following code:

<div id="ph1" style="float: left; background-color: #ddffff;">
This is a placeholder.
</div>

Click the Test button and the Layout will be displayed. Nothing special yet, just our 'placeholder' message.

The Script

Ajax is a client-side concept, so we'll need some script to get the Widget and use the content.

As in previous tutorials, the script examples use the jQuery framework.

Edit ajax.js file, paste in the following code, and then click Save:

$(function() {
    $("#ph1").load( "/tutorials/ajax/tasklist.widget" );
});

If you're using the Widget from the previous tutorial, use /tutorials/serverside/tasklist.widget

The jQuery '.load' function is one of the simplest ways to make an Ajax call. It simply loads the Ajax response into the designated element on the page.

Select ajax.html and click the Test button. Congratulations, you've just made a Layout that pulls data onto the page using Ajax.

So What?

Ok, I agree that might have been a little anti-climatic, especially if you did the Server Side tutorial. You are probably asking yourself why this approach is arguably better?

Here's why - we can make Ajax calls based on user input, and update content without refreshing the page!

Edit ajax.html and add the following below the existing markup:

<br />
<button id="btn1">Click Me!</button>

Now, edit ajax.js, replace the contents of the editor with the following, and click Save:

$(function() {
    $("#btn1").click(function() {
        $("#ph1").load( "/tutorials/ajax/tasklist.widget" );
    });
});

Don't forget! If you're using the Widget from the previous tutorial, use /tutorials/serverside/tasklist.widget

Select ajax.html and click the Test button. Now our page appears with the placeholder message. Click the button to invoke the Ajax call. Success! You just populated the page with data requested by a user.

Regarding Variables

Whether GET or POST, whether done using jQuery .load() or the more flexible .ajax(), all methods of making Ajax requests have the ability to pass additional arguments to a Widget that will be available in the Widget code as [$variables$].

In this example, here's how you could pass an additional argument to the tasklist.widget.

$("#ph1").load( "/tutorials/ajax/tasklist.widget", { "limit" : "10" } );

To implement this argument in the Widget, modify the 'code' in tasklist.widget and click Save:

select task_name, version from task limit [$limit$]

Wrapping Up

In this tutorial, we've built a static Layout, and populated a placeholder with dynamic Widget content using Ajax.