tracer/x-editable-bs5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix select2 library dependency checks

Browse Source 
- Added safety checks for select2 library availability
- Prevents TypeError when select2 library not loaded
- Falls back to regular input behavior when select2 unavailable
- Fixed getSeparator function to handle missing select2 defaults
This commit is contained in:
Micha
2025-07-28 12:54:17 +02:00
parent 9d84a1f21d
commit dda7550181
6 changed files with 104 additions and 329 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
demo/demo.js
View File

@@ -71,29 +71,29 @@ $(function() {
});
// Note: This would require select2 library to be loaded
// $('#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',
// select2: {
// placeholder: 'Select Country',
// allowClear: true
// },
// success: function(response, newValue) {
// console.log('Select2 success:', newValue);
// },
// error: function(response) {
// console.log('Select2 error:', response);
// }
// });
$('#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',
select2: {
placeholder: 'Select Country',
allowClear: true
},
success: function(response, newValue) {
console.log('Select2 success:', newValue);
},
error: function(response) {
console.log('Select2 error:', response);
}
});
})

58
dist/README.md vendored
View File

@@ -10,6 +10,7 @@ This project was created when we needed a **drop-in replacement** for x-editable
- **Bootstrap 5** compatibility
- **jQuery** support maintained
- **Select dropdowns** - fully functional
- **Select2 support** - advanced select with search/ajax
- **Date pickers** - using bootstrap-datepicker
- **Drop-in replacement** - minimal code changes needed
- **Streamlined codebase** - Bootstrap 5 only, legacy code removed
@@ -28,6 +29,7 @@ php -S 0.0.0.0:8000
The demo showcases:
- Select inputs with AJAX and static data sources
- Select2 inputs with search functionality (requires select2 library)
- Date picker functionality
- Basic in-place editing
@@ -91,6 +93,62 @@ $('#my-editable').editable({
});
```
## Select2 Support
This library includes built-in support for Select2 inputs, providing enhanced select functionality with search, AJAX loading, and more.
**Note:** You need to include the Select2 library separately, as it's not bundled with x-editable.
### Quick Select2 Setup
1. **Include Select2 library:**
```html
<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
```
2. **Use select2 type in your editable:**
```javascript
$('#my-select2').editable({
type: 'select2',
source: [
{id: 'us', text: 'United States'},
{id: 'gb', text: 'Great Britain'},
{id: 'de', text: 'Germany'}
],
select2: {
placeholder: 'Select Country',
allowClear: true
},
url: '/update-endpoint'
});
```
### Select2 with AJAX
```javascript
$('#ajax-select2').editable({
type: 'select2',
select2: {
placeholder: 'Search countries...',
minimumInputLength: 2,
ajax: {
url: '/search-countries',
dataType: 'json',
data: function (term) {
return { query: term };
},
results: function (data) {
return { results: data };
}
}
},
url: '/update-endpoint'
});
```
## Migration from Bootstrap 3
If you're migrating from the original x-editable:

2
dist/app.js vendored
View File

File diff suppressed because one or more lines are too long

300
dist/app.js.LICENSE.txt vendored
View File

@@ -20,303 +20,3 @@
*
* Date: 2023-08-28T13:37Z
*/
/*!****************************!*\
!*** ./src/inputs/list.js ***!
\****************************/
/*!****************************!*\
!*** ./src/inputs/text.js ***!
\****************************/
/*!******************************!*\
!*** ./src/inputs/select.js ***!
\******************************/
/*!********************************!*\
!*** ./src/inputs/abstract.js ***!
\********************************/
/*!********************************!*\
!*** ./src/inputs/textarea.js ***!
\********************************/
/*!*********************************!*\
!*** ./src/inputs/date/date.js ***!
\*********************************/
/*!************************************!*\
!*** ./src/bootstrap5-editable.js ***!
\************************************/
/*!**************************************!*\
!*** ./src/inputs/date/datefield.js ***!
\**************************************/
/*!*****************************************!*\
!*** ./src/element/editable-element.js ***!
\*****************************************/
/*!*******************************************!*\
!*** ./src/containers/editable-inline.js ***!
\*******************************************/
/*!********************************************!*\
!*** ./node_modules/jquery/dist/jquery.js ***!
\********************************************/
/*!********************************************!*\
!*** ./src/editable-form/editable-form.js ***!
\********************************************/
/*!*********************************************!*\
!*** ./src/containers/editable-popover5.js ***!
\*********************************************/
/*!**********************************************!*\
!*** ./src/containers/editable-container.js ***!
\**********************************************/
/*!**************************************************!*\
!*** ./node_modules/@popperjs/core/lib/enums.js ***!
\**************************************************/
/*!**************************************************!*\
!*** ./node_modules/@popperjs/core/lib/index.js ***!
\**************************************************/
/*!**************************************************!*\
!*** ./src/editable-form/editable-form-utils.js ***!
\**************************************************/
/*!***************************************************!*\
!*** ./node_modules/@popperjs/core/lib/popper.js ***!
\***************************************************/
/*!*******************************************************!*\
!*** ./node_modules/@popperjs/core/lib/utils/math.js ***!
\*******************************************************/
/*!*******************************************************!*\
!*** ./src/editable-form/editable-form-bootstrap5.js ***!
\*******************************************************/
/*!********************************************************!*\
!*** ./node_modules/@popperjs/core/lib/popper-lite.js ***!
\********************************************************/
/*!*********************************************************!*\
!*** ./node_modules/@popperjs/core/lib/createPopper.js ***!
\*********************************************************/
/*!*********************************************************!*\
!*** ./node_modules/@popperjs/core/lib/utils/within.js ***!
\*********************************************************/
/*!*********************************************************!*\
!*** ./node_modules/bootstrap/dist/js/bootstrap.esm.js ***!
\*********************************************************/
/*!***********************************************************!*\
!*** ./node_modules/@popperjs/core/lib/modifiers/flip.js ***!
\***********************************************************/
/*!***********************************************************!*\
!*** ./node_modules/@popperjs/core/lib/modifiers/hide.js ***!
\***********************************************************/
/*!***********************************************************!*\
!*** ./node_modules/@popperjs/core/lib/utils/debounce.js ***!
\***********************************************************/
/*!************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/modifiers/arrow.js ***!
\************************************************************/
/*!************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/modifiers/index.js ***!
\************************************************************/
/*!************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/utils/userAgent.js ***!
\************************************************************/
/*!*************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/modifiers/offset.js ***!
\*************************************************************/
/*!*************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/utils/getAltAxis.js ***!
\*************************************************************/
/*!**************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/utils/mergeByName.js ***!
\**************************************************************/
/*!***************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/contains.js ***!
\***************************************************************/
/*!***************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/utils/getVariation.js ***!
\***************************************************************/
/*!****************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js ***!
\****************************************************************/
/*!*****************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/instanceOf.js ***!
\*****************************************************************/
/*!*****************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/utils/computeOffsets.js ***!
\*****************************************************************/
/*!*****************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/utils/detectOverflow.js ***!
\*****************************************************************/
/*!*****************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/utils/orderModifiers.js ***!
\*****************************************************************/
/*!******************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/getNodeName.js ***!
\******************************************************************/
/*!******************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/modifiers/applyStyles.js ***!
\******************************************************************/
/*!******************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/utils/expandToHashMap.js ***!
\******************************************************************/
/*!*******************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/utils/getBasePlacement.js ***!
\*******************************************************************/
/*!*******************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/utils/rectToClientRect.js ***!
\*******************************************************************/
/*!********************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/getLayoutRect.js ***!
\********************************************************************/
/*!********************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/getNodeScroll.js ***!
\********************************************************************/
/*!********************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/getParentNode.js ***!
\********************************************************************/
/*!********************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/modifiers/computeStyles.js ***!
\********************************************************************/
/*!********************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/modifiers/popperOffsets.js ***!
\********************************************************************/
/*!*********************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/isScrollParent.js ***!
\*********************************************************************/
/*!*********************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/isTableElement.js ***!
\*********************************************************************/
/*!*********************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/modifiers/eventListeners.js ***!
\*********************************************************************/
/*!*********************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/utils/getFreshSideObject.js ***!
\*********************************************************************/
/*!*********************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/utils/mergePaddingObject.js ***!
\*********************************************************************/
/*!**********************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js ***!
\**********************************************************************/
/*!**********************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/getDocumentRect.js ***!
\**********************************************************************/
/*!**********************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/getOffsetParent.js ***!
\**********************************************************************/
/*!**********************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/getScrollParent.js ***!
\**********************************************************************/
/*!**********************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/getViewportRect.js ***!
\**********************************************************************/
/*!**********************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/getWindowScroll.js ***!
\**********************************************************************/
/*!**********************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/modifiers/preventOverflow.js ***!
\**********************************************************************/
/*!***********************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/getCompositeRect.js ***!
\***********************************************************************/
/*!***********************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/getComputedStyle.js ***!
\***********************************************************************/
/*!***********************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/isLayoutViewport.js ***!
\***********************************************************************/
/*!***********************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/utils/computeAutoPlacement.js ***!
\***********************************************************************/
/*!***********************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/utils/getOppositePlacement.js ***!
\***********************************************************************/
/*!************************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/listScrollParents.js ***!
\************************************************************************/
/*!*************************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/getDocumentElement.js ***!
\*************************************************************************/
/*!**************************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/getWindowScrollBarX.js ***!
\**************************************************************************/
/*!***************************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/getHTMLElementScroll.js ***!
\***************************************************************************/
/*!***************************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/utils/getMainAxisFromPlacement.js ***!
\***************************************************************************/
/*!***************************************************************************!*\
!*** ./node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.js ***!
\***************************************************************************/
/*!****************************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js ***!
\****************************************************************************/
/*!********************************************************************************!*\
!*** ./node_modules/@popperjs/core/lib/utils/getOppositeVariationPlacement.js ***!
\********************************************************************************/

2
dist/bootstrap5-editable/js/bootstrap-editable.js vendored
View File

File diff suppressed because one or more lines are too long

23
src/inputs/select2/select2.js vendored
View File

@@ -147,6 +147,12 @@ $(function(){
render: function() {
this.setClass();
// Check if Select2 is available
if (typeof $.fn.select2 === 'undefined') {
this.error = 'Select2 library is not included. Please include Select2 CSS and JS files.';
return;
}
//can not apply select2 here as it calls initSelection
//over input that does not have correct value yet.
//apply select2 only in value2input
@@ -209,6 +215,12 @@ $(function(){
value = value.join(this.getSeparator());
}
// Check if Select2 is available before using it
if (typeof $.fn.select2 === 'undefined') {
this.$input.val(value);
return;
}
//for remote source just set value, text is updated by initSelection
if(!this.$input.data('select2')) {
this.$input.val(value);
@@ -235,13 +247,18 @@ $(function(){
var $el = $(this.options.scope);
if (!$el.data('editable').isEmpty) {
var data = {id: value, text: $el.text()};
this.$input.select2('data', data);
if (typeof $.fn.select2 !== 'undefined' && this.$input.data('select2')) {
this.$input.select2('data', data);
}
}
}
}
},
input2value: function() {
if (typeof $.fn.select2 === 'undefined' || !this.$input.data('select2')) {
return this.$input.val();
}
return this.$input.select2('val');
},
@@ -274,7 +291,7 @@ $(function(){
},
getSeparator: function() {
return this.options.select2.separator || $.fn.select2.defaults.separator;
return this.options.select2.separator || ($.fn.select2 && $.fn.select2.defaults ? $.fn.select2.defaults.separator : ',');
},
/*
@@ -294,7 +311,7 @@ $(function(){
},
destroy: function() {
if(this.$input) {
if(this.$input && typeof $.fn.select2 !== 'undefined') {
if(this.$input.data('select2')) {
this.$input.select2('destroy');
}