Bootstrap x-editable。以编程方式更改数据类型（删除select2数据类型）

Question

I'm, using bootstrap x-editable https://vitalets.github.io/x-editable/index.html

This is my html code:

<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 code:

$('.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);
    }
});

But. I want to change programmatically to normal x-editable element without the select2 options.

I have tried with jquery to change the data-type attribute of the a element to text, but it does not work.

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

Also tried:

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

Also tried:

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

But neither options work. select2 is still active. How can I remove select2 options of x-editable? Can you help me please

Answer 1

You will have to combine the things that you've tried - destroy the default X-editable instance, change the data-type value, and reinstate X-editable on that element.

The most simple implementation/example would be:

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

In practice, you'll have to put your other settings back when you re-apply X-editable as text:

$('.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:

I've put together a demo that mirrors your setup as best I could tell and it seems to work:

 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="https://vitalets.github.io/x-editable/assets/select2/select2.css" rel="stylesheet" /> <script src="https://vitalets.github.io/x-editable/assets/select2/select2.js"></script> <link href="https://vitalets.github.io/x-editable/assets/bootstrap300/css/bootstrap.css" rel="stylesheet" /> <script src="https://vitalets.github.io/x-editable/assets/bootstrap300/js/bootstrap.js"></script> <link href="https://vitalets.github.io/x-editable/assets/x-editable/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" /> <script src="https://vitalets.github.io/x-editable/assets/x-editable/bootstrap3-editable/js/bootstrap-editable.js"></script> <link href="https://vitalets.github.io/x-editable/assets/select2/select2-bootstrap.css" 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>