Загрузочный x-редактируемый. Изменение типа данных программным способом (удалить тип данных select2)

Я использую bootstrap x-editable https://vitalets.github.io/x-editable/index.html

Это мой html-код:

<a href="#" data-name="category" class="addon" data-value="{{$cat->id}}"
   data-pk="{{$cat->id}}" data-type="select2" data-title="Favor llenar los campos"></a>

Код javascript:

$('.addon').editable({
    placement: 'bottom',
    mode: 'inline',
    showbuttons: false,
    source: categories,
    select2: {
        width: 200
    },
    display: function (value) {
        var elem = $.grep(categories, function (o) {
            return o.id == value;
        });

        $(this).attr('data-value', value);
        $(this).parent().parent().find('.btnEdit').attr('href', '/wizard_product/' + product_id + '/category/' + value + '/edit');

        return $(this).text(elem[0].text);
    }
});

Но. Я хочу изменить программно на обычный x-редактируемый элемент без параметров select2.

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

$('a.addon').attr('data-type', 'text');

Также попытался:

$('a.addon').select2('destroy');

Также попытался:

$('a.addon').editable({type: 'text'});

Но ни один из вариантов не работает. select2 все еще активен. Как удалить опции select2 для x-editable?  Можете ли вы мне помочь?

ОТВЕТЫ

Ответ 1

Вам нужно будет объединить все, что вы пробовали, - уничтожить экземпляр X-editable по умолчанию, изменить значение data-type и восстановить X-editable для этого элемента.

Самый простой пример реализации:

$('.addon').editable('destroy').data('type', 'text').editable({type: 'text'});

На практике вам нужно будет вернуть другие настройки при повторном применении X-editable в виде текста:

$('.addon').editable('destroy');
$('.addon').data('type', 'text');
$('.addon').editable({
                placement: 'bottom',
                mode: 'inline',
                showbuttons: false,
                source: categories,
                type: 'text',
                display: function (value) {
                    var elem = $.grep(categories, function (o) {
                        return o.id == value;
                    });
                    $(this).attr('data-value', value);

                    $(this).parent().parent().find('.btnEdit').attr('href', '/wizard_product/' + product_id + '/category/' + value + '/edit');
                    return $(this).text(elem[0].text);
                }
            });

Edit:

Я собрал демоверсию, которая отражает вашу настройку, насколько я мог бы сказать, и она работает:

var categories = [{
  id: 'html',
  value: 'html',
  text: 'html'
}, {
  id: 'javascript',
  value: 'javascript',
  text: 'javascript'
}];

setupSelect2();

$('#useSelect2').click(function() {
  $('.addon')
    .data('type', 'select2')
    .editable('destroy');

  setupSelect2();
});

$('#useText').click(function() {
  $('.addon')
    .data('type', 'text')
    .editable('destroy');

  setupText();
});

function setupSelect2() {
  $('.addon').editable({
    mode: 'inline',
    placement: 'bottom',
    showbuttons: false,
    source: categories,
    select2: {
      width: 200
    },
    display: function(value) {
      var elem = $.grep(categories, function(o) {
        return o.id == value;
      });

      $(this).attr('data-value', value);

      if (elem[0])
        return $(this).text(elem[0].text);
    }
  });
}

function setupText() {
  $('.addon').editable({
    mode: 'inline',
    placement: 'bottom',
    type: 'text',
    showbuttons: false,
    source: categories,
    display: function(value) {
      var elem = $.grep(categories, function(o) {
        return o.id == value;
      });

      $(this).attr('data-value', value);

      if (elem[0])
        return $(this).text(elem[0].text);
    }
  });
}
<script src="https://vitalets.github.io/x-editable/assets/jquery/jquery-1.9.1.min.js"></script>
<link href="#" onclick="location.href='https://vitalets.github.io/x-editable/assets/select2/select2.css'; return false;" rel="stylesheet" />
<script src="https://vitalets.github.io/x-editable/assets/select2/select2.js"></script>
<link href="#" onclick="location.href='https://vitalets.github.io/x-editable/assets/bootstrap300/css/bootstrap.css'; return false;" rel="stylesheet" />
<script src="https://vitalets.github.io/x-editable/assets/bootstrap300/js/bootstrap.js"></script>
<link href="#" onclick="location.href='https://vitalets.github.io/x-editable/assets/x-editable/bootstrap3-editable/css/bootstrap-editable.css'; return false;" rel="stylesheet" />
<script src="https://vitalets.github.io/x-editable/assets/x-editable/bootstrap3-editable/js/bootstrap-editable.js"></script>
<link href="#" onclick="location.href='https://vitalets.github.io/x-editable/assets/select2/select2-bootstrap.css'; return false;" rel="stylesheet" />

<h3>Select 2</h3>
<a href="#" class="addon" data-type="select2" data-pk="1" data-title="Enter tags"></a>
<br>
<br>
<button id="useSelect2" class="btn btn-default">Use Select2</button>
<button id="useText" class="btn btn-default">Use Text</button>