Не удается прочитать свойство 'select2' из null с опцией изображения - PullRequest
Новая
       23

Не удается прочитать свойство 'select2' из null с опцией изображения

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

привет, я пытаюсь добавить изображение в раскрывающемся списке. Я использую select2 lib для создания моего списка.

select2 Версия: 3.5.4 (я не могу обновить)

ОБНОВЛЕНИЕ мой код привет, спасибоза вашу помощь ... @ SachaM78 я обновляю свой код 

    jQuery(document).ready(function() {

        fcfield_addrint.initAutoComplete("custom_field17_0", "field17");
        fcfield_addrint.initMap("custom_field17_0", "field17");

        // load image in select
        function format(state) {
        console.log(state);
        if (!state.id) return state.text; // optgroup custom_field17_0_custom_marker
        return (
          '<img class="fla" src="images/icons/' +
          state.id.toLowerCase() +
          '.png"/>' +
          state.text
        );
      }
      $("#custom_field17_0_custom_marker").select2({
        formatResult: format,
        formatSelection: format,
        escapeMarkup: function(m) {
          return m;
        }
      });

    });

и 

<select id="custom_field17_0_custom_marker" name="custom[field17][0][custom_marker]" class="fc_gm_custom_marker" aria-invalid="false">
    <option value="">Select</option>
    <option value="http://localhost/flexi-dev/\images/icons-map/2hand.png">2hand.png</option>
    <option value="http://localhost/flexi-dev/\images/icons-map/360degrees.png">360degrees.png</option>
    <option value="http://localhost/flexi-dev/\images/icons-map/_readme-license.txt">_readme-license.txt</option>
    <option value="http://localhost/flexi-dev/\images/icons-map/abduction.png">abduction.png</option>
    <option value="http://localhost/flexi-dev/\images/icons-map/aboriginal.png">aboriginal.png</option>
    <option value="http://localhost/flexi-dev/\images/icons-map/accesdenied.png">accesdenied.png</option>
</select>

, которые возвращают

index.php? option = com_flexicontent & task= item.edit & view = item & id = 13: 824 Uncaught TypeError: Невозможно прочитать свойство 'select2' из null в HTMLDocument.(index.php? option = com_flexicontent & task = item.edit & view = item & id = 13: 824) в u (jquery.min.js? a84f5770d385cc79fd5efcfeaebe6f82: 2) в Object.fireWith [as resolWith] (jquery.min.js) в Function.ready (jquery.min.js? a84f5770d385cc79fd5efcfeaebe6f82: 2) в HTMLDocument._ (jquery.min.js? a84f5770d385cc79fd5efcfeaebe6f82: 2)

1 Ответ

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

Только что посмотрел ваш код, и я обнаружил несколько проблем, которые могут как-то привести к ошибке, с которой вы столкнулись.

  1. select2() необходимо вызвать для элемента <select>, но сейчасВы называете это на элементе <div>.С расширенным форматированием вы можете применить его к любому элементу, но в настоящее время я думаю, что он вам не понадобится и использовать элемент SELECT по умолчанию.
  2. В вашем скрытом <select> отсутствует элемент </select>, и поэтомуНеправильно.
  3. Ваша функция format() использует неправильное экранирование: вы используете двойные кавычки вокруг строки, но затем экранируете одинарные кавычки внутри строки.Также в вашей строке есть акцент, который, кажется, не там.

Изменено HTML код : 

<select id="custom_field51_0_custom_marker" name="custom[field51][0][custom_marker]" 
        class="use_select2_lib fc_gm_custom_marker" tabindex="-1" title="Custom icon">
    <option value="">Sélectionner</option>
    <option value="C:\wamp64\www\flexidev/images/icons/1.png">1.png</option>
    <option value="C:\wamp64\www\flexidev/images/icons/2.png">2.png</option>
    <option value="C:\wamp64\www\flexidev/images/icons/3.png">3.png</option>
    <option value="C:\wamp64\www\flexidev/images/icons/4.png">4.png</option>
    <option value="C:\wamp64\www\flexidev/images/icons/5.png">5.png</option>    
</select> <!-- added missing end of SELECT

Изменено JSкод : 

jQuery(document).ready(function() {
  // load image in select
  function format(state) {
    console.log(state);
    if (!state.id) return state.text; // optgroup
    return (
      '<img class="fla" src="images/icons/' +
      state.id.toLowerCase() +
      '.png"/>' +
      state.text
    );
  }
  $("#custom_field51_0_custom_marker").select2({
    formatResult: format,
    formatSelection: format,
    escapeMarkup: function(m) {
      return m;
    }
  });
});

Текущий результат:

Demo image

Я создал Codepen с отображенным <select>, который показываетотсутствующие символы изображения в раскрывающемся списке, так как указанные изображения недоступны в Интернете.

...