Jak wypalić nowy ajax w zdarzeniu select2 new/remove tag?

Question

używam następujący fragment kodu, aby dodać nową select2 tag zdalnie z ajax i chcę się zarejestrować lub usunąć niektóre zapisy mój wiele do wielu tabeli na nowy tag/usunąć tagu zdarzenia

Tabela wygląda

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

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

w zwróconym json mam identyfikator produktu, jak również i szukam sposobu na ogień nowy ajax na select2 zdarzenia, ale nie mogę dowiedzieć się, gdzie należy zrobić, aby zapisz lub usuń dane z mojej tabeli.

wprowadzenie pewnych badań udało mi się zbudować funkcję, która będzie aktualizować rekordy w tabeli powyżej i który działa dobrze 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"); 
     } 
    });     
}); 

ale mam problemy, aby wypełnić moje pole wejściowe z początkowych istniejących tagów

Answer 1

nie testowano, ale powinno działać:

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

Czy jest skrzypce, w którym można opublikować wersję tego problemu.

W oparciu o to, co rozumiem, czy wystarczy poniższy wzór?

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

Możliwe jest dynamiczne tworzenie całego pola select2 i dołączanie do niego zdarzeń w ten sposób. Jeśli zrobisz to w ramach zamknięcia, będziesz miał dostęp do zmiennych, które zdefiniowałeś przed wywołaniami ajax.