Ajax links API module help you to load any content to a specified DIV using JQuery Ajax. This module will also load JS for Ajax-loaded content by using Drupal.attachBehaviors(). In case you dont want to load js or css, you can alter tpl for path/node type, for example html--node--add--ajax.tpl.php or html--article--ajax.tpl.php.

Links will work as normal if Javacript is disabled so no effect on web crawlers used by search engines.In HTML5 browsers, title bar and url will change using the web History API via the history.pushState() method. Also, it will update active class on links.

How to use Ajax links API :

METHOD 1 :
Example :
Goto module config > jQuery selector : For example, you can ajaxify all links under #content by specifying #content a.In case you want to exclude a link with class .menu, you can use !.menu a.Target DIV will be default target div defined. You can change the target DIV from module config page.

METHOD 2 : in your tpl , <?php l_ajax($title, $path, $target) ?>

* $title: Title.
* $path : Drupal path.
* $target (optional): ID/CLASS of DIV to be replaced. This will override Default CSS Selector defined in module config page.

Example :
<?php l_ajax("add page", "node/add/page", "#content") ?>

METHOD 3 : Add class="ajax-link" to any link. Target div will be default CSS selector defined . You can change default CSS Selector from module config page or override target by specifying rel="".

Example :
<a class="ajax-link" href="node/add/page" rel="#content">Add page</a>

Developer Notes

Override tpl :

  • Developer can add/remove any variables by copying html--ajax.tpl.php and page--ajax.tpl.php to their theme. All variables available to html.tpl.php or page.tpl.php can be used.
  • In case you want to override page--ajax.tpl.php, for eg: for path /node/add, you can create page--node--add--ajax.tpl.php. For node type article ,you can use page--article--ajax.tpl.php. Same applicable for html--node--add--ajax.tpl

Upgrade :
You can upgrade/degrade module anytime by simply overwriting whole folder.

Ajaxify admin paths :
Core Overlay module is not compatible with this module. If you want to ajaxify admin paths,

  • You need to disable overlay module,
  • Goto admin/appearance, set Administration theme to default.

DEMO

After enabling the module, goto YOUR_SITE/ajax-links-api/test