Top | Download | Examples | Configuration

AjaxLinks.js | jQuery plugin by Sterno.ru

This plugin allows you to ajaxify your website.
By applying this plugin to your navigation links you can load content from other pages into the current page with one line of code!

AjaxLinks.js plays very nice with Sammy.js

Live example: navigation on RedHero.com website.

GitHub repository: sternoru / ajaxlinks

Examples

1. Simple example


$('#nav a').ajaxlinks({
	load_to: '#content',
	load_from: '#content'
});

Page 1 | Page 2 | Page 3 (AjaxLinks.js applied)

Page 1 | Page 2 | Page 3 (Same HTML, AjaxLinks.js NOT applied)

Content will be loaded here...

2. Advanced example (with Sammy.js and a callback)


$('#nav1 a').ajaxlinks({
	load_to: '#content1',
	load_from: '#content',
	loader: 'Custom loading...',
	use_sammy: true,
	callback: function(content, link, params, scripts) {
		$('#content1').css('opacity', '0').animate({'opacity': '1'}, 'slow');
		$(link).addClass('active').siblings().removeClass('active');
	}
});

Page 1 | Page 2 | Page 3 (AjaxLinks.js applied)

Content will be loaded here...

Configuration

All the parameters are optional.

1. load_to

Selector of an element where AJAX content should be loaded into.

Default: '#content'

2. load_from

Selector of an element in a targer page where AJAX content should be taken from.
If not provided will load the whole page.

Default: null

3. loader

HTML or text of the loader to show while content is loading.

Default: 'Loading...'

4. callback

Callback function to call after content is loaded.

Default: null

Function agruments:

content - Content loaded from a target page
link - Original link element clicked (after ajaxlinks were applied)
params - Hash parameters after #! root separated by | if Sammy.js is used.
scripts - The inline scripts that where found on the loaded page (if any) that you can execute

5. use_sammy

Indicates if Sammy.js should be used to handle hash part of the URL.
Sammy.js javascript library has to be included in the page then.

Default: false

6. prefix

Prefix for all the links before the hash root if Sammy.js is used.

Default: ''

7. smooth_height

Removes a container's height glitch while loading. Set it to false if your container is fixed height.

Default: true

8. goto_top

Set it to true to scroll to the top of the page when an ajaxlinked link is clicked.

Default: false

9. fix_forms

Rewrites the forms "action" url that are included in the ajaxlinks response so they can be ajaxified as well. Set it to false if you already deal with the forms by ajax.

Default: true

10. add_scripts

Ajax loads the javascript files included on the loaded page with the <script> tag if it needs specific scripts to be loaded. You can add a function name in a "data-callback" attribute for any file that needs a callback after being loaded. The files are loaded in the same order as they are in the loaded page.

Default: false

11. ajaxify_content

Set it to true to reapply ajaxlinks on any <a> tag loaded, except the ones that are in a container that has the "no-al" class, or have the class themselves.

Default: false

12. base_url

Defines a base url for all the links that will be before the prefix (6) parameter to prevent long and weird urls if Sammy.js is used.

Default: ''

13. ignore

Array of strings that defines classes and/or ids to ignore. Links with these or inside a container with these won't have ajaxlinks applied on it. If you only have one class or id to ignore you can set it as a string.

Default: '.no-al'

Example: ignore: '.no-al' or ignore: ['.no-al', '#test']

14. ignore_paths

Array of strings that defines paths to ignore. Links with these paths won't have ajaxlinks applied on it. If you only have one path to ignore you can set it as a string. You can also use the '*' character in order to use wildcards.

Default: ''

Example: ignore_paths: '*demo/' or ignore_paths: ['/demo/', '*demo/', '*/demo/*', '/demo/*']