Skip to content

Commit a7cb191

Browse files
committed
Updated readme
1 parent 8a09f00 commit a7cb191

File tree

6 files changed

+184
-102
lines changed

6 files changed

+184
-102
lines changed
File renamed without changes.
File renamed without changes.

src/OnResponseHandler.php renamed to history/OnResponseHandler.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
/**
1313
* Automatically adds 'redirect' to payload when forward happens
1414
* to simplify userland code in presenters
15+
* Also bypasses 'redirect()' calls with 'forward()' calls
1516
*
1617
* @author Vojtěch Dobeš
1718
*/
File renamed without changes.

history/readme.md

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# History Extesnion
2+
3+
Utilizes History API implemented in HTML 5.
4+
5+
## Installation
6+
7+
1. Link `history/history.ajax.js` after `nette.ajax.js`.
8+
2. Register config extension in `app/bootstrap.php`:
9+
10+
```php
11+
$configurator->onCompile[] = function ($configurator, $compiler) {
12+
$compiler->addExtension('ajax', new VojtechDobes\NetteAjax\Extension);
13+
};
14+
```
15+
16+
## Usage
17+
18+
Write your application as normal. All redirects and forwards will be properly handled.
19+
20+
To correctly update UI, use snippets. If you plan to ajaxify whole application, consider adding this snippet to your `beforeRender()` method in `BasePresenter`.
21+
22+
```php
23+
if ($this->isAjax()) {
24+
$this->invalidateControl('title');
25+
$this->invalidateControl('content');
26+
}
27+
```
28+
29+
And `app/@layout.latte` might be upgraded accordingly:
30+
31+
```html
32+
<title n:inner-snippet="title">...
33+
```
34+
35+
```html
36+
{snippet content}
37+
{include content}
38+
{/snippet}
39+
```
40+
41+
## UI Caching
42+
43+
Extension will automatically cache your UI and restore it on *Back* and *Forward* buttons without communication with server. If you wish to call server on every *Back* and *Forward*, turn caching off.
44+
45+
```js
46+
$.nette.ext('history').cache = false;
47+
```

readme.md

Lines changed: 136 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -2,140 +2,174 @@
22

33
Flexible utility script for AJAX. Supports snippets, redirects etc.
44

5-
## License
5+
#### License
66

77
MIT
88

9-
## Dependencies
9+
#### Dependencies
1010

11-
- jQuery 1.7
11+
jQuery 1.7
1212

1313
## Installation
1414

1515
1. Get the source code from Github.
16-
2. Move `nette.ajax.js` to your directory with Javascript files.
17-
3. Link the file in your templates.
18-
4. Put somewhere the initialization routine. See `example.js` for inspiration.
16+
2. Copy `nette.ajax.js` to your directory with Javascript files.
17+
3. Link the file in your templates (usually in `app/@layout.latte`, after jQuery!).
18+
4. Put somewhere the initialization routine:
1919

20-
## Usage
20+
```js
21+
$(function () {
22+
$.nette.init();
23+
});
24+
```
2125

22-
It works as a jQuery plugin. As well known `jquery.nette.js`, it installs itself into `$.nette`. But similarities end here.
26+
## Usage
2327

24-
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:
28+
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:
29+
30+
<table>
31+
<tr>
32+
<th>name</th>
33+
<th>default value</th>
34+
<th>description</th>
35+
</tr>
36+
<tr>
37+
<td><code>linkSelector</code></td>
38+
<td><code>a.ajax</code></td>
39+
<td>CSS selector for links</td>
40+
</tr>
41+
<tr>
42+
<td><code>formSelector</code></td>
43+
<td><code>form.ajax</code></td>
44+
<td>CSS selector for forms</td>
45+
</tr>
46+
<tr>
47+
<td><code>buttonSelector</code></td>
48+
<td><code>input.ajax[type="submit"], input.ajax[type="image"]</code></td>
49+
<td>CSS selector for form elements responsible for submit</td>
50+
</tr>
51+
</table>
52+
53+
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):
2554

