errohitsinghal / yii2-ajaxcrud-bs5-advanced

1.12 2026-07-18 21:04 UTC

Apache-2.0

• Denis Korolkov
• Rohit Singhal

• database
• template
• ajax
• extension
• crud
• modal
• yii2
• gii
• password-validation

Published on Packagist.org on 2026-07-18 21:06 UTC

README

Gii CRUD template for Single Page Ajax Administration for yii2 with Password Validation Modal Support

Based on johnitvn/yii2-ajaxcrud and denkorolkov/yii2-ajaxcrud-bs5

Features

• Create, read, update, delete in onpage with Ajax
• Bulk delete support with optional password validation
• Pjax widget support
• Export function (PDF, HTML, Text, CSV, Excel, JSON)
• Bootstrap 5 support
• Password Modal for Critical Operations - Secure sensitive actions with passcode confirmation
• Customizable button text with Font Awesome icons
• Advanced modal dialogs with toast notifications
• Table-based modal content display

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist errohitsinghal/yii2-ajaxcrud-bs5-advanced "@dev"

or add

"errohitsinghal/yii2-ajaxcrud-bs5-advanced": "@dev"

to the require section of your composer.json file.

Usage

For first you must enable Gii module Read more about Gii code generation tool

Because this extension used kartik-v/yii2-grid extensions so we must config gridview module before

Let 's add into modules config in your main config file

'modules' => [
    'gridview' =>  [
        'class' => \kartik\grid\Module::class,
        'bsVersion' => '5.x', 
        // 'downloadAction' => 'gridview/export/download',
        // 'i18n' => [],
        // 'exportEncryptSalt' => 'tG85vd1',
    ]       
]

Note: Font Awesome icons not required! See Bootstrap icons!

You can then access Gii through the following URL:

http://localhost/path/to/index.php?r=gii

and you can see Ajax CRUD Generator

Password Validation Modal

This advanced version includes secure password/passcode validation for critical operations like bulk delete.

Using Password Modal in Views

To enable passcode confirmation for delete or other critical operations, add these data attributes to your button:

<?php
// In your view file
echo Html::a('Delete', ['delete', 'id' => $model->id], [
    'class' => 'btn btn-danger',
    'data' => [
        'confirm-title' => 'Confirm Delete',
        'confirm-message' => 'Are you sure you want to delete this record?',
        'confirm-passcode' => 'true',
        'confirm-passcode-type' => 'Admin Password',
        'confirm-passcode-value' => 'your-secret-code',
        'confirm-ok' => 'Delete',
        'confirm-cancel' => 'Cancel',
        'request-method' => 'POST'
    ]
]);
?>

Modal Features

• validatePasscode: Enable/disable passcode validation (default: false)
• passcodeType: Label for passcode input (e.g., 'Admin Password', 'PIN')
• passcodeValue: The correct passcode to validate against
• Toast Notifications: Success/error messages with automatic display
• Form Validation: Built-in form submission handling
• Custom Callbacks: Define custom success and cancel callbacks

Available Modal Data Attributes

• data-confirm-title: Modal title
• data-confirm-message: Modal content/message
• data-confirm-passcode: Enable passcode validation (true/false)
• data-confirm-passcode-type: Passcode input label
• data-confirm-passcode-value: Correct passcode value
• data-confirm-ok: OK button label
• data-confirm-cancel: Cancel button label
• data-modal-size: Modal size (small/normal/large)
• data-request-method: HTTP method (GET/POST)
• href or data-url: Target URL for the action

Pjax Refresh on Modal Close

This extension supports automatic Pjax container refresh when a modal is closed. This is useful when you want to refresh a grid or other Pjax-wrapped content after a modal action is completed.

Usage

Add the data-pjax-refresh attribute to any button in your modal footer with the Pjax container ID as the value:

<?php
// In your controller action that returns modal content
return [
    'title' => '<i class="fa fa-sort-amount-down me-2"></i>Seeding: ' . Html::encode($eventStage->stage_name),
    'size' => 'large',
    'content' => $this->renderAjax($view, $viewParams),
    'footer' => Html::button('Close', [
        'class' => 'btn btn-secondary',
        'data-bs-dismiss' => 'modal',
        'data-pjax-refresh' => $pjaxId  // The ID of your Pjax container (without #)
    ]),
];
?>

When the modal is closed (either by clicking the Close button or any other dismiss action), the Pjax container with the specified ID will automatically be refreshed.

Bootstrap 5 Classes

This extension fully supports Bootstrap 5 CSS classes including:

• float-start / float-end (replaces pull-left/pull-right)
• btn-close for modal close button
• form-label, form-control, invalid-feedback for forms
• is-invalid, is-valid for form validation states
• alert-danger for error messages
• All modern Bootstrap 5 utility classes

Contributing

Lets contribute to keep it updated and make it useful for all friends.

Development

This package ships plain src/ — consumers need no build step. npm is used only for local development.

npm install
npm test        # vitest + jsdom unit tests
npm run build   # regenerate every src/assets/*.min.js from its .js twin

Always run npm run build after editing anything in src/assets/. CrudAsset serves the .min.js files whenever YII_DEBUG is off, so an un-rebuilt twin means your change works in development and silently does nothing in production.