1ae5282bc7
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
103 lines
2.9 KiB
JavaScript
103 lines
2.9 KiB
JavaScript
import $ from 'jquery';
|
|
// Ensure jQuery is available globally before any other imports
|
|
window.$ = window.jQuery = $;
|
|
global.$ = global.jQuery = $;
|
|
|
|
import "bootstrap"
|
|
import "bootstrap/dist/css/bootstrap.min.css"
|
|
import "bootstrap-icons/font/bootstrap-icons.min.css"
|
|
|
|
// 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 webpack source build
|
|
require("../src/bootstrap5-editable.js");
|
|
$.fn.editable.defaults.mode = 'inline';
|
|
|
|
$(function() {
|
|
|
|
$('#yes-no-switch').editable({
|
|
type: 'select',
|
|
url: 'demo/demo.php', // URL to send the POST request
|
|
source: 'demo/demo.php', // URL to fetch select options
|
|
value: 1,
|
|
success: function(response, newValue) {
|
|
// Handle success
|
|
},
|
|
error: function(response) {
|
|
// Handle error
|
|
}
|
|
});
|
|
|
|
|
|
|
|
$('#yes-no-switch-json').editable({
|
|
type: 'select',
|
|
url: 'demo/demo.php', // URL to send the POST request
|
|
source: [ // Static array instead of URL
|
|
{value: 0, text: "No"},
|
|
{value: 1, text: "Yes"},
|
|
{value: 2, text: "Maybe"}
|
|
],
|
|
value: 1,
|
|
success: function(response, newValue) {
|
|
// Handle success
|
|
},
|
|
error: function(response) {
|
|
// Handle error
|
|
}
|
|
});
|
|
|
|
const initialDateValue = new Date().toISOString().split('T')[0];
|
|
|
|
$('#datepicker').editable({
|
|
type: 'date',
|
|
url: 'demo/demo.php', // URL to send the POST request
|
|
value: initialDateValue, // Set to current date (YYYY-MM-DD)
|
|
format: 'yyyy-mm-dd', // Date format
|
|
viewformat: 'dd/mm/yyyy', // How the user sees it
|
|
datepicker: {
|
|
weekStart: 1,
|
|
autoclose: true,
|
|
todayHighlight: true
|
|
},
|
|
success: (response, newValue)=> {
|
|
// Handle success
|
|
},
|
|
error: (response) => {
|
|
// Handle error
|
|
}
|
|
});
|
|
|
|
// Select2 functionality (now bundled with x-editable)
|
|
|
|
$('#select2-test').editable({
|
|
type: 'select2',
|
|
url: 'demo/demo.php',
|
|
source: [
|
|
{id: 'us', text: 'United States'},
|
|
{id: 'gb', text: 'Great Britain'},
|
|
{id: 'ru', text: 'Russia'},
|
|
{id: 'de', text: 'Germany'},
|
|
{id: 'fr', text: 'France'},
|
|
{id: 'es', text: 'Spain'},
|
|
{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) {
|
|
// Handle success
|
|
},
|
|
error: function(response) {
|
|
// Handle error
|
|
}
|
|
});
|
|
|
|
})
|