Select2 utilizza un URL Ajax dinamico su chiamata

Question

Uso il plugin Select2 (v 3.5.2) con Ajax per caricare in modo dinamico gli elementi nell'elenco.

Ho un problema tra l'inizializzazione di Select2 (dove è impostata una proprietà url nell'assistente Ajax) e il momento in cui viene effettuata la chiamata ajax, questo URL potrebbe dover essere modificato.

così ho qualcosa di simile:

$box.select2({ 
    containerCssClass: "form-control" 
    minimumInputLength: 0, 
    allowClear: true, 
    ajax: { 
     url: someUrl, 
     dataType: 'json', 
     quietMillis: 100, 
... 
} 

io non riesco a capire come, quando, dove poter modificare il valore ajax.url prima che lancia.

L'aiuto di Select2 dice:

Select2 utilizza la funzione di jQuery $.ajax per eseguire la chiamata remota per impostazione predefinita. Una funzione alternativa transport può essere specificata nelle impostazioni ajax oppure è possibile creare un'implementazione completamente personalizzata fornendo una funzione personalizzata query invece di utilizzare l'helper ajax.

Ma non riesco a trovare alcun esempio su come farlo.

Grazie in anticipo per qualsiasi aiuto. Molto apprezzato.

Answer 1

Non riesco a capire come, quando, dove cambiare il valore di ajax.url prima del suo avvio.

L'opzione ajax.url può essere specificato come stringa statica o un metodo che restituisce una in entrambi Selez2 3.5.xe 4.0.0.

$("select").select2({ 
    ajax: { 
    url: function() { 
     return UrlHelper.RemoteAPI(); 
    } 
    } 
}); 

Questo è utile per modificare l'URL di base , per esempio quando l'URL viene determinata in fase di esecuzione o si genera automaticamente un metodo diverso. Se è necessario modificare i parametri di query , ad esempio quello utilizzato per inviare il termine di ricerca, è necessario sostituire l'opzione ajax.data.

$("select").select2({ 
    ajax: { 
    data: function (args) { 
     // args is the search term in 3.5.x 

     // args is an object containing the query parameters in 4.0.0 
     // args.term is the search term in 4.0.0 
     return { 
     search: args.term || args; 
     }; 
    } 
    } 
}); 

I dati qui saranno aggiunti come parametri di ricerca di default, e saranno trasmessi come corpo della richiesta se il tipo di metodo passa da GET (default) ad altro.

Select2 utilizza la funzione di jQuery $ .ajax per eseguire la chiamata remota per impostazione predefinita. È possibile specificare una funzione di trasporto alternativa nelle impostazioni ajax oppure è possibile creare un'implementazione completamente personalizzata fornendo una funzione di query personalizzata anziché utilizzare l'helper ajax.

Ma non riesco a trovare alcun esempio su come farlo.

Select2 consente di utilizzare un altro trasporto AJAX modificando l'opzione ajax.transport.

In 3.5.2, questo deve essere un metodo compatibile con $.ajax, quindi deve essere in grado di prendere un oggetto contenente i callback success e failure.

$("select").select2({ 
    ajax: { 
    transport: function (args) { 
     // args.success is a callback 
     // args.failure is a callback 

     // should return an object which has an `abort` method. 
     return $.ajax(args); 
    } 
    } 
}); 

In 4.0.0, questo deve essere un metodo che prende un oggetto params (lo stesso passato a ajax.data), un callback success, e un callback failure.

$("select").select2({ 
    ajax: { 
    transport: function (params, success, failure) { 
     var $request = $.ajax(params); 

     $request.then(success); 
     $request.fail(failure); 

     return $request; 
    } 
    } 
}); 

Answer 2

Molto semplice codice JavaScript per gestire lo stesso, può essere utilizzato in Suitescript (Netsuite) anche.

// prepare your dynamic URL inside this method and return 
function getURL() { 
    return url + params; 
} 

// While binding the select2 with the dropdown set url to call a anonymous function which internally calls another function. 
jQuery("select.itemDropDown").select2({ 
    placeholder: "Select an item", 
    width: "200px", 
    minimumInputLength: 3, 
    ajax: { 
     url: function() { 
      return getURL() 
     }, 
     dataType: 'json' 
    } 
});