JQuery wybierz wiele po łańcuchach wybierz

Question

Użytkownik powinien wybrać hosty po wybraniu niektórych grup. Zbudowałem połączenie łańcuchowe z JQuery chained remote Plugin do wybierania hostów za pośrednictwem grup. Poniższy kod jest używany i działa bez zarzutu:

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

Ale efekt końcowy powinien zapewnić duallistbox dla gospodarzy, w którym użytkownik może wybrać hosty z każdej grupy. Próbowałem dodając tag do wielu gospodarzy wybranych i dodanie JQuery DuallistBox poprzez następującym fragmencie:

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

Skrzynka duallist wyświetlany jest w porządku, ale nie ma gospodarze są wyświetlane po zaznaczeniu grupy.

JSON danych wygląda następująco:

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

Przy wyborze inną grupę, JSON zawiera również różnych gospodarzy. Powiązana wtyczka select żąda danych za pośrednictwem następującego żądania: ajax/getHosts /? Hosts_group = selectedId

Wystarczy użyć wybierania łańcuchowego z normalnym wyborem wielokrotnym. Problem polega na wyświetlaniu danych json, które różnią się dla każdego zaznaczenia w polu duallist.

Próbowałem zbudować przykład JsFiddle, ale nie działa, ponieważ biblioteka zewnętrzna nie zostanie załadowana i nie bardzo rozumiem, jak mogę ręcznie dostarczyć json za pomocą różnych wyborów.

Answer 1

Okej, myślę, że to działa tak, jak sobie tego życzysz. Problem wynika z tego, że DualListBox próbuje się zainicjować, zanim remoteChained zakończy wypełnianie pola wyboru. Idealne rozwiązanie jest na zdalnym zakończeniu, zainicjuj DualListBox. Niestety funkcja remoteChained nie ma funkcji wywołania zwrotnego, co czyni ją nieco trudniejszą. Oto moje (nieco hacky) rozwiązanie:

$(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; 
} 

HTML może pozostać taka sama:

<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> 

Jednak ponieważ DualListBox jest destrukcyjne, może lepiej byłoby stworzyć „gospodarze” wybierz i " hosts_destroyable "wybierz. Wybieralny wybór po prostu powielałby "hosty" w ajax complete, zainicjalizował DualList i ukrył "hosty". Kiedy DualList musi być ponownie ukryty (ponieważ użytkownik zmienił wybraną grupę), konieczne będzie odtworzenie "hosts_destroyable".

So. Powyżej jest krótkie, hacky, tak, to działa, ale potrzebuje pomocy. Poniżej znajduje się pełne rozwiązanie krok po kroku. .

• Initialize remoteChained

• o zmianie #hosts_group do ważnej grupy:

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

  2. Monitoruj #hosty i wymyśl, kiedy remoteChained pomyślnie ukończył żądanie json.

  3. Gdy wniosek jest kompletny, powielać #hosts do tymczasowego #hosts_temp

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

  5. $ ("# gospodarze").ukryć();

• o zmianie #hosts_group nieprawidłowej grupy (np "Bitte Gruppe selektieren"):

  1. Destroy DualListBox (nie wiem co to wszystko jest tworzony, zdjąć z DOM jakoś jeśli istnieje)

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