JQuery, Ajax, and News |...

Note: For the purposes of this article I have changed the squigly brackets around literal tags with square brackets.... When implementing this solution, or copying and pasting code, where you see [literal] and [/literal] you should replace the square brackets with the appropriate squigly brackets

Now we all know that ajax with jquery isn't hard (wish I'd known that a long time ago when I wrote the FLVPlayer module).  The problem is... how to get it to work with CMS Made Simple and smarty?  Well, I figured it out.

if you look at the home page of this site, and click on a news article title from the left column, you will see that the introductory text on right area is replaced with the news article detail.

The problem is... if you copy and paste the detail url from the news module into a new tab on your browser... it will load an entire page... and this is normally what we want to happen so that the normal browsing experience works throughout your site.... However, with ajax, we need to have some URL that returns ONLY the content that we want to place into the target div.  This is simple enough in CMS Made Simple.  There is a little known feature for all urls in CMSMS. you can simply add the 'showtemplate=false' parameter to the end of the url.  It will then only call the module with the parameters supplied, and return just the results for that module.

The next problem (though it's a minor one for anybody with programming experience) was that the URL sent from CMS Made Simple for the detail view could have a bunch of & stuff in there which javascript doesn't like.... so those have to be converted to just '&' characters.

Now CMS Made Simple doesn't come with jquery installed by default... but it's not hard to add it manually... just add the required <script...> tags to your page template.... However, I enabled jquery a different way...

Nuno costa and I have been working on a new JQueryTools module that will contain jquery itself a bunch of jquery plugins to provide useful functionality to numerous modules quite easily.  I've already used this module to enable sortable tables in CGCalendar, CGFeedback, and FrontEndUsers... and tooltips in CGFeedback... so even though this module isn't released yet (I hate writing documentation).... I used it.   Keep your eyes peeled for this module when it's released.

So here's the simple News summary template that I came up with to handle the ajax stuff.

<!-- Start News Display Template -->
{* javascript stuff that will perform ajax calls *}
<script type='text/javascript'>
/* <![CDATA[ */
[literal]
function ajax_load(url,dest)
{  
 var tmp = url + "&showtemplate=false";
 var tmp2 = tmp.replace(/amp;/g,'');
 $(dest).load(tmp2); 
}
[/literal]
/* ]]> */
</script>

{foreach from=$items item=entry}
<div class="NewsSummary">

<div class="NewsSummaryLink">
 <a onclick="ajax_load('{$entry->moreurl}','#the_content'); return false;" href="{$entry->moreurl}">{$entry->title}</a>
</div>

{if $entry->postdate}
 <div class="NewsSummaryPostdate">
 {$entry->postdate|cms_date_format}
 </div>
{/if}

<div class="NewsSummaryCategory">
 {$category_label} {$entry->category}
</div>

{if $entry->summary}
 <div class="NewsSummarySummary">
 {eval var=$entry->summary}
 </div>

{else if $entry->content}

 <div class="NewsSummaryContent">
 {eval var=$entry->content}
 </div>
{/if}
</div>
{/foreach}

{if isset($items) && count($items) > 0}
<div style="text-align: right;">{cms_selflink page='news' text='Read More...'}</div>
{/if}
<!-- End News Display Template -->

Now as you can see this is a pretty standard news summary template... except for the ajax_load javascript function.... and the NewsSummaryLink stuff.   I'll try to explain it a bit.

You can see that I start by declaring a javascript block, and immediately use the [literal] and [/literal] tags so that smarty won't think that the javascript is actually something it should try to parse.  This is standard procedure for any javascript stuff in CMS pages.

Then the ajax_load function accepts a url, and a destination element id.   it then just adds the showtemplate=false parameter I mentioned above, cleans up the url (changes all &ammp; to &) and then calls jquery to do the rest.  That's the grunt work.

Now the link...  here is the magic.... the default news summary template uses {$entry->titlelink} but by doing a little bit of smarty debugging.... adding {dump item='entry'} into my news summary template, I was able to determine that there is a variable called moreurl that is just a url, and not a pre-built link tag..... therefore I could use this url and build my own link.

I first built the link in the standard way:  <a href="{$entry->moreurl}">{$entry->title}</a> and that worked fine.  all I needed was to add the javasript stuff.... so I used the html onclick attribute for that.   and called my ajax load function with the same url, and the id of the div that I wanted to use as my destination.  Being careful to watch out for quoting, I got the url you see below.

<a href="{$entry->moreurl}" onclick="ajax_load('{$entry->moreurl}','#the_content'); return false;">{$entry->title}</a>

And that was it.... simple eh... its actually taken me longer to write this blog entry than it did to implement the code.

You can now use this same mechanism to do things like use ajax for the pagination links, or whatever your mind can think of.... and you're not just stuck to the News module... As I've demonstrated, ajax can be used throughout CMS Made Simple...and it's quite trivial when using jquery.