Displaying image within x editable when input type is select2

Question

I got problem with displaying in x-editable html img generated in the formatSelection of the select2.

Select2 dropdown displays correctly images, but x-editable doesn't.

I have:

<a href="#" class="editable-select" data-pk="10" data-url="/my_url/1" data-name="my_data_id" data-value="1" data-type="select2"/></a>

<script>
    function format(state) {
        var result = "";
        if(state.id){
            result = '<img src="/path_to_img/et'+state.id+'.png"/>';
        }
        return result;
    }

    $('.editable-select').editable({
        source: [
            {id: '1', text: 'option_1'},
            {id: '2', text: 'option_2'},
            {id: '3', text: 'option_3'},
        ],
        select2: {
            formatResult: format,
            formatSelection: format,
            escapeMarkup: function (m) {return m; }
        }
    });
</script>

As a result I have editable which displays

<img src="/path_to_img/et1.png"/>

as pure text instead of displaying image et1.png.

The reason for this is x-editable which assigns whatever text (pure or formatted) it gets from select2 formatSelection to editable component as text through $(element).text(text).

If formatted text were assigned through $(element).html(text) image would have been displayed instead of text.

What would be the best way around this to make x-editable assign correctly html formatted content to element text?

Answer 1

An example with Awesome icons font (can be easily formated to <img> tag instead of <i>)

    var icons = [];

    $.each({
        "compass" : "icon-compass", 
        "eur" : "icon-eur", 
        "dollar" : "icon-dollar", 
        "yen" : "icon-yen", 
        "won" : "icon-won", 
        "file-text" : "icon-file-text", 
        "sort-by-attributes-alt" : "icon-sort-by-attributes-alt", 
    }, function (k, v) {
        icons.push({
            id: k,
            style: v
        });
    });


    function format(icon) {
        if (!icon.id) return icon.style;
        return "<i class='icon-" + icon.id + "'></i> " + icon.style;
    }

    $('#awsome_icons_select').editable({
        inputclass: 'form-control input-medium select2',
        select2: {
            allowClear: true,
            formatResult: format,
            formatSelection: format,
            escapeMarkup: function (m) {
                return m;
            }
        },
        source: icons,
        display: function (value) {
            if (!value) {
                $(this).empty();
                return;
            }
            var html = "<i class='icon-" + value + "'></i> ";
            $(this).html(html);
        }
    });

This should do the trick for image:

   var countries= [];
    $.each({
        "US" : "USA", 
        "RU" : "Russia", 
        "DK" : "Denmark", 
        "FR" : "France", 
        "PL" : "Poland", 
        "DE" : "Germany", 
        "GB" : "Great Britain", 
    }, function (k, v) {
        countries.push({
            id: k,
            state: v
        });
    });


    function format(country) {
        if (!country.id) return country.state;
        return "<img src='path_to_images/" + country.id + ".png' /> " + country.state;
    }

    $('#countries_select').editable({
        inputclass: 'form-control input-medium select2',
        select2: {
            allowClear: true,
            formatResult: format,
            formatSelection: format,
            escapeMarkup: function (m) {
                return m;
            }
        },
        source: countries,
        display: function (value) {
            if (!value) {
                $(this).empty();
                return;
            }
            var html = "<img src='path_to_images/" + value + ".png' /> ";
            $(this).html(html);
        }
    });