|
2 | 2 |
|
3 | 3 | Flexible utility script for AJAX. Supports snippets, redirects etc.
|
4 | 4 |
|
5 |
| -## License |
| 5 | +#### License |
6 | 6 |
|
7 | 7 | MIT
|
8 | 8 |
|
9 |
| -## Dependencies |
| 9 | +#### Dependencies |
10 | 10 |
|
11 |
| -- jQuery 1.7 |
| 11 | +jQuery 1.7 |
12 | 12 |
|
13 | 13 | ## Installation
|
14 | 14 |
|
15 | 15 | 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: |
19 | 19 |
|
20 |
| -## Usage |
| 20 | +```js |
| 21 | +$(function () { |
| 22 | + $.nette.init(); |
| 23 | +}); |
| 24 | +``` |
21 | 25 |
|
22 |
| -It works as a jQuery plugin. As well known `jquery.nette.js`, it installs itself into `$.nette`. But similarities end here. |
| 26 | +## Usage |
23 | 27 |
|
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): |
25 | 54 |
|
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 | +``` |
28 | 58 |
|
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.: |
30 | 60 |
|
31 | 61 | ```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); |
34 | 64 | });
|
35 | 65 | ```
|
36 | 66 |
|
37 |
| -That way or another, you're ready to go. |
38 |
| - |
39 | 67 | ## Extensions
|
40 | 68 |
|
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: |
42 | 70 |
|
43 | 71 | ```js
|
44 | 72 | $.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 | +}); |
48 | 79 | ```
|
49 | 80 |
|
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: |
69 | 129 |
|
70 | 130 | ```js
|
71 |
| -success: function (payload, nette) { |
72 |
| - nette.load(); |
73 |
| -} |
| 131 | +$.nette.ext('name', null); |
74 | 132 | ```
|
75 | 133 |
|
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: |
77 | 135 |
|
78 | 136 | ```js
|
79 |
| -// context of extension |
80 |
| -$.nette.ext('unique'); |
| 137 | +var context = $.nette.ext('name'); |
81 | 138 | ```
|
82 | 139 |
|
83 | 140 | ## Default extensions
|
84 | 141 |
|
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