(X-Editable) with (Select2 Tags) not working, Can't populate the current tags and keep track of and added/removed tags

Question

I'm trying to get X-Editable plugin with Select2 Tags option to work where I can populate some tags from an array object which I'm retrieving from server.

HTML

<div class="container">
    <table>
    <tr>
        <td>Name:</td>
        <td><div class="editable" data-asset="name"></div></td>
    </tr>
  <tr><td>Description</td><td><div class="editable" data-type="textarea" data-asset="description"></div></td></tr>
    <tr>
        <td>Tags:</td>
        <td>
            <div class="editable" data-asset="tags"></div>
            <button id="asset-button-tags-edit">Edit Tags</button>
        </td>
    </tr>
    </table>
</div>

JavaScript:

data = {
///...

  // current tags <- user can add and remove tags
    assetTags: [{
  '778': 'Racer',
  '456': 'BMW',
  '112': 'M3'
  }],

  // available tags <- user could only add tags from this list
    availableTags: [{
  '345': 'Winner',
  '789': 'Boy Racer',
  '101': 'Boy Racer',
  '009': 'Orange',
  '778': 'Racer',
  '456': 'BMW',
  '112': 'M3'
  }]

///...
}

$assetTags.editable({ 
    type: 'select2',
    pk: 1,
    autotext : 'always',
    source : getSource(),
    value : data.assetTags,
    emptytext: 'None',
    display: function(value, sourceData) {
       var html = data.assetTags,
           checked = $.fn.editableutils.itemsByValue(data.assetTags, data.assetTags, 'id');
       if(checked.length) {
           $.each(checked, function(i, v) { html.push($.fn.editableutils.escape(v.text)); });
           $(this).html(html.join(', '));
       }
       else {
           $(this).empty(); 
       }
    },
    select2: {
        multiple : true,
        initSelection : data.assetTags
    }
});

How it should work:

• User could only add tags to data.assetTags which are available at data.availableTags
• User could remove all the tags from data.assetTags

So whatever changes is done, it should be in sync with data.assetTags and that's what I will be sending back to the server.

Here is what I've currently achieved, not sure where I'm going wrong! hopefully somebody could help me with this :)

DEMO: http://jsfiddle.net/Farzad/20e6e1os/10/

Many thanks

Answer 1

Maybe you should follow this structure in multiple tags using x-editable: https://jsfiddle.net/emo_noel10/dLeumnpg/25/ and http://jsfiddle.net/dplanella/N6bQE/36/.

Try to change $assetsTag with the div class i.e: $('.editable').editable({});. And try to change the div tag with span tag.

I'm just new to the x-editable library, just sharing my learnings. Let me know if it is working. And btw, please answer here: (How to save data and to add new tag and its data from select 2 multiple select tag) if you have an idea on how to add new tags in this link https://jsfiddle.net/emo_noel10/dLeumnpg/25/. Thanks.