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:
15
demo/demo.js
15
demo/demo.js
@@ -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
|
||||
}
|
||||
});
|
||||
|
||||
|
@@ -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
|
||||
|
Reference in New Issue
Block a user