venne / nette-ajax
Flexible utility script for AJAX. Supports snippets, redirects etc.
Installs: 1 588
Dependents: 1
Suggesters: 0
Security: 0
Stars: 0
Watchers: 3
Forks: 85
Language:JavaScript
Suggests
This package is auto-updated.
Last update: 2024-10-29 03:48:18 UTC
README
Flexible utility script for AJAX. Supports snippets, redirects etc.
License
MIT
Dependencies
jQuery 1.7
Installation
- Get the source code from Github.
- Copy
nette.ajax.js
to your directory with Javascript files. - Link the file in your templates (usually in
app/@layout.latte
, after jQuery!). - Put somewhere the initialization routine:
$(function () { $.nette.init(); });
Usage
By defaults all links and forms with CSS class ajax
will be instantly ajaxified. Behavior can be altered in configuration of init
extension. Object returned by call var init = $.nette.ext('init');
has these props:
Ajaxification is bound to click
(submit
) event in nette
namespace. Ajaxification of specific link can be canceled with code like this (while other callbacks will remain):
$('a.no-ajax').off('click.nette');
Or even simpler:
$('a.no-ajax').netteAjaxOff();
Extensions
Ajaxification envelopes standard $.ajax()
call and extends it with several events, that can be hooked with custom callbacks. Set of associated callbacks is called extension. Snippets processing, ability to cancel running request by Escape... all this functionality is implemented in form of extensions. Registration of extension looks like this:
$.nette.ext('name', { event1: function () { }, event2: ... }, { // ... shared context (this) of all callbacks });
First argument is name. It's optional.
Second argument should be hash of callbacks with keys corresponding to names of events. These events are available:
Extension can be disabled:
$.nette.ext('name', null);
Extension can be configured. Its context can be acquired by:
var context = $.nette.ext('name');
Default extensions
Useful tricks
All these special features expect all default extensions to be on.
data-ajax-off
Link or any other ajaxified element can have custom data attribute data-ajax-off
. It contains names of extensions, that should be deactivated for Ajax request fired on element.
<a n:href="do!" class="ajax" data-ajax-off="snippets">
You can also use it in $.nette.ajax()
. Like this:
$.nette.ajax({ url: ..., off: ['snippets'] });
data-ajax-pass
(in validation
extension)
Ajaxification of element ensures, that e.preventDefault()
will be called. This attribute can prevent it, if you need more callbacks to be fired.
data-ajax-append
(in snippets
extension)
New content of snippet with this attribute won't replace the old content, but it will rather be appended to it.
data-ajax-validate
(in validation
extension)
Click on link or submittion of form is validated on various conditions. You can switch any of them:
<a n:href="do!" class="ajax" data-ajax-validate='{"keys":false}'>
And as in case of data-ajax-off
, you can pass it right into $.nette.ajax()
.
$.nette.ajax({ url: ..., validate: { keys: false } });
This means that clicking link with Ctrl will not open new tab, but will ajaxify request.
Dependency on other extension
In event callbacks, you can call this.ext()
to get context of other extension. If you add true
as second argument, script will fail if that extension won't be available.
$.nette.ext({ success: function (payload) { var snippets = this.ext('snippets', true); ... } });