| [HomePage :: Templates :: Tipps für Templates :: Dieser Seite] |
Creating a fully templated response to an AJAX call |
Giving a response to an AJAX call is actually quite easy. The server receives a request, the server returns something. End.
Now, imagine you don't just want a response, you want to give a response that goes through all the ImpressCMS process, including the template engine. Permissions, Protector, Custom tags, Smarty, everything. A bit more difficult, but not too much.
The following example comes from a real job. As you know, our template system is able to automatically resize images when requested by a template. We had a page with a photo gallery full of thumbnails. When the user clicks on one image, the site should show a version of the image that is bigger than the thumbnail, but it's still a resized version, as the original ones were far too big for screen.
This practical example does the following: as response to an AJAX request, it returns a resized image, generated by our templating system. But it does not generate the whole page, with header, manus and such. This should not make sense. It only returns the image instead, and nothing else.
1 – The AJAX request processor
We need a script in our site that takes the request and gives a response. I simply called it “ajax.php” and saved in in the root of our site. This is the code:
Now, let's read it line-by-line.
This loads our site's basic configuration.
This starts the page rendering process.
This sets some variables up for our template.
This renders our page.
2 – the template
Now, as you can read in the code, we're calling a template saved in our theme folder, named “resized_image_ajax.html”. This is the content of this template. (Take it without space!)
Now, imagine you don't just want a response, you want to give a response that goes through all the ImpressCMS process, including the template engine. Permissions, Protector, Custom tags, Smarty, everything. A bit more difficult, but not too much.
The following example comes from a real job. As you know, our template system is able to automatically resize images when requested by a template. We had a page with a photo gallery full of thumbnails. When the user clicks on one image, the site should show a version of the image that is bigger than the thumbnail, but it's still a resized version, as the original ones were far too big for screen.
This practical example does the following: as response to an AJAX request, it returns a resized image, generated by our templating system. But it does not generate the whole page, with header, manus and such. This should not make sense. It only returns the image instead, and nothing else.
1 – The AJAX request processor
We need a script in our site that takes the request and gives a response. I simply called it “ajax.php” and saved in in the root of our site. This is the code:
require_once("mainfile.php");
require_once(ICMS_ROOT_PATH."/header.php");
$icmsTpl->assign('file', $_GET['file']);
$icmsTpl->assign('width', $_GET['width']);
$icmsTpl->assign('height', $_GET['height']);
$icmsTpl->assign('fit', $_GET['fit']);
$icmsTplpsTpl->assign('return', 'url');
$xoTheme->render('themes/'.$icmsConfig['theme_set'] .'/resized_image_ajax.html');
require_once (ICMS_ROOT_PATH.'/footer.php');
require_once(ICMS_ROOT_PATH."/header.php");
$icmsTpl->assign('file', $_GET['file']);
$icmsTpl->assign('width', $_GET['width']);
$icmsTpl->assign('height', $_GET['height']);
$icmsTpl->assign('fit', $_GET['fit']);
$icmsTplpsTpl->assign('return', 'url');
$xoTheme->render('themes/'.$icmsConfig['theme_set'] .'/resized_image_ajax.html');
require_once (ICMS_ROOT_PATH.'/footer.php');
Now, let's read it line-by-line.
require_once("mainfile.php");
This loads our site's basic configuration.
require_once(ICMS_ROOT_PATH."/header.php");
This starts the page rendering process.
$icmsTpl->assign('file', $_GET['file']);
$icmsTpl->assign('width', $_GET['width']);
$icmsTpl->assign('height', $_GET['height']);
$icmsTpl->assign('fit', $_GET['fit']);
$icmsTpl->assign('return', 'url');
$icmsTpl->assign('width', $_GET['width']);
$icmsTpl->assign('height', $_GET['height']);
$icmsTpl->assign('fit', $_GET['fit']);
$icmsTpl->assign('return', 'url');
This sets some variables up for our template.
$xoTheme->render('themes/'.$icmsConfig['theme_set']
.'/resized_image_ajax.html');
.'/resized_image_ajax.html');
This renders our page.
2 – the template
Now, as you can read in the code, we're calling a template saved in our theme folder, named “resized_image_ajax.html”. This is the content of this template. (Take it without space!)
<{resized_image file="$file" height=$height width=$width fit="$fit" return="$return"}>
And that's it. This line of code calls an ImpressCMS exclusive Smarty plugin that returns a resized copy of the image.
Thank you very much Ignacio Segura.
Quelle: http://www.isegura.es/blog/impresscms-creating-fully-templated-response-ajax-call-practical-examp
