Gewählte Dropdown-Liste funktioniert nicht mit Modal

Question

Ich versuche, eine jQuery Chosen Auswahl/Dropdown-Liste, um in einem Bootbox-Modal zu arbeiten. Ich habe fast denselben Code, der auf einer Standard-HTML-Seite funktioniert, also dachte ich, es wäre einfach, meine Liste in ein Modal zu schreiben. Ich erzeugen meine divs und wählen Sie Objekte in der modal, und dann, nachdem sie „gezeigt“ wird, nenne ich Chosen:

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

Danach scheint Chosen gebrochen zu werden. Die ausgewählten Elemente sind ausgegraut - ich kann sie nicht anklicken.

Inside myApp.init(), füllen Sie die ausgewählten Elemente, und es funktioniert.

Hinter den Kulissen für die modal, kann ich sehen, dass der gewählte Behälter initialisiert zu haben scheint, aber es die Auswahloptionen zu der chzn-Drop div nicht übertragen. Im Bild sollten die chzn-Ergebnisse UL mit Optionen gefüllt sein. Hier ist die modale Version:

Hier ist, wie es aussehen sollte, aus der HTML-Version:

In der HTML-Version, mein Code ist an der Unterseite des Körpers Tag (ähnlich den Optionen auswählen sind in myApp.init()) aufgefüllt, und es scheint gut zu funktionieren. Die Reihenfolge der Anrufe scheint identisch zu sein ...

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

Dies ist nicht nur eine Frage der z-index - Ich habe bereits mit, dass ohne Glück rumgespielt. Es scheint, als wäre das Chosen-Plugin innerhalb des Modals irgendwie verwirrt und nicht bindend oder aktualisiert, obwohl es korrekt initialisiert wurde. Ich bin mir nicht sicher, wie ich es beheben kann und kann keine anderen Leute mit dem gleichen Problem finden ... das lässt mich glauben, dass es ein Timing-Problem sein könnte (aber warum funktioniert es in HTML?), Oder mache etwas Dummes (sehr wahrscheinlich). Hat jemand irgendwelche Vorschläge, wo man hinschauen soll oder was ist falsch?

Danke!

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

HTML für die Auswahleingänge Hinzufügen (pro Christopher Frage)

Für beide Versionen, besiedeln ich die select mit dem folgenden Code (bearbeitete Version von dem, was in myApp.init ist()):

$.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>'); 
    }); 
} 

die Elemente selbst sind wie folgt. In der Nicht-Arbeits modale Version:

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

Und in der Arbeits HTML-Version:

<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

Ich kann nicht genau sagen, was das Problem Ihre tatsächliche Code-Struktur, ohne zu sehen ist, aber im Allgemeinen denke ich, Bevor Sie das Plugin initialisieren, ist es eine gute Idee, Sie mit selects auszufüllen. Der beste Weg wäre also, die Plugin-Initialisierung für Ihre Elemente in Ihrem Ajax-Callback hinzuzufügen, nachdem die Optionen hinzugefügt wurden.

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

Wenn Sie Optionen auf Ihre <select> Elemente hinzufügen müssen, nachdem das Plugin initialisiert wird, müssen Sie das chosen:updated Ereignis auf dem Feld auslösen, ex:

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

Answer 2

hatte ich ein ähnliches Problem mit einer Auswahl auf der ersten Seite, und dann würde ich ein Modal öffnen, und dann würde der Aufruf von $(). selected() zu einem Javascript-Fehler führen.

Die Ursache war, dass die erste Seite jquery.js und so das Modal enthielt. Nachdem das jquery.js-Include aus dem Modal entfernt wurde, wurde das Problem gelöst.