Continuum Canvas Ajax in a Layout Tutorial
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 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. Useajax
as the Component, andajax.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.