JQuery seleziona più postazioni concatenate

Question

Un utente deve selezionare gli host dopo aver selezionato alcuni gruppi. Ho creato una selezione concatenata con lo JQuery chained remote Plugin per selezionare Host tramite Gruppi. Il codice seguente viene utilizzato e lavorando bene:

$('#hosts').remoteChained({ 
    parents: "#hosts_group", 
    url: "ajax/getHosts" 
}); 

<select id="hosts_group" name="hosts_group" class="form-control"> 
     <option value="">Bitte Gruppe selektieren</option> 
     <option value="1>Some Groups</option> 
    </select> 

    <select id="hosts" name="hosts"></select> 

Ma il risultato finale dovrebbe fornire un duallistbox per gli ospiti in cui un utente può selezionare Host da qualsiasi gruppo. Ho provato ad aggiungere il tag multiplo per i padroni di casa di selezione e l'aggiunta di un JQuery DuallistBox tramite il seguente frammento:

$('#hosts').remoteChained({ 
    parents: "#hosts_group", 
    url: "ajax/getHosts" 
}).DualListBox({json: false}); 

La scatola duallist viene visualizzata bene, ma non gli host vengono visualizzati quando si seleziona un gruppo.

JSON dati è simile al seguente:

[ 
    {'name': 'host1', 'id': '1'}, 
    {'name': 'host2', 'id': '2'} 
] 

Quando si seleziona un gruppo diverso, il JSON contiene anche i diversi host. Il plugin di selezione concatenato richiede i dati tramite la seguente richiesta: ajax/getHosts /? Hosts_group = selectedId

L'utilizzo della selezione concatenata con una selezione multipla normale funziona correttamente. Il problema sta visualizzando i dati JSON, che differiscono per ogni selezione, nella casella di Duallist.

Ho provato a creare un esempio JsFiddle, ma non funziona, perché la libreria esterna non verrà caricata e non capisco come posso fornire manualmente JSON tramite selezioni diverse.

Answer 1

Ok, penso di averlo funzionato nel modo in cui lo intendevi. Il problema deriva dal fatto che DualListBox sta tentando di inizializzarsi prima che remoteChained abbia terminato di compilare la casella di selezione. La soluzione ideale è sul completamento di RemoteChained, inizializzare DualListBox. Sfortunatamente, remoteChained non sembra avere una funzione di callback, rendendo questo leggermente più complicato. Ecco la mia soluzione (leggermente hacky):

$(document).ready(function() { 
    // setup remote chained 
    $('#hosts').remoteChained({ 
     parents: "#hosts_group", 
     url: "ajax/getHosts" 
    }); 

    // set up dualList when change is triggered 
    $('#hosts_group').on("change", function() { 

     // if the option wasn't the first one 
     if($(this).find("option:selected").val() != "") { 
      setUpDualList(); 
     } else { 
      // left as an exercise 
      //putHostsSelectBoxBackIfItWasDestroyedByDualList(); 
     } 
    }); 
}); 

function setUpDualList() { 
    if(!hostsChanged()) { 
     // because there's no callback, we have continually check if json is complete 
     setTimeout(function() { setUpDualList(); }, 300); 
    } else { 
     // this actually does it. 
     $("#hosts").DualListBox({json:false}); 
    } 
} 

function hostsChanged() { 
    /* 
    * this is VERY simplistic. It will have to handle if #hosts was 
    * 'changed' to have the same content, or if it was changed to 
    * something that has the same number of options, etc. This ONLY 
    * works for the very simple case you presented above. 
    */ 
    return $("#hosts").find("option").length != 0; 
} 

Il codice HTML può restare lo stesso:

<select id="hosts_group" name="hosts_group" class="form-control"> 
    <option value="">Bitte Gruppe selektieren</option> 
    <option value="1">Some Groups</option> 
</select> 

<select id="hosts" name="hosts"></select> 

Tuttavia, poiché DualListBox è distruttivo, può essere meglio per creare un "host", selezionare e una " hosts_destroyable "seleziona. La selezione distruggibile semplicemente duplicherebbe "host" su ajax, inizializzerà DualList e nasconderà "host". Quando la DualList deve essere nuovamente nascosta (perché l'utente ha cambiato il gruppo selezionato), è necessario ricreare "hosts_destroyable".

Così. In alto c'è la soluzione di hacking, sì, così-funziona-ma-ha-bisogno-aiuto. Di seguito è una soluzione completa passo dopo passo. .

• inizializzazione remoteChained

• Su modifica di #hosts_group ad un gruppo valido:

  1. $ ("# hosts") show();

  2. Monitor #hosts e capire quando remoteChained ha completato con successo la richiesta json.

  3. Quando la richiesta è completa, duplicare #hosts ad un #hosts_temp temporanea

  4. $ ("# hosts_temp") DualListBox ({JSON: false}).

  5. $ ("# padroni di casa").nascondere();

• Su modifica di #hosts_group al gruppo valido (ad esempio, "Bitte Gruppe selektieren"):

  1. Destroy DualListBox (non so cosa tutto è creato, togliere dal DOM in qualche modo se esiste)

  2. $ ("# host"). Show();