(X-Editierbar) mit (Select2 Tags) funktioniert nicht, kann die aktuellen Tags nicht füllen und verfolgen und hinzugefügt/entfernt Tags

Question

Ich versuche, X-Editierbares Plugin mit Select2 Tags-Option zu bekommen, wo ich arbeite kann einige Tags von einem Array-Objekt, das ich vom Server abrufe, auffüllen.

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 
    } 
}); 

Wie es funktionieren soll:

• Benutzer können nur hinzufügen Tags data.assetTags whic h sind erhältlich bei data.availableTags
• Benutzer entfernen können alle Tags von data.assetTags

So was auch immer Änderungen getan wird, sollte es synchron mit data.assetTags sein und das ist, was ich wird zurück zum Server gesendet.

Hier ist, was ich gerade erreicht habe, nicht sicher, wo ich falsch liege! hoffentlich kann mir jemand helfen mit diesem

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

Vielen Dank

Answer 1

Vielleicht sollten Sie diese Struktur in mehrere Tags folgen mit x-editierbar: https://jsfiddle.net/emo_noel10/dLeumnpg/25/ und http://jsfiddle.net/dplanella/N6bQE/36/.

Versuchen Sie $ AssetsTag mit der div Klasse zu ändern, d. H.: $('.editable').editable({});. Und versuchen Sie, das div Tag mit span Tag zu ändern.

Ich bin nur neu in der X-editierbaren Bibliothek, teilen nur meine Erkenntnisse. Lass es mich wissen, wenn es funktioniert. Und übrigens, antworten Sie bitte hier: (How to save data and to add new tag and its data from select 2 multiple select tag) Wenn Sie eine Idee haben, wie Sie neue Tags in diesem Link https://jsfiddle.net/emo_noel10/dLeumnpg/25/ hinzufügen. Vielen Dank.