Use Select2 and X-Editable with the Latest Versions

Question

All the online examples that I see show how to use X-Editable using the Select2 library, using older versions of select2.

X-Editable - http://vitalets.imtqy.com/x-editable/ using Select2 - https://select2.imtqy.com/ already without much cost.

Has anyone received these 2 libraries recently with versions released last year, even for collaboration?

Answer 1

Select2 4.0.0 is not compatible with X-Editable, and no support is expected in the future.

Back in January I created a ticket about it , and there was no response from the attendants. The X-Editable project is currently frozen and looking for companions.

Answer 2

I recently ran into this problem and came up with a cheat. It uses the standard "select" and turns it into select2 when showing:

$('#stages').editable({ source: [ {value: 1, text:'ahaa'}, {value: 2, text: 'ohooo'} ] }).on('shown', function(e, editable){ editable.input.$input.select2({ width: 250, minimumResultsForSearch: Infinity }); editable.input.$input.select2('val', editable.input.$input.val()); }); 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script> <link href="http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script> <a href="#" id="stages" data-type="select" data-placement="right" class="editable editable-click" data-value="1" data-title="Select something"></a> 

Answer 3

I got the latest version of Select2 (4.0.3) for working with x-editable.

Use this x-editable plug (not by me, one of the authors of Select2) https://github.com/select2/x-editable

And then for what you selected in the js file, find this line:

 tpl:'<input type="hidden">', 

and change to this:

 tpl:'<select multiple></select>', 

Answer 4

Also having hit this issue in a recent project, I created a special extension specifically for select2 version 4.0.2 that works with x-editable. I also added the possibility of having unique dropdown data for each row, if necessary.

Blog entries and downloads are available at www.fifthmorrison.com

I agreed to the excellence of this plugin, and if anyone has the time to accept it, it would definitely be appreciated here.

Hope this helps at the same time!