JQuery and Ajax.

01 Apr JQuery and Ajax.

Note: For the reasons of this article I have changed the squigly sections around exacting labels with square brackets…. At the point when executing this arrangement, or replicating and sticking code, where you see [literal] and [/literal] you ought to supplant the square sections with the fitting squigly sections

Presently we all realize that ajax with jquery isn’t hard (wish I’d realized that quite a while prior when I composed the FLVPlayer module). The issue is… step by step instructions to get it to work with CMS Made Simple and smarty? All things considered, I made sense of it.

in the event that you take a gander at the landing page of this site, and click on a news article title from the left segment, you will see that the initial content on right territory is supplanted with the news article subtle element.

The issue is… in the event that you duplicate and glue the point of interest url from the news module into another tab on your program… it will stack a whole page… furthermore, this is ordinarily what we need to happen so that the typical perusing knowledge meets expectations all through your site…. In any case, with ajax, we have to have some URL that profits ONLY the substance that we need to place into the target div. This is sufficiently basic in CMS Made Simple. There is somewhat known highlight for all urls in CMSMS. you can basically include the “showtemplate=false” parameter to the end of the url. It will then just call the module with the parameters supplied, and return simply the outcomes for that module.

The following issue (however its a minor one for anyone with programming knowledge) was that the URL sent from CMS Made Simple for the subtle element perspective could have a group of & stuff in there which javascript doesn’t like…. so those must be changed over to simply “&” characters.

Presently CMS Made Simple doesn’t accompany jquery introduced naturally… however its not difficult to include it physically… simply add the obliged <script…> labels to your page template…. Notwithstanding, I empowered jquery an alternate way…

Nuno costa and I have been dealing with another JQueryTools module that will contain jquery itself a cluster of jquery plugins to give valuable usefulness to various modules effectively. I’ve officially utilized this module to empower sortable tables in CGCalendar, CGFeedback, and FrontEndUsers… furthermore, tooltips in CGFeedback… so despite the fact that this module isn’t discharged yet (I loathe composing documentation)…. I utilized it. Keep your eyes peeled for this module when its discharged.

So here’s the basic News outline layout that I thought of 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 –>

Presently as should be obvious this is a really standard news synopsis layout… with the exception of the ajax_load javascript function…. also, the NewsSummaryLink stuff. I’ll attempt to clarify it a bit.

You can see that I begin by pronouncing a javascript piece, and instantly utilize the [literal] and [/literal] labels so that smarty won’t believe that the javascript is really something it ought to attempt to parse. This is standard strategy for any javascript stuff in CMS pages.

At that point the ajax_load capacity acknowledges a url, and a destination component id. it then simply includes the showtemplate=false parameter I specified above, cleans up the url (changes all &ammp; to &) and afterward calls jquery to do the rest. That is the snort work.

Presently the connection… here is the magic…. the default news rundown layout utilizes {$entry->titlelink} yet by doing a tad bit of smarty debugging…. including {dump item=’entry’} into my news rundown layout, I had the capacity establish that there is a variable called moreurl that is simply a url, and not a prebuilt join tag….. accordingly I could utilize this url and fabricate my own connection.

I first constructed the connection in the standard way: <a href=”{$entry->moreurl}”>{$entry->title}</a> and that worked fine. everything I needed was to include the javasript stuff…. so I utilized the html onclick characteristic for that. furthermore, called my ajax burden capacity with the same url, and the id of the div that I needed to use as my destination. Being mindful so as to watch out for citing, I got the url you see beneath.

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

Furthermore, that was it…. basic eh… its really taken me longer to compose this web journal section than it did to actualize the code.

You can now utilize this same system to do things like utilization ajax for the pagination joins, or whatever your psyche can think of…. furthermore, you’re not simply adhered to the News module… As I’ve illustrated, ajax can be utilized all through CMS Made Simple…and its truly inconsequential when utilizing jquery.