Modifica l'output della selezione a discesa Select2 quando utilizzato con la libreria X-Editable di jQuery

Question

Ho cercato di utilizzare X-Editable http://vitalets.github.io/x-editable/ con Select2 https://select2.github.io/ per settimane senza molta fortuna.

Originariamente stavo cercando di caricare i dati dalla richiesta AJAX e quindi utilizzare la libreria, ma tutto ciò che potevo vedere era il vecchio codice che presumibilmente funzionava con le versioni precedenti di entrambe le librerie.

Per semplificare un po 'le cose che ho deciso di caricare i miei dati separatamente in modo che X-modificabili e Select2 hanno solo a che fare con una serie di dati che è già disponibile.

Il mio problema ora sta modificando la visualizzazione dei dati.

Per impostazione predefinita sono soddisfatto dell'aspetto del campo di modifica che assomiglia a "tag" selezionati.

Quando la modifica è completata e al caricamento iniziale della pagina, mostra i miei elementi selezionati come una stringa separata da virgole. Vorrei modificare quella parte per sembrare diversa.

Ho visto alcuni esempi che hanno funzionato come voglio ma non sembrano funzionare con le versioni più recenti.

Questo JSFiddle qui http://jsfiddle.net/jasondavis/j72k110m/ mostra il mio output desiderato e la funzionalità ... quasi, ma la cattura è questa demo sta usando le vecchie versioni della libreria Select2. Ha versione v3.4.4 Select2 e X-modificabile versione v1.5.1

L'ultima versione di Select2 è versione v4.0.0 X-modificabile sia aggiornato alla v1.5.1 come non è stato aggiornato in un istante.

---

Il caricamento iniziale e dopo aver selezionato il nuovo valore che dovrebbe assomigliare a questa sotto il che significa che avvolge il nostro valore selezionato in una span:

---

Quando si fa clic per modifica i valori selezionati, dovrebbe assomigliare a questo che assomiglia a "tag", tuttavia non dovrebbe mostrare la parte <span>!

---

In questo JSFiddle http://jsfiddle.net/jasondavis/N6bQE/320/
Ho aggiornato Select2 alla nuova versione e sto cercando di replicare la funzionalità dall'altro JSFiddle sopra, mostrando i valori selezionati come "tag".

Un altro problema con questa versione è che quando si selezionano i valori, non viene rimossa un'opzione dall'elenco a discesa. Quindi, anche se 1 elemento è già selezionato, viene comunque visualizzato come un'opzione per fare nuovamente clic su di esso!

L'altro problema è che i nuovi elementi selezionati non vengono aggiunti nella schermata di non modifica.

Più immagini qui sotto per mostrare cosa intendo ...

immagine sotto mostra gli elementi di carico schermo intial selezionati e anche gli oggetti che sono selezionati e non in edit-mode. Il problema è che non si sta aggiornando con nuovi elementi selezionati. Inoltre mostra del ID selezionato al posto di un titolo/nome

Il mio obiettivo finale è quello di utilizzare semplicemente Select2 sul mio campo X-modificabile per consentire la selezione di un utente assegnato. Gli utenti assegnati selezionati mostreranno un'immagine in miniatura gravatar e il nome utente.

Sia Select2 che X-Editable consentono l'uso di un output di stile modello per modificare l'output tuttavia quando lavorano insieme, la funzionalità predefinita è diversa e quelle di modifica dell'output non funzionano come quando eseguono libreria su di esso; s proprio.

So che si può fare perché le due librerie sono pensate per funzionare insieme, è solo questione di far funzionare le versioni più recenti di Select2 con la versione precedente di X-Editable che non è stata aggiornata in un molto tempo purtroppo!

Answer 1

Le jsfiddles finali che ero test su sono a https://jsfiddle.net/N6bQE/329/ (bootstrap-modificabile) e https://jsfiddle.net/N6bQE/331/ (poshytip modificabile).

Ecco alcune osservazioni che ho fatto durante il tentativo di rendere Select2 4.0.0 lavoro con X-modificabile.

1. Stavi imposta data-value-apples, oranges, pie (nota gli spazi), che è tecnicamente non è corretto. Gli ID devono corrispondere esattamente, ma a causa di uno sfortunato erroreuna funzione nelle versioni precedenti di Select2, gli spazi bianchi extra sono stati completamente ignorati.

   La rimozione degli spazi risolve il problema principale, che era Select2 che non corrispondeva correttamente alle opzioni (e di conseguenza non le visualizzava).

2. tuo source non conteneva alcuna dei valori che passavano attraverso data-value, quindi Select2 non aveva modo di visualizzarli. Riunendo alcuni degli attributi id, Select2 si è avvicinato di un passo alla visualizzazione dei valori selezionati quando è stato visualizzato il popover.

3. Si stava utilizzando sia tags e source, che X-modificabile non consente. Il plugin è apparso per dare priorità tags sopra source, quindi nulla è stato effettivamente passato in Select2 e la tua source è stato completamente ignorato.

4. ma questo non importa troppo, perché X-modificabile non visualizza i valori in modo corretto, in primo luogo. Noterai che lo data-value viene visualizzato come un singolo tag, anziché essere suddiviso e visualizzato come più tag. Per far sì che X-Editable collabori con questo, devi impostare separator: ',' nelle opzioni Select2.Sebbene questa opzione non sia più supportata per Select2, X-Editable ignora completamente l'opzione viewseparator in favore di questa.

5. Al fine di ottenere i tag per aggiornare dopo che vengono modificate, è necessario verificare se value nel metodo display è un array o meno. Questo perché X-Editable passa semplicemente una stringa al metodo display, invece dell'array che ci si aspetterebbe.