{"id":14965469,"url":"https://github.com/matronator/axette","last_synced_at":"2025-10-25T11:31:51.941Z","repository":{"id":42574102,"uuid":"377651263","full_name":"matronator/axette","owner":"matronator","description":"Very simple and lightweight AJAX implementation for Nette","archived":false,"fork":false,"pushed_at":"2025-02-03T11:21:59.000Z","size":685,"stargazers_count":6,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-03T12:27:14.695Z","etag":null,"topics":["ajax","ajax-link","nette","nette-extension","nette-framework"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/axette","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/matronator.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["matronator"],"patreon":"matronator","open_collective":null,"ko_fi":"matronator","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://www.paypal.me/matronator","https://www.blockchain.com/btc/address/35VRpVQaqFWjUCnVRpGineShz76QyYgSVg"]}},"created_at":"2021-06-16T23:20:25.000Z","updated_at":"2025-02-03T11:21:00.000Z","dependencies_parsed_at":"2023-11-15T23:24:09.993Z","dependency_job_id":"20d3a185-3355-4ef7-a5a5-eb32c1a8f3ab","html_url":"https://github.com/matronator/axette","commit_stats":{"total_commits":137,"total_committers":5,"mean_commits":27.4,"dds":0.5036496350364963,"last_synced_commit":"a91d7f6e3ce69b516b01b8229b5e74eaebe56e04"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matronator%2Faxette","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matronator%2Faxette/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matronator%2Faxette/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matronator%2Faxette/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matronator","download_url":"https://codeload.github.com/matronator/axette/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238128586,"owners_count":19421059,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ajax","ajax-link","nette","nette-extension","nette-framework"],"created_at":"2024-09-24T13:34:47.768Z","updated_at":"2025-10-25T11:31:46.682Z","avatar_url":"https://github.com/matronator.png","language":"TypeScript","funding_links":["https://github.com/sponsors/matronator","https://patreon.com/matronator","https://ko-fi.com/matronator","https://www.paypal.me/matronator","https://www.blockchain.com/btc/address/35VRpVQaqFWjUCnVRpGineShz76QyYgSVg","https://ko-fi.com/U7U2MDBC"],"categories":[],"sub_categories":[],"readme":"![Axette logo](https://user-images.githubusercontent.com/5470780/122844829-ca28d100-d302-11eb-870f-050666075034.png)\n\n![npm](https://img.shields.io/npm/v/axette)\n![GitHub Repo stars](https://img.shields.io/github/stars/matronator/axette)\n![Dependents (via libraries.io)](https://img.shields.io/librariesio/dependents/npm/axette)\n[![CodeFactor](https://www.codefactor.io/repository/github/matronator/axette/badge)](https://www.codefactor.io/repository/github/matronator/axette)\n![Libraries.io SourceRank](https://img.shields.io/librariesio/sourcerank/npm/axette)\n![npm](https://img.shields.io/npm/dm/axette)\n![NPM](https://img.shields.io/npm/l/axette)\n![npm TypeScript version](https://img.shields.io/npm/dependency-version/axette/dev/typescript)\n![GitHub Sponsors](https://img.shields.io/github/sponsors/matronator)\n[![Buy us a tree](https://img.shields.io/badge/Treeware-%F0%9F%8C%B3-lightgreen)](https://plant.treeware.earth/matronator/axette)\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/U7U2MDBC)\n\n# Axette\n\nhttps://www.npmjs.com/package/axette\n\nVery simple and lightweight AJAX implementation for [Nette](https://nette.org). Axette = AJAX for Nette!\n\n## Table of Contents\n\n- [Table of Contents](#table-of-contents)\n- [Features](#features)\n- [Installation](#installation)\n  - [With package manager (recommended)](#with-package-manager-recommended)\n    - [NPM:](#npm)\n    - [PNPM:](#pnpm)\n    - [Yarn:](#yarn)\n    - [Bun:](#bun)\n  - [With a `\u003cscript\u003e` tag:](#with-a-script-tag)\n- [Migration from 1.x to 2.x](#migration-from-1x-to-2x)\n  - [Breaking changes](#breaking-changes)\n- [Usage](#usage)\n  - [Custom CSS selector](#custom-css-selector)\n  - [Custom event listeners](#custom-event-listeners)\n  - [Events](#events)\n    - [`beforeInit`](#beforeinit)\n    - [`afterInit`](#afterinit)\n    - [`beforeAjax`](#beforeajax)\n    - [`afterAjax`](#afterajax)\n  - [Sending requests manually](#sending-requests-manually)\n  - [Remove `?_fid=XXXX` from URLs](#remove-_fidxxxx-from-urls)\n- [Credits](#credits)\n- [License](#license)\n\n## Features\n\n- Lightweight (**1kb** gzipped, **3kb** minified)\n- Blazingly Fast\n- No dependencies (no jQuery!)\n- Simple to use\n  - Just import it, call `const axette = new Axette()` and you're done!\n- Supports links and forms (`\u003ca\u003e` and `\u003cform\u003e` tags) to be handled by AJAX\n- Handles snippet updates (`$this-\u003eredrawControl()`) as well as redirects (`$this-\u003eredirect()`)\n- Automatically executes JavaScript inside `\u003cscript\u003e` tags in the snippets returned from AJAX requests\n- Get rid of `?_fid=6ge7` in the URL when using Flash Messages\n- Attach custom callbacks to various events (`beforeInit`, `afterInit`, `beforeAjax`, etc...)\n\n## Installation\n\n### With package manager (recommended)\n\n#### NPM:\n\n```\nnpm install axette\n```\n\n#### PNPM:\n\n```\npnpm install axette\n```\n\n#### Yarn:\n\n```\nyarn add axette\n```\n\n#### Bun:\n\n```sh\nbun add axette\n# or\nbun install axette\n```\n\n### With a `\u003cscript\u003e` tag:\n\nDownload the [latest release](https://github.com/matronator/axette/releases/latest), move `axette.iife.js` from the `dist/` folder somewhere to your project and include it in your HTML or Latte file via a `\u003cscript\u003e` tag.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003ctitle\u003eAxette - AJAX for Nette!\u003c/title\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        ...\n\n        \u003c!-- Local version --\u003e\n        \u003cscript src=\"./path/to/axette.iife.js\"\u003e\u003c/script\u003e\n        OR\n        \u003c!-- Via CDN --\u003e\n        \u003cscript src=\"https://unpkg.com/axette@latest/dist/axette.iife.js\"\u003e\u003c/script\u003e\n\n        \u003c!-- Your other scripts here... --\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Migration from 1.x to 2.x\n\nAxette 2.x is a partial rewrite of the original 1.x version. It tries to keep the same API as much as possible, but there are some breaking changes.\n\n### Breaking changes\n\n- `Axette` is now a class instead of an object and is a named export instead of default export. This means that you need to import it like this:\n\n```js\n// Change this:\nimport axette from 'axette';\n\n// To this:\nimport { Axette } from 'axette';\n```\n\n- You can now use any CSS selector for custom AJAX handlers and not just a class, so you can use for instance data-attributes instead. It's also not defined in the `init()` method anymore, but in the `Axette` class constructor. So if you want to use `[data-ajax]` instead of `.ajax` class, you'd do it like this (no need to call `init()` as that's called automatically in the constructor):\n\n```js\nimport { Axette } from 'axette';\n\n// Change this:\naxette.init('ajax'); // note that here you can define only a class name\n\n// To this:\nconst axette = new Axette('[data-ajax]'); // here you can define any CSS selector\n\n// You can also use multiple selectors like this:\nconst axette = new Axette('.ajax, [data-ajax]');\n```\n\n```html\n\u003ca n:href=\"update!\" data-ajax\u003eUpdate snippets\u003c/a\u003e\n```\n\nOr call it empty to use the default class name `.ajax` like before:\n\n```js\nconst axette = new Axette();\n\n// Is equivalent to this in the 1.x version:\naxette.init();\n```\n\n- It is now possible to change the CSS selector after the `Axette` instance is created. So if you want to use a different selector after already using the original one, you can do so like this:\n\n```js\nimport { Axette } from 'axette';\n\nconst axette = new Axette('.old-selector');\n\n// Do some stuff...\n\naxette.setSelector('.new-selector'); // Beware that this will call the `init()` method again, so your init hooks (beforeInit, afterInit) will be called again\n```\n\n- To remove the `?_fid=XXXX` in the URL when using Flash Messages, you now need to import the `noFlashUrl()` function without having to import Axette as well, instead of calling `fixUrl()` method on the axette object:\n\n```js\n// Change this:\naxette.fixUrl();\n\n// To this:\nimport { noFlashUrl } from 'axette';\n\nnoFlashUrl();\n```\n\n## Usage\n\nAdd `ajax` class to the links or forms that you would like to handle via AJAX:\n\n```html\n\u003ca n:href=\"update!\" class=\"ajax\"\u003eUpdate snippets\u003c/a\u003e\n```\n\nAnd in your `index.js` or other JavaScript file you just import `Axette` and initialize it:\n\n```js\nimport { Axette } from \"axette\"\n\nconst axette = new Axette();\n```\n\nAnd that's it! The class constructor handles everything.\n\n### Custom CSS selector\n\nIf you'd like to use some other class for your links, you just pass the name of the class as a parameter in the constructor. So if for instance you want your AJAX links to have `custom-class` instead of `ajax`, then you'd do it like so:\n\n`index.html`:\n\n```html\n\u003ca n:href=\"update!\" class=\"custom-class\"\u003eUpdate snippets\u003c/a\u003e\n```\n\n`index.js`:\n\n```js\nimport { Axette } from \"axette\"\n\nconst axette = new Axette('.custom-class'); // The selector can be any valid CSS selector\n\n// You can also use multiple selectors like this:\nconst axette = new Axette('.custom-class, [data-ajax]');\n```\n\n### Custom event listeners\n\nIf you have some event listeners that you're adding on the `DOMContentLoaded` event or similar and you want them to work even after an AJAX request, you will have to wrap them in a function and pass it as a hook to `axette`, to have them re-registered after the AJAX request is received. You can do that using the `.on()` method. So if you have something like this:\n\n```js\ndocument.addEventListener(`DOMContentLoaded`, () =\u003e {\n    const buttons = document.querySelectorAll(`.btn`)\n    buttons.forEach(button =\u003e {\n        button.addEventListener(`click`, e =\u003e {\n            e.preventDefault()\n            // ...\n        })\n    })\n})\n```\n\nYou'd wrap it in a function and pass that function as a parameter to the `.on()` function like so:\n\n```js\nimport { Axette } from \"axette\"\n\nfunction registerButtons() {\n    document.addEventListener(`DOMContentLoaded`, () =\u003e {\n        const buttons = document.querySelectorAll(`.btn`)\n        buttons.forEach(button =\u003e {\n            button.addEventListener(`click`, e =\u003e {\n                e.preventDefault()\n                // ...\n            })\n        })\n    })\n}\n\nconst axette = new Axette()\naxette.on(`afterAjax`, registerButtons)\n```\n\nOr you could directly call `onBeforeAjax()`, `onAfterAjax()`, `onBeforeInit()` or `onAfterInit()` with the function reference, optional arguments and optional ID like this:\n\n```js\naxette.onAfterAjax(registerButtons)\n// or with the ID and arguments:\naxette.onAfterAjax(registerButtons, [arg1, arg2], 'my-id')\n// or with the ID only:\naxette.onAfterAjax(registerButtons, [], 'my-id')\n```\n\nAnd then you can remove the hook with the `.off()` method:\n\n```js\n// Either by passing the function reference:\naxette.off(`afterAjax`, registerButtons)\n// or with ID:\naxette.off(`afterAjax`, 'my-id')\n// or with the Hook object:\naxette.off(hook)\n```\n\nOr you can call the method without any parameters to remove all hooks on that specific event:\n\n```js\naxette.off(`afterAjax`)\n```\n\n### Events\n\nAxette has several events you can attach hooks (callbacks) to. You can attach multiple hooks to the same event. The hooks are called in the order they were attached.\n\n#### `beforeInit`\n\nCalled before the `init()` method is called.\n\n#### `afterInit`\n\nCalled after the `init()` method is called.\n\n#### `beforeAjax`\n\nCalled before the AJAX request is sent.\n\n#### `afterAjax`\n\nCalled after the AJAX request is sent.\n\n### Sending requests manually\n\nIf you call `fetch()` or `XMLHttpRequest()` manually, the snippets won't be automatically updated. To update the snippets, you can call the `sendRequest()` method on the `Axette` instance instead of `fetch()` or `XMLHttpRequest()`:\n\n```js\naxette.sendRequest(\"/url\", \"GET\");\n```\n\nYou can also send Body with the request and define headers. The method signature is like this:\n\n```ts\naxette.sendRequest(url, method = \"POST\", body?, headers?); // Only the URL is required\n\n// Full signature:\nAxette.sendRequest(url: string, method: string = `POST`, requestBody?: BodyInit|null, headers: {[key: string]: string} = {'Content-Type': `application/json`})\n```\n\n### Remove `?_fid=XXXX` from URLs\n\nNette by default appends `?_fid=XXXX` to the URLs if you call the `flashMessage()` function. To remove the `?_fid=XXXX` from the URL when using Flash Messages, you need to import the `noFlashUrl()` function:\n\n```js\nimport { noFlashUrl } from 'axette';\n\nnoFlashUrl();\n```\n\n## Credits\n\nHuge thanks to [Matouš Trča](https://github.com/blackhexagon) from [@Visualio](https://github.com/visualio) who wrote the core logic for handling the HTTP response from Nette.\n\n## License\n\nThis package is [Treeware](https://treeware.earth). If you use it in production, then we ask that you [**buy the world a tree**](https://plant.treeware.earth/matronator/axette) to thank us for our work. By contributing to the Treeware forest you'll be creating employment for local families and restoring wildlife habitats.\n\n---\n\nMIT License\n\nCopyright (c) 2021 Matronator\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatronator%2Faxette","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatronator%2Faxette","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatronator%2Faxette/lists"}