Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
75 commits
Select commit Hold shift + click to select a range
a8584bb
Improve documentation of recordpicker useRelation: false
LukeTowers Dec 19, 2021
aecd0d0
Add information to file based plugin configuration. (#39)
hirisov Dec 20, 2021
b925b75
Replace bold with code (#40)
WebVPF Dec 27, 2021
857ff19
Include note on extending Lists widget query with limit
LukeTowers Dec 29, 2021
e531648
Usability Improvements (#41)
WebVPF Jan 2, 2022
ffd0eef
Improve directory diagrams (#42)
WebVPF Jan 3, 2022
33eb961
Improving usability (#43)
WebVPF Jan 4, 2022
d299a9a
Improving usability (#44)
WebVPF Jan 5, 2022
72cc3f9
Initial documentation of framework rewrite
bennothommo Jan 6, 2022
e59f4a7
Snowboard documentation
bennothommo Jan 10, 2022
8ca881a
Update snowboard-introduction.md
LukeTowers Jan 10, 2022
a9eb0ae
Update snowboard-introduction.md
LukeTowers Jan 10, 2022
c2e0563
Update snowboard-introduction.md
LukeTowers Jan 10, 2022
cd1b1c9
Update snowboard-introduction.md
LukeTowers Jan 10, 2022
22de01c
WIP
LukeTowers Jan 10, 2022
596794f
Finalise JS request docs, minor tweaks
bennothommo Jan 12, 2022
b0767e1
Add data attributes documentation
bennothommo Jan 12, 2022
63f132f
Correct filename to config/filesystems.php (#46)
mik-p Jan 13, 2022
8ffde6e
Refactor commands documentation
bennothommo Jan 13, 2022
f1dd581
Fix theme command link
bennothommo Jan 13, 2022
2cac4b7
Minor tweaks
bennothommo Jan 13, 2022
bb665ed
Console docs tweaks
LukeTowers Jan 13, 2022
f15bc7a
Merge branch 'main' into wip/framework-rewrite
bennothommo Jan 15, 2022
1e2bd73
WIP other pages
bennothommo Jan 16, 2022
a6355a2
Merge branch 'main' of github.com:wintercms/docs
bennothommo Jan 16, 2022
24a7389
Merge branch 'main' into wip/framework-rewrite
bennothommo Jan 16, 2022
f031e6d
Tweak extras content
bennothommo Jan 16, 2022
f16571e
Fix typo on menu (#47)
happytodev Jan 18, 2022
01c26ca
Add fetch options API
bennothommo Jan 19, 2022
382630c
Added documentation for the Snowboard utilities
LukeTowers Jan 19, 2022
3020a89
WIP
LukeTowers Jan 19, 2022
7c0160e
styling
LukeTowers Jan 19, 2022
4640093
Reorganizing
LukeTowers Jan 19, 2022
2b1a10a
Tweaks
LukeTowers Jan 19, 2022
7dc6be9
wip
LukeTowers Jan 19, 2022
5e8be7d
Added docs for ConfigFile
jaxwilko Jan 20, 2022
30195e9
Add a note about non-saving partials & hints
LukeTowers Jan 21, 2022
61152c2
Snowboard Request docs improvements
LukeTowers Jan 21, 2022
04f23ba
More WIP on Snowboard docs
LukeTowers Jan 21, 2022
7daf2b3
TOC fix
LukeTowers Jan 21, 2022
b257f34
Update backend-forms.md (#49)
WebVPF Jan 22, 2022
7acf07a
Specify that pivot should be defined with pivotModel
LukeTowers Jan 24, 2022
5839d20
Recommend providing default roles when registering permissions
LukeTowers Jan 26, 2022
4061c26
Document changes from https://github.com/wintercms/winter/commit/4fea…
LukeTowers Jan 26, 2022
928fdfe
Merge branch 'main' of github.com:wintercms/docs into main
LukeTowers Jan 26, 2022
751e955
Added docs for config arrays and consts
jaxwilko Jan 27, 2022
0894c8b
WIP Snowboard plugin development
bennothommo Jan 28, 2022
4477795
Clarify documentation on sets (#50)
multiwebinc Jan 28, 2022
aabff9f
Multiple values for `trigger` (#51)
multiwebinc Feb 4, 2022
f99a0ab
Improve documentation for available filters
LukeTowers Feb 7, 2022
22f76d7
Add Mix command documentation
bennothommo Feb 7, 2022
2a8c24b
Add Mix to docs nav
bennothommo Feb 7, 2022
628e8bc
Merge branch 'main' into wip/framework-rewrite
LukeTowers Feb 8, 2022
5dfe1d4
front-end -> frontend
LukeTowers Feb 8, 2022
08083d7
nowrap table column (#52)
WebVPF Feb 9, 2022
c11ac2f
Document automatic registration for mix packages
LukeTowers Feb 11, 2022
fbfa184
Correct dependency -> dependecies to reflect what the properties actu…
LukeTowers Feb 11, 2022
2c3c3b2
Document use of path symbols in winter.mix.js
LukeTowers Feb 12, 2022
a849b79
Small grammar tweaks
bennothommo Feb 13, 2022
2fb7c39
WIP plugin development docs
bennothommo Feb 15, 2022
ad42699
Update console-asset-compilation.md
LukeTowers Feb 15, 2022
adebee8
Add examples of cookie manipulation
bennothommo Feb 15, 2022
9726447
Merge branch 'wip/framework-rewrite' of github.com:wintercms/docs int…
bennothommo Feb 15, 2022
e471f64
Add semicolons
bennothommo Feb 15, 2022
c0dfb04
Update snowboard-utilities.md
LukeTowers Feb 15, 2022
06c5cfd
Update snowboard-plugin-development.md
LukeTowers Feb 15, 2022
ea7125c
Update snowboard-plugin-development.md
LukeTowers Feb 15, 2022
62a5b59
Merge pull request #45 from wintercms/wip/framework-rewrite
LukeTowers Feb 15, 2022
ca06431
Added snowboard header
LukeTowers Feb 15, 2022
45bb850
Add header image for snowboard docs
LukeTowers Feb 15, 2022
cdec3fc
Add information on configuring file upload storage locations
LukeTowers Feb 15, 2022
ef388a9
Add links to Laravel Mix commands
LukeTowers Feb 15, 2022
eca1e7f
Add components to sample plugin structures (#53)
WebVPF Feb 16, 2022
572d9db
Add partials to sample component structures (#54)
WebVPF Feb 16, 2022
401cda0
Merge branch 'main' into config-file
LukeTowers Feb 16, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 31 additions & 17 deletions ajax-attributes-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ Attribute | Description
`data-request-redirect` | specifies a URL to redirect the browser after the successful AJAX request.
`data-request-url` | specifies a URL to which the request is sent. default: `window.location.href`
`data-request-update` | specifies a list of partials and page elements (CSS selectors) to update. The format is as follows: `partial: selector, partial: selector`. Usage of quotes is required in some cases, for example: `'my-partial': '#myelement'`. If the selector string is prepended with the `@` symbol, the content received from the server will be appended to the element, instead of replacing the existing content. If the selector string is prepended with the `^` symbol, the content will be prepended instead.
`data-request-ajax-global` | false by default. Set true to enable jQuery [ajax events](http://api.jquery.com/category/ajax/global-ajax-event-handlers/) globally : `ajaxStart`, `ajaxStop`, `ajaxComplete`, `ajaxError`, `ajaxSuccess` and `ajaxSend`.
`data-request-ajax-global` | `false` by default. Set `true` to enable jQuery [ajax events](https://api.jquery.com/category/ajax/global-ajax-event-handlers/) globally : `ajaxStart`, `ajaxStop`, `ajaxComplete`, `ajaxError`, `ajaxSuccess` and `ajaxSend`.
`data-request-data` | specifies additional POST parameters to be sent to the server. The format is following: `var: value, var: value`. Use quotes if needed: `var: 'some string'`. The attribute can be used on the triggering element, for example on the button that also has the `data-request` attribute, on the closest element of the triggering element and on the parent form element. The framework merges values of the `data-request-data` attributes. If the attribute on different elements defines parameters with the same name, the framework uses the following priority: the triggering element `data-request-data`, the closer parent elements `data-request-data`, the form input data.
`data-request-before-update` | specifies JavaScript code to execute directly before the page contents are updated. Inside the JavaScript code you can access the following variables: `this` (the page element triggered the request), the `context` object, the `data` object received from the server, the `textStatus` text string, and the `jqXHR` object.
`data-request-success` | specifies JavaScript code to execute after the request is successfully completed. Inside the JavaScript code you can access the following variables: `this` (the page element triggered the request), the `context` object, the `data` object received from the server, the `textStatus` text string, and the `jqXHR` object.
Expand All @@ -46,38 +46,52 @@ Element | Event
<a name="data-attribute-examples"></a>
## Usage examples

Trigger the `onCalculate` handler when the form is submitted. Update the element with the identifier "result"` with the **calcresult** partial:
Trigger the `onCalculate` handler when the form is submitted. Update the element with the identifier "result" with the **calcresult** partial:

<form data-request="onCalculate" data-request-update="calcresult: '#result'">
```html
<form data-request="onCalculate" data-request-update="calcresult: '#result'">
```

Request a confirmation when the Delete button is clicked before the request is sent:

<form ... >
...
<button data-request="onDelete" data-request-confirm="Are you sure?">Delete</button>
```html
<form ... >
...
<button data-request="onDelete" data-request-confirm="Are you sure?">Delete</button>
```

Redirect to another page after the successful request:

<form data-request="onLogin" data-request-redirect="/admin">
```html
<form data-request="onLogin" data-request-redirect="/admin">
```

Show a popup window after the successful request:

<form data-request="onLogin" data-request-success="alert('Yay!')">
```html
<form data-request="onLogin" data-request-success="alert('Yay!')">
```

Send a POST parameter `mode` with a value `update`:

<form data-request="onUpdate" data-request-data="mode: 'update'">
```html
<form data-request="onUpdate" data-request-data="mode: 'update'">
```

Send a POST parameter `id` with value `7` across multiple elements:

<div data-request-data="id: 7">
<button data-request="onDelete">Delete</button>
<button data-request="onSave">Update</button>
</div>
```html
<div data-request-data="id: 7">
<button data-request="onDelete">Delete</button>
<button data-request="onSave">Update</button>
</div>
```

Including [file uploads](../services/request-input#files) with a request:

<form data-request="onSubmit" data-request-files>
<input type="file" name="photo" accept="image/*" />
<button type="submit">Submit</button>
</form>
```html
<form data-request="onSubmit" data-request-files>
<input type="file" name="photo" accept="image/*" />
<button type="submit">Submit</button>
</form>
```
182 changes: 103 additions & 79 deletions ajax-extras.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,21 +27,25 @@ When an AJAX request starts the `ajaxPromise` event is fired that displays the i

You may specify the `data-request-validate` attribute on a form to enable validation features.

<form
data-request="onSubmit"
data-request-validate>
<!-- ... -->
</form>
```html
<form
data-request="onSubmit"
data-request-validate>
<!-- ... -->
</form>
```

<a name="throw-validation-exception"></a>
### Throwing a validation error

In the server side AJAX handler you may throw a [validation exception](../services/error-log#validation-exception) using the `ValidationException` class to make a field invalid, where the first argument is an array. The array should use field names for the keys and the error messages for the values.

function onSubmit()
{
throw new ValidationException(['name' => 'You must give a name!']);
}
```php
function onSubmit()
{
throw new ValidationException(['name' => 'You must give a name!']);
}
```

> **NOTE**: You can also pass an instance of the [validation service](../services/validation) as the first argument of the exception.

Expand All @@ -50,76 +54,92 @@ In the server side AJAX handler you may throw a [validation exception](../servic

Inside the form, you may display the first error message by using the `data-validate-error` attribute on a container element. The content inside the container will be set to the error message and the element will be made visible.

<div data-validate-error></div>
```html
<div data-validate-error></div>
```

To display multiple error messages, include an element with the `data-message` attribute. In this example the paragraph tag will be duplicated and set with content for each message that exists.

<div class="alert alert-danger" data-validate-error>
<p data-message></p>
</div>
```html
<div class="alert alert-danger" data-validate-error>
<p data-message></p>
</div>
```

To add custom classes on AJAX invalidation, hook into the `ajaxInvalidField` and `ajaxPromise` JS events.

$(window).on('ajaxInvalidField', function(event, fieldElement, fieldName, errorMsg, isFirst) {
$(fieldElement).closest('.form-group').addClass('has-error');
});
```js
$(window).on('ajaxInvalidField', function(event, fieldElement, fieldName, errorMsg, isFirst) {
$(fieldElement).closest('.form-group').addClass('has-error');
});

$(document).on('ajaxPromise', '[data-request]', function() {
$(this).closest('form').find('.form-group.has-error').removeClass('has-error');
});
$(document).on('ajaxPromise', '[data-request]', function() {
$(this).closest('form').find('.form-group.has-error').removeClass('has-error');
});
```

<a name="field-errors"></a>
### Displaying errors with fields

Alternatively, you can show validation messages for individual fields by defining an element that uses the `data-validate-for` attribute, passing the field name as the value.

<!-- Input field -->
<input name="phone" />
```html
<!-- Input field -->
<input name="phone" />

<!-- Validation message for the field -->
<div data-validate-for="phone"></div>
<!-- Validation message for the field -->
<div data-validate-for="phone"></div>
```

If the element is left empty, it will be populated with the validation text from the server. Otherwise you can specify any text you like and it will be displayed instead.

<div data-validate-for="phone">
Oops.. phone number is invalid!
</div>
```html
<div data-validate-for="phone">
Oops.. phone number is invalid!
</div>
```

<a name="loader-button"></a>
## Loading button

When any element contains the `data-attach-loading` attribute, the CSS class `wn-loading` will be added to it during the AJAX request. This class will spawn a *loading spinner* on button and anchor elements using the `:after` CSS selector.

<form data-request="onSubmit">
<button data-attach-loading>
Submit
</button>
</form>

<a
href="#"
data-request="onDoSomething"
data-attach-loading>
Do something
</a>
```html
<form data-request="onSubmit">
<button data-attach-loading>
Submit
</button>
</form>

<a
href="#"
data-request="onDoSomething"
data-attach-loading>
Do something
</a>
```

<a name="ajax-flash"></a>
## Flash messages

Specify the `data-request-flash` attribute on a form to enable the use of flash messages on successful AJAX requests.

<form
data-request="onSuccess"
data-request-flash>
<!-- ... -->
</form>
```html
<form
data-request="onSuccess"
data-request-flash>
<!-- ... -->
</form>
```

Combined with use of the `Flash` facade in the event handler, a flash message will appear after the request finishes.

function onSuccess()
{
Flash::success('You did it!');
}
```php
function onSuccess()
{
Flash::success('You did it!');
}
```

To remain consistent with AJAX based flash messages, you can render a [standard flash message](../markup/tag-flash) when the page loads by placing this code in your page or layout.

Expand All @@ -139,47 +159,51 @@ To remain consistent with AJAX based flash messages, you can render a [standard

Below is a complete example of form validation. It calls the `onDoSomething` event handler that triggers a loading submit button, performs validation on the form fields, then displays a successful flash message.

<form
data-request="onDoSomething"
data-request-validate
data-request-flash>
```html
<form
data-request="onDoSomething"
data-request-validate
data-request-flash>

<div>
<input name="name" />
<span data-validate-for="name"></span>
</div>
<div>
<input name="name" />
<span data-validate-for="name"></span>
</div>

<div>
<input name="email" />
<span data-validate-for="email"></span>
</div>
<div>
<input name="email" />
<span data-validate-for="email"></span>
</div>

<button data-attach-loading>
Submit
</button>
<button data-attach-loading>
Submit
</button>

<div class="alert alert-danger" data-validate-error>
<p data-message></p>
</div>
<div class="alert alert-danger" data-validate-error>
<p data-message></p>
</div>

</form>
</form>
```

The AJAX event handler looks at the POST data sent by the client and applies some rules to the validator. If the validation fails, a `ValidationException` is thrown, otherwise a `Flash::success` message is returned.

function onDoSomething()
{
$data = post();
```php
function onDoSomething()
{
$data = post();

$rules = [
'name' => 'required',
'email' => 'required|email',
];
$rules = [
'name' => 'required',
'email' => 'required|email',
];

$validation = Validator::make($data, $rules);
$validation = Validator::make($data, $rules);

if ($validation->fails()) {
throw new ValidationException($validation);
}

Flash::success('Jobs done!');
if ($validation->fails()) {
throw new ValidationException($validation);
}

Flash::success('Jobs done!');
}
```
Loading