https://github.com/javatmp/bootstrap-actionable
A small Javascript code that help implement click event actions for <a> and <button> tags by declarative way and provide functionalities to load AJAX content in Bootstrap Modal Wrapper instance.
https://github.com/javatmp/bootstrap-actionable
Last synced: about 2 months ago
JSON representation
A small Javascript code that help implement click event actions for <a> and <button> tags by declarative way and provide functionalities to load AJAX content in Bootstrap Modal Wrapper instance.
- Host: GitHub
- URL: https://github.com/javatmp/bootstrap-actionable
- Owner: JavaTMP
- License: mit
- Created: 2018-02-26T08:51:32.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-01T23:18:06.000Z (over 2 years ago)
- Last Synced: 2025-03-09T16:37:09.667Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 504 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Bootstrap Actionable
A small Javascript code that help implement click event actions for a and button tags by declarative way
and provide functionalities to load AJAX content in Bootstrap Modal Wrapper instance.
## Installation Using NPM
```
npm install bootstrap-actionable
```
## Building from The source
Make sure node.js and git client are locally installed on your machine and then run the following commands:
```
cd bootstrap-actionable
npm install
gulp
```
## Tutorial
[Bootstrap Actionable plugin](https://github.com/JavaTMP/bootstrap-actionable) is a small Javascript code that help us implement
click actions for `` and `` tags by declarative way and provide functionalities to load AJAX content in Bootstrap Modal
Wrapper instance. The following are the main action types provided by the plugin:
### `"action-ref-href"` Action Type
This is the simplest function of the plugin which fires other link's `click` event that contains the value of `href`'s attribute equal to provided one. We use this type on sidebar small shortcut `buttons` and on all `home.html`'s `buttons`. See the following button tags html code:
```
```
Pressing the above button will make actionable code search for link with value `"pages/home.html"` in its `href` attribute and then fire a `click` event on it.
Another button code example from `home.html` page:
```
Default Login Page
```
Pressing the above button will make actionable code search for link value `"pages/custom-pages/login-pages/default-login-page.html"` in its `href` attribute in `.sidebar` div only as we explicitly set the `actionScope` attribute and because the link on sidebar contains target attribute the actionable plugin code will use `window.open` to open it. See the following code for target link in the sidebar:
```
Default Login Page
```
### `"action-ref"` Action Type
It is similar to `"action-ref-href"` but instead of using URL to search for value of `href` attribute, it uses an alias name to search for. See the following code for `"Compose Message"` and `"View Message"` sidebar link in `index.html` page:
```
Compose Message
View Message
```
And see the following tags from `./web/pages/custom-pages/inbox/inbox-messages.html` file:
```
Compose
Customer Support
```
### `"ajax-request-in-model"` action type
This action type is very powerful and it fires an AJAX request using href URL and load its contents in [Bootstrap Modal Wrapper](/pages/javatmp-bootstrap-modal-wrapper "JavaTMP Bootstrap Modal Wrapper Plugin") instance and give the control to the modal. Example links are the message links in dropdown menu items in main navbar in `index.html` page:
```
John Smith
Yesterday
```
Pressing the above link will make actionable invokes the following method:
```
BootstrapModalWrapperFactory.createAjaxModal({
message: $this.options.loadingHtml,
ajaxContainerReadyEventName: $this.options.ajaxContainerReady,
ajax : {
url: href
}
});
```
The following HTML code is the response of above AJAX request:
```
...
jQuery(function ($) {
// here we can reference the container bootstrap modal by its id
// passed as parameter to request by name "ajaxModalId"
// or for demo purposese ONLY we can get a reference top modal
// in current open managed instances in BootstrapModalWrapperFactory
var currentParentModal = BootstrapModalWrapperFactory.globalModals\[BootstrapModalWrapperFactory.globalModals.length - 1\];
$("#" + currentParentModal.options.id).on(javatmp.settings.javaTmpAjaxContainerReady, function (event, modal) {
modal.updateSize("modal-lg");
modal.updateTitle("View Message");
modal.updateClosable(true);
modal.addButton({
label: "Close",
cssClass: "btn btn-primary",
action: function (button, buttonData, originalEvent) {
return this.hide();
}
});
});
});
```
## Copyright and License
bootstrap-actionable is copyrighted by [JavaTMP](http://www.javatmp.com) and licensed under [MIT license](https://github.com/JavaTMP/bootstrap-actionable/blob/master/LICENSE).