The CMSMS AJAX Challenge Topic is solved

[kendo451]

Here is a CMSMS Challenge to the wizards of CMSMS.

Proof of Concept

Build a CMSMS site that uses AJAX to load the content of the target page (link in the menu), if the target page has the same template as the page from which it is linked.

The site has to function normally (with page load) if Javascript is turned off.

[JeremyBASS]

if your useing a framework *cough* jquery* this is a 15 min add on over install... I do this alot now.... are you needing to know how..? is that why the post?

cheers
jeremyBass

[kendo451]

I use jQuery. 

The problem is a little more complex though.

To set up the AJAX link you have to check and see if the target page uses the same template, and if it does, replace the {content} block(s) with the content from the target page via AJAX.  If not then use a regular link.

I was curious how easily this could be done so that the pages are still accessible the usual way if Javascript is off, but by jQuery AJAX if Javascript is there.

So yes. If it is very simple, please tell me how you have done this, or point at some examples CMSMS sites that have already done this?

Thanks.

[JeremyBASS]

The simple way to do it is two steps... 1.) plan ahead... 2.) use the selectors to pull just that part...

like this

$("#links").load("/Main_Page #jq-p-Getting-Started li");

so that way you only grab the pieces you need.... now if your grabbing mod parts then it's a little different... just remember KISS... it's too easy to try to over complicate it....

As far as set up... wall there is way to much fine detail to go over here and there are no one size fits all... but here is a few tips... destroy the links with js, it's quicker to run; plan what and where you want the ajax; watch your net loads; be flexible with your ideas....


Hope that helps

Cheers
jeremyBass

[kendo451]

Thanks.

Is there an existing module that allows you to pull just the content block for a page, without the template being processed?

I'll be taking a stab at building my first module this month.

Ken

[nhaack]

Hi Ken,

I wrote a plug-in named content_dump. You can find a comprehensive documentation here: http://wiki.cmsmadesimple.org/index.php ... ntent_dump

You can also use it to query single content blocks of specific pages. It provides the data in smarty so you can easily build whatever you want around it.

However, it can not return the template ID at the moment, so I'm not sure how to quickly solve this, but it might be feasible in conjunction with a little UDT that check's the template-id.

I also used it in conjunction with AJAX, but I didn't use a framework. As JB said, I kept it KISS. I had an empty template that allowed to recieve parameters and pass them to content dump. Then you have a little content provider page that you can call with AJAX to load content-block-content into you AJAXed "mother-page".

Let me know if you need some assistance with the plug-in.

Best
Nils

[tomgsd]

Is there an existing module that allows you to pull just the content block for a page, without the template being processed?

You can also just add showtemplate=false to the url, eg, example.com/index.php?page=about&showtemplate=false

[JeremyBASS]

I will strongly suggest that you do indeed use your jquery for this... but as nhaack said a blank template is great for parts, and the same with the showtemplate=false as tomgsd brought up... remember plan it out as you may not need to go so strong in areas...

Here is a blog example I pulled for you... (I'd show the site but I'm in a non-disclosure for it)

var goTO = $(".BLink").attr("href");
$(".BLink").load(""+ goTO +"" div.mainContent div.mainContent");



and the link is a {module_action_link module='' action='' urlonly=1} type link... so you wouldn't need a _blank template or even a page...

Hope this helps
jeremyBass

[JeremyBASS]

Here I thought I'd give a better working example... one you could go to...


http://www.digitalbarn.tv/work.html

and the script...

Code: Select all

var weblinK = '';
$(".webLinks").hover(
      function () {
	weblinK = $(this).attr('href');
	   $(this).attr({"href":"#web_Box"});
      }, 
      function () {
        $(this).attr({"href":""+weblinK+""});

      }
    );
$('a.webLinks').fancybox({
 'hideOnContentClick': false,
 'frameHeight' : 159,
 'callbackOnShow': function() {$("#fancy_div").load(""+ weblinK +"");}
 }); 

and that was pulled with a self-link tag... hope that gives some ideas there...

Cheers
jeremyBass


Note... I almost always only work in classes.... so it's simple to work with in the templates... no smarty counts or incrementing needed...KISS yes just a static class

[kendo451]

I totally appreciate it, Jeremy.  I've used jQuery a lot but never tried doing AJAX before.  I'm going to see what I can do and then revisit this thread with an example.

Thanks!

[kendo451]

I have thought of a way to do it that doesn't require duplicate pages, and doesn't require sending the whole page.  I'd like to enjoy the speed of AJAX, so sending the whole page and selecting the content area seems clunky.

1. Use a jQuery statement to attach the AJAX click handler to all the links.

2. Add a parameter to the link URL ?&aj=1

3. In the CMSMS page template, put the following IF statement
{if isset($params['aj'])}
{content}
{else}
{* regular page template with content *}
{/if}

Problem:

I haven't figured out how to access Get parameters in SMARTY.  I just put $params['aj'] up there but I don't think this works.  Is there a simple way to do it, or do I need to write a UDT?

Ken

[JeremyBASS]

that is a good way to work it... it's

Code: Select all

{if isset($smarty.get.aj)}
{content}
{else}
{* regular page template with content *}
{/if}

here is all the options for your ajax needs

Code: Select all

{* display value of page from URL ($_GET) http://www.example.com/index.php?page=foo *}
{$smarty.get.page}

{* display the variable "page" from a form ($_POST['page']) *}
{$smarty.post.page}

{* display the value of the cookie "username" ($_COOKIE['username']) *}
{$smarty.cookies.username}

{* display the server variable "SERVER_NAME" ($_SERVER['SERVER_NAME'])*}
{$smarty.server.SERVER_NAME}

{* display the system environment variable "PATH" *}
{$smarty.env.PATH}

{* display the php session variable "id" ($_SESSION['id']) *}
{$smarty.session.id}

{* display the variable "username" from merged get/post/cookies/server/env *}
{$smarty.request.username}

[calguy1000]

you don't need special templates for this...
all you need to do is add showtemplate=false to the url. for the ajax request.

but... you're gonna have problems with things like the 'active' page class on the menu, etc... so you'll also have to take care of that using jquery/javascript. and if your template has multiple content blocks... then you're gonna have problems.

However, here's a trivial example of how to do it.

Code: Select all

{literal}
<__script__ type='text/javascript'>
function ajax_load_content(url)
{
    url = url + '&showtemplate=false';
    url = url.replace(/amp;/g,'');
    jQuery('#content').load(url);
}
</__script>
{/literal}

and here's a sample link.

Code: Select all

<a href="http://www.examplesite.com/index.php?page=blah" onclick="ajax_load_content('http://www.examplesite.com/index.php?page=blah'); return false;">Link to another page</a>

[kendo451]

This was a very informative thread.

I built a simple AJAX driven site using the techniques suggested by Calguy and Jeremy.  You can see it here:

http://dataensureinc.com

[JeremyBASS]

Nice... few flaws I thought I'd point out...

if you click contact it goes to

http://www.dataensureinc.com/remote-dat ... p/contact/

Without the ajax loading, but from there if you click websites going to

http://www.dataensureinc.com/remote-dat ... /websites/
that is doesn't always show the content... thou getting this state may be intermittent, once is all page don't show up..

I'd suggest to look to Hotmail, see how they hold and move thro, and you'll gain some pointers on it... different lib but same idea... Cheers
Jeremy