Documentation

<script src="https://dixeam.com/cdn/basejs/3.0/base.js" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" ></script>

<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>

<script type="text/javascript">
   baseJS.init(
      {
         "site_url": "https://example.com",
         "current_url":"https://example.com/users/list",
         "lang": "en"
      }
   );
</script>

Ajax Modal

(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
• Method 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>

Ajax Modal Form

(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.

<form action="https://example.com/categories/create" method="post" data-action="make_ajax" data-action-after="reload">
...
...
...
</form>

Delete Action

(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>

Bulk Action

(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
• Method 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>

Editable

(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>

Form Validation

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

Input Masking

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 Dropdown

select2 is very popular libary for to make dynamics dropdowns. It has very rich funtionlity like

• Single Dropdown for search
• Multiple selector with search
• You can use as tag selector
• Use dropdown selector with jQuery ajax
• You can use custome attributes

For Domos. You can select select2 in menu Domos >> Select2