LiveDomJS Key Features

All-in-one library providing a modern web development experience with Laravel

Dynamic AJAX

Automatic AJAX system with simple HTML attributes. No need to write manual JavaScript.

Live Computation

Automatic real-time calculations with Excel-like formulas. Supports SUM, AVG, SUMIF and date functions.

SPA Router

Single Page Application with automatic routing. Smooth navigation without page reload.

Live Conditionals

Show/hide elements dynamically based on input conditions. Reactive UI without complex JavaScript.

Auto Polling

Automatically refresh content periodically. Ideal for real-time dashboards and notifications.

Live Data Binding

Automatic data synchronization between elements. Easy-to-use two-way data binding.

Installation

Start using LiveDomJS in minutes

1 Via Composer (Laravel)

If using Laravel, LiveDomJs can be installed directly through Packagist:

# Install package
composer require gadingrengga/livedomjs

# Run installation to publish assets and routes
php artisan livedomjs:install

2 Usage in Blade

Add the following script to your Blade layout after jQuery:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{ asset('vendor/livedomjs/livedom.js') }}"></script>

Note: Make sure jQuery is loaded before LiveDomJS to avoid errors.

3 CSRF Token Setup

Add CSRF token in the head section of your template:

<meta name="csrf-token" content="{{ csrf_token() }}">

Complete Documentation

Comprehensive guide for all LiveDomJS features

1. Dynamic AJAX

Automatic AJAX system with simple HTML attributes for server interaction without page reload.

Main Attributes:

live-scope - Defines controller
live-click - Method called on click
live-target - Target element for response
live-method - HTTP method (GET/POST)
live-loading - Show loading indicator

Event Handlers:

live-submit - Submit form via AJAX
live-change - Trigger when value changes
live-keyup - Trigger on keyup
live-input - Trigger on input
live-hover - Trigger on hover

Usage Example:

<div live-scope="user">
    <input name="name" type="text" placeholder="User Name">
    <button live-click="save" live-target="#result" live-loading="true" live-loading-indicator>
        Save User
    </button>
    <div id="result"></div>
</div>

2. Live Computation

Real-time calculation system with Excel-like formulas. Supports various mathematical and date functions.

Math Functions

sum(field)
avg(field)
min(field)
max(field)
count(field)
sumif(range, criteria, sum_range)

Date Functions

rangeDate(start, end)
rangeMonth(start, end)
rangeYear(start, end)
rangeWeek(start, end)

Output Format

idr - Rupiah Format
currency - Dollar Format
decimal - 2 Decimals
percent - Percentage
days/months/years

Usage Example:

<!-- Automatic calculation -->
<input name="qty" type="number" value="10">
<input name="price" type="number" value="5000">
<input live-compute="qty * price" live-compute-format="idr" readonly>

<!-- With manual control -->
<input name="subtotal" live-compute="sum(rows_?_qty * rows_?_price)" 
       live-compute-format="idr" live-compute-skip="true">

3. Live Conditionals

Control element visibility and styling based on input conditions in real-time.

Available Directives:

live-show
Show/hide element based on condition
live-class
Add/remove CSS classes dynamically
live-style
Change inline styles dynamically
live-attr
Change element attributes dynamically

Condition Examples:

<!-- Show based on value -->
<div live-show="status == 'active'">
    Content for active status
</div>

<!-- Class based on condition -->
<div live-class="price > 1000 ? 'text-red-500' : 'text-green-500'">
    Price changes color
</div>

4. SPA Router

Single Page Application with automatic routing and smooth navigation without page reload.

How It Works:

• Intercept all links and forms in SPA region
• Load content via AJAX without reload
• Update browser history automatically
• Support browser back/forward buttons
• Integrated error handling

Configuration:

window.liveDomConfig = {
    spaExcludePrefixes: [
        '/api/',
        '/download/',
        '/admin/export'
    ]
};

HTML Setup:

<!-- Layout with SPA regions -->
<div live-spa-region="header">
    <nav>...</nav>
</div>

<div live-spa-region="main">
    <!-- Main content to be updated -->
</div>

<div live-spa-region="sidebar">
    <!-- Sidebar that can be updated -->
</div>

5. Live Data Binding

Automatic data synchronization between elements with easy-to-use two-way data binding.

Binding Features:

• Automatic sync based on name attribute
• Support for input, select, textarea
• Two-way binding with live-bind
• Automatic event triggers (input, change)
• Cross-element synchronization

Implementation Example:

<!-- Input source -->
<input name="username" type="text">

<!-- Elements that will sync -->
<span live-bind="username"></span>
<input live-bind="username" readonly>

6. Auto Polling

Automatically refresh content periodically. Ideal for real-time dashboards, notifications, and monitoring.

How It Works:

