При попытке создать настраиваемый адаптер данных для поля со списком select2, что вызывает "Uncaught TypeError, разделение baseName не является функцией"? - PullRequest
Новая
       46

При попытке создать настраиваемый адаптер данных для поля со списком select2, что вызывает "Uncaught TypeError, разделение baseName не является функцией"?

0 голосов
/ 04 июня 2019

Я хотел бы использовать выпадающий список select2 с разбиением на страницы для локального массива данных (без вызова ajax). С этой целью я смотрю на пользовательский DataAdapter . Код для инициализации пользовательского адаптера не работает.

Я пытался создать специальный адаптер данных, подобный этому ответу .

При добавлении адаптера пользовательских данных к объекту select2 

$.fn.select2.amd.require(
        'select2/data/customAdapter', ['select2/data/array', 'select2/utils']

Я получаю эту ошибку (в Chrome и Firefox) 

jquery-3.4.1.js:3850 Uncaught TypeError: baseName.split is not a function
    at normalize (select2.js:80)
    at makeMap (select2.js:275)
    at Object.req [as require] (select2.js:394)
    at HTMLDocument.<anonymous> (index.html:30)
    at mightThrow (jquery-3.4.1.js:3557)
    at process (jquery-3.4.1.js:3625)

В крае ошибка 

Object doesn't support property or method 'split'

и это предупреждение (chrome, firefox, edge) 

jquery-3.4.1.js:3841 jQuery.Deferred exception: baseName.split is not a function TypeError: baseName.split is not a function
    at normalize (file:///C:/code/select2/customdata/js/select2.js:80:46)
    at makeMap (file:///C:/code/select2/customdata/js/select2.js:275:20)
    at Object.req [as require] (file:///C:/code/select2/customdata/js/select2.js:394:28)
    at HTMLDocument.<anonymous> (file:///C:/code/select2/customdata/index.html:30:24)
    at mightThrow (file:///C:/code/select2/customdata/js/jquery-3.4.1.js:3557:29)
    at process (file:///C:/code/select2/customdata/js/jquery-3.4.1.js:3625:12) undefined

Я думал, что это связано с версией jquery. Я пробовал с jquery 3.4.1 и jquery 2.2.4. Версия 2.2.4 не имеет предупреждения только об ошибке.

У меня ощущение, что это связано с amd.require.

Может ли кто-нибудь помочь, пожалуйста?

Вот мой образец 

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select2 With Custom Data Adapter</title>
  <link href="./css/select2.min.css" rel="stylesheet" />
</head>
<body>

  <select class="dropdownbox" name="state">
    <option value="abc">abc</option>
    <option value="def">ghi</option>
    <option value="ghi">ghi</option>
    <option value="jkl">jkl</option>
  </select>

  <script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
  <script type="text/javascript" src="./js/select2.js"></script>

  <script>

    $(document).ready(function () {

      //$.fn.select2.defaults.set('amdBase', 'select2/');

      console.log("before");
      $.fn.select2.amd.require(
        'select2/data/customAdapter', ['select2/data/array', 'select2/utils'],
        function (ArrayData, Utils) {
          function CustomDataAdapter($element, options) {
            CustomDataAdapter.__super__.constructor.call(this, $element, options);
          }

          Utils.Extend(CustomDataAdapter, ArrayData);

          CustomDataAdapter.prototype.current = function (callback) {
            console.log("current");
          };

          CustomDataAdapter.prototype.query = function (params, callback) {
            console.log("query");
          };

          return CustomDataAdapter;

        });
      console.log("after");


      var customAdapter = $.fn.select2.amd.require('select2/data/customAdapter');


      $('.dropdownbox').select2({
        dataAdapter: customAdapter
      });
    });
  </script>  
</body>  
</html>

Версия

  • select2: 4.0.7 (я не могу использовать одну из более старых версий select2 с опцией запроса).
  • jquery: 3.4.1

Ответы [ 2 ]

0 голосов
/ 05 июня 2019

опечатка.

Это должно быть define вместо require. 

$.fn.select2.amd.define(
    'select2/data/customAdapter', ['select2/data/array', 'select2/utils']

После просмотра этого вопроса на форуме select2 и образца кода

Итак, вот рабочий пример (похожий на пример кода в ссылке) 

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select2 With Custom Data Adapter</title>
  <link href="./css/select2.min.css" rel="stylesheet" />
</head>
<body>

  <select id="dropdownboxid">
    <option value="abc">abc</option>
    <option value="def">ghi</option>
    <option value="ghi">ghi</option>
    <option value="jkl">jkl</option>
  </select>

  <script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
  <script type="text/javascript" src="./js/select2.js"></script>
  <script>

    $(document).ready(function () {

      console.log("before");
      $.fn.select2.amd.define(
        'select2/data/customAdapter', ['select2/data/array', 'select2/utils'],
        function (ArrayData, Utils) {
          function CustomDataAdapter($element, options) {
            CustomDataAdapter.__super__.constructor.call(this, $element, options);
          }

          Utils.Extend(CustomDataAdapter, ArrayData);

          CustomDataAdapter.prototype.current = function (callback) {
            console.log("current");
          };

          CustomDataAdapter.prototype.query = function (params, callback) {
            console.log("query");
          };

          return CustomDataAdapter;

        });
      console.log("after");


      var customAdapter = $.fn.select2.amd.require('select2/data/customAdapter');


      $('#dropdownbox').select2({
        dataAdapter: customAdapter
      });

    });
  </script>
</body>
</html>
0 голосов
/ 04 июня 2019

Просто предположение, но разве не должно быть что-то подобное? 

$.fn.select2.amd.require(
  'select2/data/customAdapter',
  function(customAdapter) {
    $('.dropdownbox').select2({
      dataAdapter: customAdapter,
    });
  }
);

Или загрузите все дополнительные модули одновременно: 

$.fn.select2.amd.require(
  [
    'select2/data/customAdapter',
    'select2/data/array',
    'select2/utils',
  ],
  function(customAdapter, ArrayData, Utils) {
    $('.dropdownbox').select2({
      dataAdapter: customAdapter,
    });
    function CustomDataAdapter($element, options) {
      CustomDataAdapter.__super__.constructor.call(
        this,
        $element,
        options
      );
    }
    //rest of the code
...