26-
* Alter the selectors via setting `$.nette.ext('init').linkSelector` or `$.nette.ext('init').formSelector` to whatever you wish.
27-
* Or you may redefine ajaxifying routine completely.
55+
```js
56+
$('a.no-ajax').off('click.nette');
57+
```
2858

29-
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:
59+
If this implementation doesn't suffice you, it can be overriden with custom solution, e.g.:
3060

3161
```js
32-
$.nette.init(function (handler) {
33-
$('a.ajax').click(handler);
62+
$.nette.init(function (ajaxHandler) {
63+
$('a.ajax:not(.no-ajax)').live('click', ajaxHandler);
3464
});
3565
```
3666

37-
That way or another, you're ready to go.
38-
3967
## Extensions
4068

41-
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.
69+
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:
4270

4371
```js
4472
$.nette.ext('name', {
45-
nameOfEvent: function () { ... },
46-
...
47-
}, {foo: bar});
73+
event1: function () {
74+
},
75+
event2: ...
76+
}, {
77+
// ... shared context (this) of all callbacks
78+
});
4879
```
4980

50-
Context is shared in every event callbacks and accessible via `this`.
51-
52-
Extension may implement all 7 events or just one. Available events are these:
53-
54-
- `init` - called just once
55-
- `load (ajaxHandler)` - may be called more times (called at the end of `init()` method automatically)
56-
- `before (settings, ui, e)` - called before AJAX request is created
57-
- `start (jqXHR)` - called immediatelly after creation of request
58-
- `success (payload)` - called after successful request
59-
- `complete` - called after any request
60-
- `error` - called after failed request
61-
62-
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:
63-
64-
```js
65-
success: function () {
66-
$.nette.load();
67-
}
68-
```
81+
First argument is name. It's optional.
82+
83+
Second argument should be hash of callbacks with keys corresponding to names of events. These events are available:
84+
85+
<table>
86+
<tr>
87+
<th>name</th>
88+
<th>arguments</th>
89+
<th>description</th>
90+
</tr>
91+
<tr>
92+
<td><code>init</code></td>
93+
<td></td>
94+
<td>Called just once during <code>$.nette.init();</code> call.</td>
95+
</tr>
96+
<tr>
97+
<td><code>load</code></td>
98+
<td><code>requestHandler</code></td>
99+
<td>Should contain ajaxification. <code>requestHandler</code> can be bound to UI events to initiate AJAX request.</td>
100+
</tr>
101+
<tr>
102+
<td><code>before</code></td>
103+
<td><code>jqXHR</code>, <code>settings</code></td>
104+
<td>Called immediatelly before AJAX request execution. If FALSE is returned, request won't start.</td>
105+
</tr>
106+
<tr>
107+
<td><code>start</code></td>
108+
<td><code>jqXHR</code>, <code>settings</code></td>
109+
<td>Called immediatelly after start of AJAX request.</td>
110+
</tr>
111+
<tr>
112+
<td><code>success</code></td>
113+
<td><code>payload</code></td>
114+
<td>Called after successful completion of AJAX request. Equivalent to <code>$.ajax( ... ).done( ...</code>.</td>
115+
</tr>
116+
<tr>
117+
<td><code>complete</code></td>
118+
<td></td>
119+
<td>Called after every AJAX request completion. Equivalent to <code>$.ajax( ... ).always( ...</code>.</td>
120+
</tr>
121+
<tr>
122+
<td><code>error</code></td>
123+
<td><code>jqXHR</code>, <code>status</code>, <code>error</code></td>
124+
<td>Called in case of failure of AJAX request. Equivalent to <code>$.ajax( ... ).fail( ...</code>.</td>
125+
</tr>
126+
</table>
127+
128+
Extension can be disabled:
69129

70130
```js
71-
success: function (payload, nette) {
72-
nette.load();
73-
}
131+
$.nette.ext('name', null);
74132
```
75133

76-
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. Returned object is instance of context:
134+
Extension can be configured. Its context can be acquired by:
77135

78136
```js
79-
// context of extension
80-
$.nette.ext('unique');
137+
var context = $.nette.ext('name');
81138
```
82139

83140
## Default extensions
84141

85-
### Validation
86-
87-
Performs various checks of event causing the request:
88-
89-
- CTRL, ALT, SHIFT keys or middle mouse button will prevent ajaxification,
90-
- absolute URLs and hash links will prevent ajaxification,
91-
- also performs validation of submitted form.
92-
93-
Validation for element can be disabled by HTML 5 data attribute `data-ajax-validate="false"`. You may also switch various parts of validation in `ajax()` method by providing `validate` key in options. For example:
94-
95-
```js
96-
$('#link').click(function (e) {
97-
$.nette.ajax({
98-
validate: {
99-
keys: false // CTRL, ALT etc. will not prevent ajaxification
100-
}
101-
}, this, e);
102-
});
103-
```
104-
105-
### Forms
106-
107-
Collects data from form elements including image button coordinates.
108-
109-
### Snippets
110-
111-
Ensures update of all invalidated snippets in DOM. Update routine can be altered by replacing any of 3 following methods:
112-
113-
- `updateSnippet` calls other methods, handles IE issues with `<title>` snippet.
114-
- `getElement` implements default Nette implementation of snippets (name of snippet is its ID attribute).
115-
- `applySnippet` best place for adding some animations etc. Default implementation just calls `.html()`.
116-
117-
### Redirect
118-
119-
If payload contains `redirect` key, JS will perform change of location.
120-
121-
### History
122-
123-
Takes care of saving the state to browser history if possible.
124-
125-
### Unique
126-
127-
Ensures there is always just one request running. When one request begins, previous one will be aborted.
128-
129-
### Abort
130-
131-
User can abort running request by pressing ESC.
132-
133-
### Init
134-
135-
Special extension with default ajaxifying implementation. `init()` called with arguments will override it. Default implementation provides following parameters:
136-
137-
- `linkSelector` for ajaxifying links
138-
- `formSelector` for ajaxifying submitting of form and clicking on its submit buttons and image buttons
139-
- `buttonSelector` for ajaxifying specific buttons in non-ajax forms
140-
141-
All ajaxified elements should be marked by CSS class `ajax`.
142+
<table>
143+
<tr>
144+
<th>name</th>
145+
<th>description</th>
146+
</tr>
147+
<tr>
148+
<td><code>validation</code></td>
149+
<td>Limits the ajaxification to clicks/submits without <em>Ctrl</em>, <em>Alt</em> or <em>Shift</em> key, local links and valid form submits.</td>
150+
</tr>
151+
<tr>
152+
<td><code>forms</code></td>
153+
<td>Adds support for submitting forms with all data, name of clicked button and coordinates of click in <code>[type=image]</code> inputs.</td>
154+
</tr>
155+
<tr>
156+
<td><code>snippets</code></td>
157+
<td>Updates DOM by <code>snippets</code> array in response (default Nette handling of Latte snippets).</td>
158+
</tr>
159+
<tr>
160+
<td><code>redirect</code></td>
161+
<td>Executes redirect to different URL (when <code>$this->redirect()</code> is called in presener). Can be replaced by <code>history</code> extension.</td>
162+
</tr>
163+
<tr>
164+
<td><code>unique</code></td>
165+
<td>Keeps only request running at the same moment.</td>
166+
</tr>
167+
<tr>
168+
<td><code>abort</code></td>
169+
<td>Allows user to abort running request by pressing <em>Escape</em>.</td>
170+
</tr>
171+
<tr>
172+
<td><code>init</code></td>
173+
<td>Default ajaxification.</td>
174+
</tr>
175+
</table>

0 commit comments

Comments
 (0)