https://github.com/taketo1113/alt-ujs
alternative rails-ujs
https://github.com/taketo1113/alt-ujs
rails rails-ujs ujs
Last synced: 30 days ago
JSON representation
alternative rails-ujs
- Host: GitHub
- URL: https://github.com/taketo1113/alt-ujs
- Owner: taketo1113
- License: mit
- Created: 2024-08-24T13:13:51.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2025-01-22T05:09:54.000Z (4 months ago)
- Last Synced: 2025-01-22T06:22:33.934Z (4 months ago)
- Topics: rails, rails-ujs, ujs
- Language: JavaScript
- Homepage:
- Size: 246 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# alt-ujs
**alt-ujs** is an alternative to *rails-ujs*.
## rails-ujs
*rails-ujs* has been deprecated since Rails 7.0 and was no longer released starting from Rails 7.2.
*rails-ujs* is the unobtrusive scripting adapter for Ruby on Rails.
> This unobtrusive scripting support file is developed for the Ruby on Rails framework, but is not strictly tied to any specific backend.
https://github.com/rails/rails/tree/7-1-stable/actionview/app/javascript
## Features
**alt-ujs** provides the following features compatible with *rails-ujs*:
- force confirmation dialogs for various actions;
- make non-GET requests from hyperlinks;
- ~~make forms or hyperlinks submit data asynchronously with Ajax;~~
- Not Supported
- have submit buttons become automatically disabled on form submit to prevent double-clicking.
## Installation
```sh
npm install alt-ujs
```
## Usage
alt-ujs works by adding data attributes to your HTML.
The available data attributes are:
- `data-confirm` : Displays confirmation dialogs for links and forms.
- `data-method` : Enables links to perform POST, PUT, or DELETE requests.
Next, add the following code to your app.
This code activates the functionality of elements with the specified data attributes.
```js
// your-app.js
import AltUjs from "alt-ujs";
AltUjs.start();
```
### `data-confirm`
The `data-confirm` attribute displays confirmation dialogs for links and forms.
```html
Link
Button
```
The text specified in the `data-confirm` attribute is shown in a JavaScript `confirm()` dialog.
If "Cancel" is selected, no further actions will be performed.
### `data-method`
The `data-method` attribute allows you to execute a request with a specified HTTP method instead of the default GET method when clicking a link.
```html
Link
```
When a link with the `data-method` attribute is clicked, a form is dynamically created based on the link's attributes.
- The `action` attribute of the form is set to the `href` value of the link.
- The `method` attribute of the form is set to `post` (a fixed value).
Additionally, the HTTP method specified in the `data-method` attribute is included in a hidden input field with the name `_method`.
This follows Ruby on Rails' convention, where all HTTP methods other than GET and POST are sent via POST, with the actual method specified using the `_method` parameter.
The generated HTML form looks like this:
```html
```
### Disable Form
To prevent double submission after submitting the form, the submit button will be disabled.
- When the form is submitted, the `disabled` attribute is added to the submit button.
- When navigating back in the browser, the `disabled` attribute is removed from the submit button that had been disabled.
## Development
After checking out the repo, run `npm install` to install dependencies. Then, run `npm test` to run the tests.
## Contributing
Bug reports and pull requests are welcome on GitHub at https://github.com/taketo1113/alt-ujs.
## License
This npm package is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).