L'elenco a discesa scelto non funziona con Modal

Question

Sto tentando di ottenere un jQuery selezionato/elenco a discesa per lavorare in un modal Bootbox. Ho quasi lo stesso codice esatto che lavora su una pagina HTML standard, quindi ho pensato che sarebbe stato semplice inserire la mia lista in una modal. I generare i miei div e selezionare gli oggetti in modal, e poi dopo che è stato "illustrato", che io chiamo Chosen:

div.on("shown", function() { 
    $(".chzn-select").chosen(); 
    $(".chzn-select-deselect").chosen({allow_single_deselect:true}); 
    myApp.init(); 
}); 

Dopo questo, Chosen sembra essere rotto. Gli elementi selezionati sono in grigio - non riesco a selezionarli.

All'interno di myApp.init(), compilo gli elementi selezionati e funziona.

dietro le quinte per il modal, posso vedere che il contenitore Scelto sembra aver inizializzato, ma non trasferisce le opzioni di selezione per il div chzn-drop. Nell'immagine, i risultati di chzn UL dovrebbero essere riempiti con le opzioni. Ecco la versione modale:

Qui è quello che dovrebbe essere simile, dalla versione HTML:

Nella versione HTML, il mio codice è in fondo del tag body (allo stesso modo i selezionare le opzioni sono popolati in myApp.init()), e sembra funzionare bene. L'ordine delle chiamate sembra essere identico ...

$(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true}); 
$(document).ready(function(){ 
    myApp.init(); 
}); 

Questa non è solo una questione di z-index - ho già giocato un po 'con quello senza fortuna. Sembra che all'interno del modale, il plugin scelto sia in qualche modo confuso e non sia vincolante o aggiornato, anche se è stato inizializzato correttamente. Non sono sicuro di come risolverlo e non riesco a trovare altre persone con lo stesso problema ... questo mi fa pensare che potrebbe essere un problema di temporizzazione (ma perché funziona in HTML?), O sto facendo qualcosa di stupido (altamente probabile). Qualcuno ha qualche suggerimento su dove guardare o cosa c'è che non va?

Grazie!

============================

Aggiunta di HTML per gli ingressi di selezione (per ogni domanda di Christopher)

Per entrambe le versioni, io popolo select con il seguente codice (versione modificata di ciò che è in myApp.init()):

$.ajax call to a RESTful URL 

var callbackSuccess = function(data){ 
    if (data) { 
    populateDropDownById(data, 'objectiveBanks'); 

     //Other things 
    } 
}; 

function populateDropDownById(data, elementId) { 
    $('#' + elementId).append('<option value = "null"> -- Select -- </option>'); 
    $.each(data, function(id, bean) { 
    var name = bean.displayName.text; 
    var id = bean.id; 
     $('#' + elementId).append('<option value =' + id + '>' + name + '</option>'); 
    }); 
} 

Gli elementi reali essi stessi sono i seguenti. Nella versione modale non funzionante:

var obj_banks_select = $('<select id="objectiveBanks" name="objectiveBank" onchange="populateObjectives()" tabindex="2"></select>') 
          .addClass('chzn-select') 
          .css({ 
           'width': '330px', 
           'display': 'none' 
          }); 

E nella versione HTML di lavoro:

<div id="objectiveBanksWrapper">  
     <span id="objectiveBanksLabel" class="label"></span> 
     <select id="objectiveBanks" name="objectiveBank" onchange="populateObjectives()" class="chzn-select" tabindex="2" style="width: 330px; display: none;"></select> 
     <span id=objectiveBanksLoader class="dropDownLoader"></span> 
    </div> 

Answer 1

non posso esattamente dire quale sia il problema senza vedere la struttura del codice vero e proprio, ma in generale penso è una buona idea compilare le selezioni prima di inizializzare il plug-in, quindi l'approccio migliore sarebbe aggiungere l'inizializzazione del plug-in sui tuoi elementi nella callback ajax dopo che sono state aggiunte le opzioni.

var callbackSuccess = function(data){ 
    if (data) { 
     populateDropDownById(data, 'objectiveBanks'); 
     $(".chzn-select").chosen(); 
     $(".chzn-select-deselect").chosen({allow_single_deselect:true}); 
     //Other things 
    } 
}; 

Se avete bisogno di aggiungere opzioni ai tuoi <select> elementi dopo che il plugin è inizializzato, avresti bisogno di attivare l'evento chosen:updated sul campo, es:

$(.chzn-select").trigger("chosen:updated"); 

Answer 2

Ho avuto un problema simile con una selezione sulla prima pagina, quindi aprirò una modale, e quindi la chiamata a $(). chosen() risulterebbe in un errore javascript.

La causa era che la prima pagina includeva jquery.js e anche il modale. Dopo aver rimosso jquery.js dal modal, il problema è stato risolto.