Flexible utility script for AJAX. Supports snippets, redirects etc.
MIT
- jQuery 1.7
- Get the source code from Github.
- Move
nette.ajax.js
to your directory with Javascript files. - Link the file in your templates.
- Put somewhere the initialization routine. See
example.js
for inspiration.
It works as a jQuery plugin. As well known jquery.nette.js
, it installs itself into $.nette
. But similarities end here.
You have to explicitly initialize plugin via method init
. Plugin has predefined hooks for links and forms with ajax
CSS class. It may be enough for you. If you want to change the behavior, you may:
- Alter the selectors via setting
$.nette.ext('init').context.linkSelector
or$.nette.ext('init').context.formSelector
to whatever you wish. - Or you may redefine ajaxifying routine completely.
Method init()
accepts hash of event callbacks (if you provide just function instead, it will be considered callback for load
event). load
event callback is the right place, where you should ajaxify all elements you want. Callback will be called with with handler
function as first argument:
$.nette.init(function (handler) {
$('a.ajax').click(handler);
});
That way or another, you're ready to go.
Almost every functionality is implemented via set of 7 available events under the hood. You may hook them via concept of extensions. Every extension consists of 3 elements: name, set of event callbacks and some default context for storing values etc.
$.nette.ext('name', {
nameOfEvent: function () { ... },
...
}, {foo: bar});
Context is shared in every event callbacks and accessible via this
.
Extension may implement all 7 events or just one. Available events are these:
init
- called just onceload (ajaxHandler)
- may be called more times (called at the end ofinit()
method automatically)before (ui)
- called before AJAX request is createdstart (req)
- called immediatelly after creation of requestsuccess (payload)
- called after successful requestcomplete
- called after any requesterror
- called after failed request
Event callbacks receive arguments as shown in parentheses. All of them also get instance of plugin itself as last argument. That means both markups are equivalent:
success: function () {
$.nette.load();
}
success: function (payload, nette) {
nette.load();
}
Extension may be disabled by calling: $.nette.ext('name', null);
. You can also modify it directly - just grab the instance of extension by calling $.nette.ext('name');
without other arguments. Structure of extension:
// event callbacks are in 'on' namespace
$.nette.ext('snippets').on.complete
// context of extension
$.nette.ext('unique').context
Any manipulation with extensions is forbidden after the initialization. Please setup everything before init()
call.
Classic implementation from the original script.
Classic implementation from the original script also.
Takes care of saving the state to browser history if possible.
Ensures there is always just one request running.
User can abort running request by pressing Escape.
Special extension with default ajaxifying implementation. init()
called with arguments will override it.