v25.0.6: Fix bootstrap-datepicker and select2 integration for Bootstrap 5

Major improvements and fixes:

## Bootstrap-datepicker Integration
- Fix DPGlobal undefined error in date input
- Remove conflicting bdatepicker alias that was causing noConflict errors
- Add graceful error handling for missing bootstrap-datepicker dependency
- Implement proper initialization sequence for DPGlobal API
- Position datepicker above input with improved UX styling

## Select2 Integration & Compatibility
- Fix select2 integration with Select2 v4.1.0-rc.0
- Resolve issue where select2:select event fired but value didn't update
- Add event handler to manually update select2 value on selection
- Fix webpack build inconsistency between demo and standalone builds
- Remove redundant npm dependencies from demo (bootstrap-datepicker, select2)
- Implement proper Select2 v4 API usage for value setting

## Build System Improvements
- Fix webpack configuration to properly handle CSS imports
- Remove CSS file copying for npm dependencies, use webpack imports instead
- Ensure consistent input type registration across all build targets
- Clean up build output and remove debugging code

## Demo & Testing
- Update demo to use webpack source build for consistency
- Add comprehensive error handling and user feedback
- Clean up all debugging console output
- Improve demo page descriptions and usability

## Technical Fixes
- Fix 'Unknown type: select2' error in demo build
- Resolve value change detection preventing save operations
- Implement savenochange option for better UX
- Remove deprecated jQuery UI conflicts and aliases
- Update to modern webpack and build practices
This commit is contained in:
Micha
2025-07-29 13:36:06 +02:00
parent f2a298f73a
commit 1ae5282bc7
18 changed files with 4327 additions and 47 deletions

View File

@@ -7,12 +7,13 @@ import "bootstrap"
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap-icons/font/bootstrap-icons.min.css"
// bootstrap-datepicker loaded separately (not bundled in grunt build)
import "bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js";
// Import bootstrap-datepicker for date inputs
import "bootstrap-datepicker";
import "bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css";
// Import the editable functionality (attaches to jQuery.fn) - using Grunt-built version
require("../dist/bootstrap5-editable/js/bootstrap-editable");
// Import the editable functionality (attaches to jQuery.fn) - using webpack source build
require("../src/bootstrap5-editable.js");
$.fn.editable.defaults.mode = 'inline';
$(function() {
@@ -71,6 +72,7 @@ $(function() {
});
// Select2 functionality (now bundled with x-editable)
$('#select2-test').editable({
type: 'select2',
url: 'demo/demo.php',
@@ -84,15 +86,16 @@ $(function() {
{id: 'it', text: 'Italy'}
],
value: 'us',
savenochange: true, // Allow saving even when value hasn't changed
select2: {
placeholder: 'Select Country',
allowClear: true
},
success: function(response, newValue) {
console.log('Select2 success:', newValue);
// Handle success
},
error: function(response) {
console.log('Select2 error:', response);
// Handle error
}
});

View File

@@ -47,7 +47,7 @@
</a>
</div>
<div class="container">
<div class="container mb-3">
<h3>Test X-Editable Datepicker</h3>
<p>Click to select a date:</p>
@@ -63,8 +63,8 @@
</a>
</div>
<div class="container">
<h3>Test X-Editable Select2</h3>
<div class="container mb-3">
<h3>Test X-Editable Select2 (refactored to work with select2 4.1.0-RC)</h3>
<p>Click to select from a larger list with search functionality:</p>
<a