• Interval in milliseconds
• Auto-abort previous requests
• Automatic error handling
• Good memory management
• Stop polling when element is removed

Usage Example:

<!-- Polling every 5 seconds -->
<div id="notifications" 
     live-poll="5000" 
     live-scope="dashboard" 
     live-click="getNotifications">
    <!-- Content will be updated automatically -->
</div>

Implementation Examples

See LiveDomJS in action in various real-world scenarios

Dynamic CRUD Form

Create, Read, Update, Delete with AJAX without reload

HTML Blade:

<div live-scope="UserController">
    <form live-submit="store" live-target="#user-list">
        <input type="text" name="name" placeholder="Name" required>
        <input type="email" name="email" placeholder="Email" required>
        <button type="submit" >
            Save
        </button>
    </form>
    
    <div id="user-list">
        @include('users.list')
    </div>
</div>

Laravel Controller:

class UserController extends Controller
{
    public function store(Request $request)
    {
        $user = User::create($request->all());
        
        return view('users.list')->render();
    }
}

Live Calculator

Real-time calculation with automatic formatting

HTML Form:

<div live-scope="invoice">
    <input name="qty" type="number" value="1">
    <input name="price" type="number" value="100000">
    
    <!-- Automatic subtotal -->
    <input name="subtotal" 
           live-compute="qty * price"
           live-compute-format="idr" readonly>
    
    <!-- 10% tax -->
    <input name="tax" 
           live-compute="subtotal * 0.1"
           live-compute-format="idr" readonly>
    
    <!-- Total -->
    <input name="total" 
           live-compute="subtotal + tax"
           live-compute-format="idr" readonly>
</div>

Result:

Qty:

Price:

Subtotal: 300.000

Tax (10%): 30.000

Total: 330.000

Conditional UI

Show/hide elements based on user input

HTML with Conditions:

<div live-scope="form">
    <select name="user_type">
        <option value="personal">Personal</option>
        <option value="company">Company</option>
    </select>
    
    <!-- Appears if company -->
    <div live-show="user_type == 'company'">
        <input name="company_name" placeholder="Company Name">
        <input name="tax_id" placeholder="Tax ID">
    </div>
    
    <!-- Dynamic class based on condition -->
    <div live-class="user_type == 'company' ? 'bg-blue-100' : 'bg-gray-100'">
        Additional info
    </div>
</div>

Interactive Demo:

Fields for Company:

Additional info (background changes automatically)

Advanced Features

Advanced capabilities for complex applications

Callback Functions

Execute functions before and after AJAX requests for more detailed control.

<button live-click="save"
        live-callback-before="beforeSave"
        live-callback-after="afterSave">
    Save Data
</button>

function beforeSave(element) {
    // Validation or confirmation
    return confirm('Are you sure you want to save?');
}

Advanced Targeting

Target elements with flexible jQuery selectors for precise DOM manipulation.

<!-- Target multiple with selector -->
<button live-click="update"
        live-target="closest(.card), next(.info)">
    Update
</button>

<!-- Various DOM actions -->
<button live-click="add"
        live-dom="append,show"
        live-target="#list,#notification">
    Add Item
</button>

Method with Arguments

Send specific arguments to controller methods for more dynamic logic.

HTML:

<!-- Single argument -->
<button live-click="updateStatus('active')">
    Activate
</button>

<!-- Multiple arguments -->
<button live-click="setPrice(100000, 'idr')">
    Set Price
</button>

<!-- Dynamic with element value -->
<button live-click="calculate(this.dataset.id, qty)">
    Calculate
</button>

Controller:

public function updateStatus($status)
{
    // $status contains 'active'
    $model->status = $status;
    $model->save();
}

public function setPrice($amount, $currency)
{
    // Handle price with currency
    return response()->json([
        'success' => true,
        'data' => "Price set to {$amount} {$currency}"
    ]);
}

Tips & Best Practices

Guide for using LiveDomJS optimally

✅ What You Should Do

• Use live-scope for good organization
• Implement error handling in controller
• Use live-loading for good UX
• Server-side input validation is still needed
• Use callbacks for complex logic
• Test with various browsers and devices

💡 Optimization Tips

• Use live-compute-skip for manual inputs
• Limit polling frequency for performance
• Use debouncing for real-time inputs
• Cache responses when possible
• Minimize unnecessary DOM manipulation

❌ What to Avoid

• Don't forget to include jQuery before LiveDomJS
• Avoid complex nested live-scope
• Don't use polling for rarely changing data
• Avoid live-compute for heavy calculations
• Don't ignore CSRF protection
• Avoid circular dependency in computation

🔧 Troubleshooting

• Check browser console for JavaScript errors
• Check Network tab for failed requests
• Ensure controller method exists and is accessible
• Check response JSON format from server
• Verify CSRF token is correct