There is quite simple steps to start just download and place into <head>
tag.To get started download the latest version of baseJS.
Head to the downloads page.
Copy-paste the baseJS librarys <script>
after your </body>
after body closing tag.
<script src="https://dixeam.com/cdn/basejs/3.0/base.js" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" ></script>
There are some dependencis you need to include before the baseJS jQuery, Popper.js ,and bootstrap.min.js helps to runt he code smoothly. Copy the following code before the baseJS you inluded
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
You can initialize baseJS with following simple code, place following code after closing </body>
tag
<script type="text/javascript"> baseJS.init( { "site_url": "https://example.com", "current_url":"https://example.com/users/list", "lang": "en" } ); </script>
In initialization you can customize the options, Only 3 options enabled by defaults for some you need to provide true
in argument to enabled it.
Option | Enabled (by default) | Note |
---|---|---|
site_url | YES | It is your app online base URL like, https://example.com |
current_url | YES | Current open url like, https://example.com/my/profile |
lang | YES | You need to provide the your website or app language |
Option | Enabled (by default) | Note |
---|---|---|
notif | YES | Notification system. |
imasking | NO | Input masking for form validation. |
select2 | NO | Select2 library for dynamics dropdown. |
(image 1.0)
Ajax modal is simple way to load boostrap modal dynamically. To add this you only need to copy paste following code. It has
data-action=""
api endpoint to load the modal GET
<a href="#data_modal" data-toggle="modal" data-url="https://example.com/products/create" data-action="data_modal" class="btn btn-success btn-sm m-btn" >+ Add Product</a>
(image 1.1)
When you click on ajax modal button you can load the boostrap modal. In this modal you can add the form
tag with custom attribute.
Ajax modal is simple way to load boostrap modal dynamically. To add this you only need to copy paste following code. It has
data-action="make_ajax"
It attach ajax call with form data-action="make_ajax_file"
It attach ajax call with form, You can use make_ajax_file
when there is input type file in element. data-action-after="reload"
It will referesh after ajax call.Note:
We strongly recommend to use themethod="post"
.
<form action="https://example.com/categories/create" method="post" data-action="make_ajax" data-action-after="reload"> ... ... ... </form>
(image 2.0)
A very simple ajax call for delete record, it has following required attributes
data-action="delete_record"
data-url=""
is server api endpoint, wheres 1 is id of record
<a data-action="delete_record" href="javascript:void(0);" data-url="https://example.com/products/delete/1">Delete</a>
(image 3.0)
Bulk action, help to apply any specific action at many records at once. For this feature you need to enclosed your records table in form
tag and each record should be have checkbox. The form has following attributes
action=""
api endpoint to to apply action with keys of records data-action="bulk-action"
Type of the action to apply GET / POST
We strongly recommend POST
<form action="https://example/update/_bulk" data-action="bulk-action" method="post"> .... .... .... </form>
The second thing you need to add the action button right before / after your records to apply the bulk action, It has following required attributes
id="actions"
<div class="form-inline " id="actions"> <div class="form-group "> <select class="form-control form-control-sm"> <option value="">Bulk Action</option> <option value="delete">Delete</option> <option value="active">Active</option> <option value="inactive">Inactive</option> </select> </div> <div class="form-group mx-sm-3"> <button type="button" class="btn btn-primary btn-sm m-btn">Apply</button> </div> </div>
(image 4.0)
When you want quickly update your datatable record editable helps you alot. It is quick, easy and attribute base. In editable you must have datatable and each record with unique id.
data-action="editable"
Make the datatable editable data-url="https://example.com/products/update"
api endpoint when update record data-id="1"
Unique ID for each record data-input="text"
When click on edit field will show to update data-field="label"
name of the field (like in database)
<table class="table table-bordered" data-action="editable" data-url="https://example.com/products/update"> <thead> <tr> <th scope="col">#</th> <th scope="col">Label</th> <th scope="col">Description</th> <th scope="col">Category</th> </tr> </thead> <tbody> <tr> <td scope="row">1</td> <td data-id="1" data-input="text" data-field="label">LED <a href="#" class="edit-button">edit</a><a></a></td> <td data-id="1" data-input="textarea" data-field="description">Samsung led USA model <a href="#" class="edit-button">edit</a></td> <td data-id="1" data-input="select" data-field="cat_id"> <select type="text" name="cat_id" id="cat_id" required=""> <option value="5" selected="">Garments</option> <option value="6">Electronicss</option> </select> </td> </tr> </tbody> </table>
baseJS provide easy step to validate the form
before submit. When you use Ajax Modal Form, baseJS validate the form and put the bootstrap calss .border-danger
with error message at bottom with class .text-danger
For Domos. You can select Form vaidation in menu Domos >> Form Validation
When you come for form validation it is very import to use client side validation. We have number of masking like, decimal, year, date, no space with custome attributes. For further demos & document please visit Domos. You can find input masking in menu Domos >> Input Masking
select2 is very popular libary for to make dynamics dropdowns. It has very rich funtionlity like
jQuery ajax
Domos >> Select2