Jump to content



Recommended Posts

Module: http://modules.processwire.com/modules/ajax-intercooler-js/
Repo: https://bitbucket.org/pwFoo/ajaxintercoolerjs


AjaxIntercoolerJS module features

  • integrates IntercoolerJS
  • async CCS ("loadCSS") and JavaScript load / update
    • optional disable async css / js handling for blocks, sidebar, ...
  • Intercooler X-IC response header support
  • support / hook $session->redirect 
  • multiple X-IC-Trigger handling
  • multiple X-IC-Script handling




It's a autoload module, but you need to enable it inside of your templates, because scripts and dependencies ("JqueryCore") have to be loaded too.

You can enable / load it global inside of the TemplateFileHelper controller "_layout.php"



Some changes are needed to your main template "_layout.tpl".

<!-- IntercoolerJS needs a target with ID "pageContent" for (async) page content -->
<div id="pageContent"><?=$pageContent?></div>

And your navigation links need some IntercoolerJS attributes like that.

<a href="..." ic-get-from='/url-to-load' ic-target='#sidebar'>...</a>

Your just use and hook MarkupSimpleNavigation.

$nav = $modules->get('MarkupSimpleNavigation');
$opts = array(
    'show_root' => true,
    'item_tpl' => "<a href='{url}' ic-get-from='{url}' ic-target='#pageContent' ic-push-url=true>{title}</a>",
    'item_current_tpl' => "<a href='{url}' ic-get-from='{url}' ic-target='#pageContent' ic-push-url=true>{title}</a>",

// optional modify a specific link to use another target. For example "#sidebar"
$nav->addHookAfter('getTagsString', null, function($event) {
    $link = $event->arguments[1];
    if ($link->title == 'sidebar') {
        $event->return = "<a href='{$link->url}' ic-get-from='{$link->url}' ic-target='#sidebar'>{$link->title} (sidebar)</a>";

// render and set as _layout.tpl template var
$layout->set('navigation', $nav->render($opts));

Disable CSS refresh (remove "current" styles and load the new one)

The current loaded page css shouldn't removed if the sidebar is updated. So it's possible to disable the asyncHandler inside of the "sidebar" template.



Quick and dirty FrontendUser integration

You just need a PW template file like that.

$fu = $modules->get('FrontendUser');


$button = $fu->form->fhSubmitBtn;
$button->attr('ic-post-to', $page->url);
$button->attr('ic-target', '#pageContent');

if (!empty($_GET['logout'])) {

// Workaround until IntercoolerJS 1.0.1 release
if ($input->post['ic-trigger-name']) {
    $input->post[$fu->form->fhSubmitBtn->name] = $input->post['ic-trigger-name'];

$processed = $fu->process($page->url);

if ($processed && !$user->isGuest()) {  // $processed == false if login failed (not submitted / login successful == true)
    echo "Hello $user->name!";
    echo "<a href='$page->url?logout=1'>Logout</a>";
} else {
    echo $fu->render();


X-IC Response Headers

     * Set x-ic-trigger response header
     * @param array $array One or more events with related data arrays
    public function trigger($array) {
        $json = json_encode($array);
        header('x-ic-trigger: ' . $json);

     * Set x-ic-script response header
     * @param string $js Valid javaScript code
    public function script($js) {
        header('X-IC-Script: ' . $js);

     * Stop current / parent element Intercooler polling
    public function cancelPolling() {
        header ('x-ic-cancelPolling: true');

     * Resume current / parent element Intercooler polling
    public function resumePolling() {
        header ('x-ic-resumePolling: true');

     * Set current / parent element Intercooler polling interval
     * @param string $interval
    public function setPollInterval($interval) {
        header ('x-ic-setPollInterval: ' . $interval);

     * Set x-ic-refresh response header
     * @param string $pathCsv Comma separated paths to refresh.
    public function refresh($pathCsv) {
        header('x-ic-refresh: ' . $pathCsv);

     * Set x-ic-open response header
     * @param string $url New window / tab address
    public function open($url) {
        header('x-ic-open: ' . $url);

     * Set x-ic-redirect response header
     * @param string $url Redirect destination address
    public function redirect($url) {
        header('x-ic-redirect: ' .$url);

Wrapper for X-IC-Trigger

Add a event trigger with event name ($event) and parameters array ($array). "addTrigger()" method is a wrapper for usage with multiple event triggers. Native method for a single execution is method "trigger()"

$ic->addTrigger($event, $array);


Wrapper for X-IC-Script

String of javascript code for client side execution. "addScript()" method is a wrapper for multiple usage of "script()" method.



$session->redirect is hooked!

The module hooks $session->redirect() method for ajax calls. It's needed to execute redirects by IntercoolerJS X-IC-Redirect for ajax calls. Used for the FrontendUser integration.

Edited by pwFoo
  • Like 9
Link to comment
Share on other sites

  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...