Wie feuere ich einen neuen Ajax auf select2 new/remove tag event?

Question

Ich verwende den folgenden Ausschnitt ein neues select2 Tag der Ferne mit Ajax hinzufügen und ich möchte registrieren oder einige Aufzeichnungen meiner vielen vielen Tabelle auf neue Tag/entfernen Tag Ereignis entfernen

Die Tabelle sieht aus wie

--------------------------------- 
+--voucher_id--+|+--product_id--+ 
--------------------------------- 
+  123  | 566   + 
--------------------------------- 
+  156  | 566   + 
--------------------------------- 
+  123  | 426   + 
--------------------------------- 
+  156  | 516   + 
--------------------------------- 

Mein Javascript

$(".e6").select2({ 
    tags: true, 
    placeholder: 'placeholder', 
    minimumInputLength: 1, 

    ajax: { 
     url: 'searchProducts', 
     dataType: 'json', 
     data: function(term) { 
      return {q: term}; 
     }, 
     results: function(data) { 
      return {results: data}; 
     } 
    }, 
    createSearchChoice: function(term, data) { 
     if ($(data).filter(function() { 
      return this.computername.localeCompare(term) === 0; 
     }).length === 0) { 
      return {id: term, name: term}; 
     } 
    }, 
    formatResult: function(item, page) { 
     return item.computername; 
    }, 
    formatSelection: function(item, page) { 
     return item.computername; 
    } 
}); 

im zurück json ich auch eine Produkt-ID haben, und ich bin auf der Suche einen Weg, um eine neue ajax auf select2 Ereignis ausgelöst, aber ich kann nicht herausfinden, wo getan werden sollte speichern oder entferne Daten von meiner Tabelle.

einige Untersuchungen machen ich in der Lage bin, eine Funktion zu bauen, die oben genannten Aufzeichnungen auf dem Tisch aktualisieren würde und das funktioniert gut sofar

$('.e6').on("change", function(e){       
    console.log(ids); 
    console.log(gs); 
    $.ajax({ 
     type: "POST", 
     url: '/admin/?controller=vouchers&action=updateRelatedProducts', 
     data: {ids: ids, gs:gs}, 
     error: function() { 
      alert("error"); 
     } 
    });     
}); 

Aber ich habe Probleme mit anfänglicher vorhandenen Tags meine Eingabefeld aufzufüllen

Answer 1

Nicht getestet, sollte aber funktionieren:

$('.e6').on("change", function(e){ 
    if (e.removed) { 
     $.ajax({ 
      type: "POST", 
      url: '/admin/?controller=vouchers&action=updateRelatedProducts', 
      data: {id: e.removed.id, action: remove}, //Or you can e.removed.text 
      error: function() { 
       alert("error"); 
      } 
     }); 
    } 
    if (e.added) { 
     $.ajax({ 
      type: "POST", 
      url: '/admin/?controller=vouchers&action=updateRelatedProducts', 
      data: {id: e.added.id, action: add}, //Or you can e.added.text 
      error: function() { 
       alert("error"); 
      } 
     }); 
    } 

    //OR you can play with val data instead 
    if (e.val) { 
     $.ajax({ 
      type: "POST", 
      url: '/admin/?controller=vouchers&action=updateRelatedProducts', 
      data: {val: JSON.stringify(e.val)}, //Will send all the selected values 
      error: function() { 
       alert("error"); 
      } 
     }); 
    } 
} 

Answer 2

Gibt es eine Geige, wo Sie eine Version dieses Problems buchen können.

Basierend auf dem, was ich verstanden habe, würde das folgende Muster genügen?

function dynamicSelect2(id) { 
     $.ajax({ 
      url: 'data-url', 
      data: 'parameters', 
      dataType: 'json' 
     }).done(function() { 
      //Create the Select2 with necessary data on the element "id" passed. 
     }).always(function() { 
      //Attach other events.. 
     }); 
    } 

Es ist möglich, die gesamte select2 Box dynamisch und hängen Ereignisse auf es auf diese Weise zu erstellen. Wenn Sie dies innerhalb einer Sperrung tun, haben Sie Zugriff auf Variablen, die Sie vor Ihren Ajax-Aufrufen definiert haben.