Skip to content

Refactor to reference Larajax #615

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
daftspunk merged 2 commits into from
Jan 24, 2026
Merged

Refactor to reference Larajax #615

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d93c9a6
Refactor to reference Larajax
daftspunk Jan 11, 2026
30610b8
Restore tables
daftspunk Jan 20, 2026
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
61 changes: 34 additions & 27 deletions 4.x/cms/ajax/attributes-api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,33 @@ subtitle: Interact with handlers using HTML attributes.

The data attributes API lets you issue AJAX requests without any JavaScript. In many cases the data attributes API is less verbose than the JavaScript API - you write less code to get the same result. The supported AJAX data attributes are:

data-request Attribute | Description
Attribute | Description
------------- | -------------
**data-request** | specifies the AJAX handler name.
**data-request-confirm** | specifies a confirmation message. A confirmation dialog is displayed before the request is sent. If the user clicks the Cancel button the request isn't sent.
**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'`. The selector string should start with a `#` or `.` character, except you may also prepend it with `@` to append contents to the element, `^` to prepend, `!` to replace with and `=` to use any CSS selector.
**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-query** | specifies additional GET parameters to be sent to the server and added to the current URL query string.
**data-request-before-update** | specifies JavaScript code to execute directly before the page contents are updated.
**data-request-success** | specifies JavaScript code to execute after the request is successfully completed. The `data` variable is available in this function containing the response data.
**data-request-error** | specifies JavaScript code to execute if the request encounters an error. The `data` variable is available in this function containing the response data.
**data-request-complete** | specifies JavaScript code to execute if the request is successfully completed or encounters an error. The `data` variable is available in this function containing the response data.
**data-request-cancel** | specifies JavaScript code to execute if the user aborts the request or cancels it via a confirmation dialog.
**data-request-message** | displays a progress message with the specified text, shown while the request is running. This option is used by the [flash messages features](./features/flash-messages.md).
**data-request-loading** | specifies a CSS selector for an element to be displayed while the request runs. You can use this option to show an AJAX loading indicator. The feature uses CSS display `block` and `none` attributes to manage the element visibility.
**data-request-progress-bar** | enable the [progress bar](./features/loaders.md) when an AJAX request occurs.
**data-request-form** | explicitly specify a form element to use for sourcing the form data. If this is unspecified, the closest form to the triggering element is used, including if the element itself is a form.
**data-request-flash** | when included, instructs the server to clear and send any flash messages with the response. This option is used by the [flash messages features](./features/flash-messages.md).
**data-request-files** | when specified the request will accept file uploads using the `FormData` interface.
**data-request-download** | when specified file downloads are accepted with a `Content-Disposition` response. This attribute can be added anonymously or set to the downloaded filename.
**data-request-bulk** | when specified the request be sent as JSON for bulk data transactions.
**data-browser-target** | when specified with `data-request-download` the output will target this window, for example `_blank`.
**data-browser-validate** | when specified browser-based client side validation will run on the request before it submits.
**data-browser-redirect-back** | when a redirect occurs, if the previous URL from the browser is available, use that in place of the redirect URL provided.
**data-auto-submit** | automatically triggers an AJAX request on elements that also have the `data-request` attribute. The request submits when the browser window is active using the [Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API). The optional attribute value can define the interval, in milliseconds, the framework waits before it sends the request.
**data-track-input** | can be applied to a text, number, or password input field that also has the `data-request` attribute. When defined, the input field automatically sends an AJAX request when a user types something in the field. The optional attribute value can define the interval, in milliseconds, the framework waits before it sends the requests.
[data-request](https://larajax.org/api/attributes/request) | specifies the AJAX handler name.
[data-request-confirm](https://larajax.org/api/attributes/request-confirm) | specifies a confirmation message. A confirmation dialog is displayed before the request is sent. If the user clicks the Cancel button the request isn't sent.
[data-request-redirect](https://larajax.org/api/attributes/request-redirect) | specifies a URL to redirect the browser after the successful AJAX request.
[data-request-url](https://larajax.org/api/attributes/request-url) | specifies a URL to which the request is sent. default: `window.location.href`
[data-request-update](https://larajax.org/api/attributes/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'`. The selector string should start with a `#` or `.` character, except you may also prepend it with `@` to append contents to the element, `^` to prepend, `!` to replace with and `=` to use any CSS selector.
[data-request-data](https://larajax.org/api/attributes/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-query](https://larajax.org/api/attributes/request-query) | specifies additional GET parameters to be sent to the server and added to the current URL query string.
[data-request-before-update](https://larajax.org/api/attributes/request-before-update) | specifies JavaScript code to execute directly before the page contents are updated.
[data-request-success](https://larajax.org/api/attributes/request-success) | specifies JavaScript code to execute after the request is successfully completed. The `data` variable is available in this function containing the response data.
[data-request-error](https://larajax.org/api/attributes/request-error) | specifies JavaScript code to execute if the request encounters an error. The `data` variable is available in this function containing the response data.
[data-request-complete](https://larajax.org/api/attributes/request-complete) | specifies JavaScript code to execute if the request is successfully completed or encounters an error. The `data` variable is available in this function containing the response data.
[data-request-cancel](https://larajax.org/api/attributes/request-cancel) | specifies JavaScript code to execute if the user aborts the request or cancels it via a confirmation dialog.
[data-request-message](https://larajax.org/api/attributes/request-message) | displays a progress message with the specified text, shown while the request is running. This option is used by the [flash messages features](../features/flash-messages.md).
[data-request-loading](https://larajax.org/api/attributes/request-loading) | specifies a CSS selector for an element to be displayed while the request runs. You can use this option to show an AJAX loading indicator. The feature uses CSS display `block` and `none` attributes to manage the element visibility.
[data-request-progress-bar](https://larajax.org/api/attributes/request-loading) | enable the [progress bar](../features/loaders.md) when an AJAX request occurs.
[data-request-form](https://larajax.org/api/attributes/request) | explicitly specify a form element to use for sourcing the form data. If this is unspecified, the closest form to the triggering element is used, including if the element itself is a form.
[data-request-flash](https://larajax.org/api/attributes/request-flash) | when included, instructs the server to clear and send any flash messages with the response. This option is used by the [flash messages features](../features/flash-messages.md).
[data-request-files](https://larajax.org/api/attributes/request-files) | when specified the request will accept file uploads using the `FormData` interface.
[data-request-download](https://larajax.org/api/attributes/request-files) | when specified file downloads are accepted with a `Content-Disposition` response. This attribute can be added anonymously or set to the downloaded filename.
[data-request-bulk](https://larajax.org/api/attributes/request) | when specified the request be sent as JSON for bulk data transactions.
[data-browser-target](https://larajax.org/api/attributes/request-files) | when specified with `data-request-download` the output will target this window, for example `_blank`.
[data-browser-validate](https://larajax.org/api/attributes/request-validate) | when specified browser-based client side validation will run on the request before it submits.
[data-browser-redirect-back](https://larajax.org/api/attributes/request-redirect) | when a redirect occurs, if the previous URL from the browser is available, use that in place of the redirect URL provided.
[data-request-poll](https://larajax.org/api/attributes/request-poll) | automatically triggers an AJAX request on elements that also have the `data-request` attribute. The request submits when the browser window is active using the [Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API). The optional attribute value can define the interval, in milliseconds, the framework waits before it sends the request.
[data-track-input](https://larajax.org/api/attributes/request-trigger) | can be applied to a text, number, or password input field that also has the `data-request` attribute. When defined, the input field automatically sends an AJAX request when a user types something in the field. The optional attribute value can define the interval, in milliseconds, the framework waits before it sends the requests.

When the `data-request` attribute is specified for an element, the element triggers an AJAX request when a user interacts with it. Depending on the type of element, the request is triggered on the following events:

Expand Down Expand Up @@ -93,7 +93,7 @@ Send a GET parameter `page` with value `6` on the current request.
</button>
```

Show a [flash message](./features/flash-messages.md) while the request is loading.
Show a [flash message](../features/flash-messages.md) while the request is loading.

```html
<button data-request="onUpdate" data-request-message="Loading...">
Expand Down Expand Up @@ -128,3 +128,10 @@ To specify a custom filename and open the download in a new window, such as prev
Download
</button>
```

#### See Also

::: also
* [Larajax Attributes Reference](https://larajax.org/api/attributes)
* [JavaScript API](./javascript-api.md)
:::
12 changes: 6 additions & 6 deletions 4.x/cms/ajax/handlers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ Every AJAX request should specify a handler name, either using the [data attribu
<button data-request="onSubmitContactForm">Go</button>

<!-- JavaScript API -->
<script> oc.ajax('onSubmitContactForm') </script>
<script> jax.ajax('onSubmitContactForm') </script>
```

Handlers defined by pages, layouts and components are all registered automatically. If you are calling a handler from inside a partial, use the [`{% ajaxPartial %}` Twig tag](../../markup/tag/ajax-partial.md), which adjusts the page cycle to register its handlers.
Expand All @@ -45,10 +45,10 @@ When an AJAX request occurs inside a HTML form tag, all the input values of the
</form>
```

The JavaScript API support this logic with the `oc.request` function.
The JavaScript API support this logic with the `jax.request` function.

```html
<script> oc.request('#myForm', 'onSubmitContactForm') </script>
<script> jax.request('#myForm', 'onSubmitContactForm') </script>
```

You may use the `input()` PHP function to access the variable.
Expand Down Expand Up @@ -114,7 +114,7 @@ The data can be fetched with the data attributes API.
The same with the JavaScript API.

```html
<form onsubmit="oc.request(this, 'onHandleForm', {
<form onsubmit="jax.request(this, 'onHandleForm', {
success: function(data) {
console.log(data);
}
Expand Down Expand Up @@ -162,7 +162,7 @@ These errors are handled by the AJAX framework.
The same with the JavaScript API.

```html
<form onsubmit="oc.request(this, 'onHandleForm', {
<form onsubmit="jax.request(this, 'onHandleForm', {
error: function(data) {
console.log(data);
}
Expand Down Expand Up @@ -218,7 +218,7 @@ You can listen to this event in the browser using a generic listener. This examp
```js
addEventListener('app:stale-document', function (event) {
if (confirm('Another user has updated this document, proceed?')) {
oc.request(event.target, 'onUpdate', { data: {
jax.request(event.target, 'onUpdate', { data: {
force: true
}});
}
Expand Down
Loading