चुना गया ड्रॉपडाउन सूची मॉडल

Question

के साथ काम नहीं कर रही है मैं बूटबॉक्स मोडल में काम करने के लिए एक jQuery चुनिंदा चयन/ड्रॉपडाउन सूची प्राप्त करने का प्रयास कर रहा हूं। मेरे पास एक मानक HTML पृष्ठ पर काम करने वाला लगभग एक ही सटीक कोड है, इसलिए मैंने सोचा कि यह मेरी सूची को एक मोडल में बस पॉप करने के लिए सीधे आगे होगा। मैं मॉडल में मेरे divs और चुनिंदा वस्तुओं जेनरेट करना और फिर बाद यह "दिखाया" है, मैं फोन चुना:

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

इस के बाद, चुना तोड़ा जा रहा है। चुनिंदा आइटम ग्रे हो गए हैं - मैं उन्हें क्लिक नहीं कर सकता।

myApp.init() के अंदर, मैं चुनिंदा वस्तुओं को पॉप्युलेट करता हूं, और यह काम करता है।

मोडल के लिए पर्दे के पीछे, मैं देख सकता हूँ कि चुना कंटेनर प्रारंभ है लगता है, लेकिन यह chzn ड्रॉप div करने के लिए चयन के लिए विकल्पों का स्थानांतरण नहीं होता। छवि में, chzn-results यूएल विकल्पों के साथ भरा जाना चाहिए। क्या यह HTML संस्करण से, की तरह दिखना चाहिए है

यहाँ:: यहाँ मोडल संस्करण है

HTML संस्करण में, मेरा कोड बॉडी टैग के नीचे (इसी तरह का चयन विकल्पों पर है myApp.init() में आबादी में हैं, और ऐसा लगता है कि यह ठीक काम करता है। कॉल के आदेश समान प्रतीत हो रहा है ...

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

इस z- सूचकांक का मामला नहीं है - मैं पहले से ही कोई भाग्य के साथ उस के साथ चारों ओर निभाई है। यह मोडल के अंदर जैसा लगता है, चुना गया प्लगइन किसी भी तरह उलझन में है और बाध्यकारी या अपडेट नहीं कर रहा है, भले ही यह ठीक से शुरू हो गया हो। मुझे यकीन नहीं है कि इसका निवारण कैसे करें और अन्य लोगों को एक ही समस्या के साथ नहीं मिल रहा है ... इससे मुझे लगता है कि यह एक समय मुद्दा हो सकता है (लेकिन यह HTML में क्यों काम करता है?), या मैं कुछ बेवकूफ (अत्यधिक संभावना)। क्या किसी को यह देखने के लिए कोई सुझाव है कि कहां देखना है या क्या गलत है?

धन्यवाद!

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

(क्रिस्टोफर के प्रश्न के अनुसार) का चयन आदानों के लिए HTML

जोड़ना

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

वास्तविक तत्व इस प्रकार के रूप में खुद कर रहे हैं:

दोनों संस्करणों के लिए, मैं (क्या myApp.init में है() का संपादित संस्करण) निम्न कोड के साथ चयन को पॉप्युलेट। गैर काम मोडल संस्करण में:

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

और काम कर HTML संस्करण में:

<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

मैं बिल्कुल नहीं बता सकता कि समस्या अपने वास्तविक कोड संरचना देखे बिना है, लेकिन आम तौर पर मुझे लगता है कि प्लगइन शुरू करने से पहले चुनने के लिए यह एक अच्छा विचार है, इसलिए विकल्पों को जोड़ने के बाद आपके AJAX कॉलबैक में आपके तत्वों पर प्लगइन प्रारंभिकता जोड़ने का सबसे अच्छा तरीका होगा।

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

आप अपने <select> तत्वों के लिए विकल्पों को शामिल करने के बाद प्लगइन आरंभ नहीं हो जाता की जरूरत है, तो आप मैदान पर chosen:updated घटना को गति प्रदान करने की जरूरत है चाहते हैं, उदाहरण के लिए:

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

Answer 2

मैं एक ऐसी ही समस्या थी पहले पृष्ठ पर एक चयन के साथ, और फिर मैं एक मोडल खोलूंगा, और उसके बाद $() को कॉल() चुना जाएगा() के परिणामस्वरूप जावास्क्रिप्ट त्रुटि होगी।

कारण यह था कि पहले पृष्ठ में jquery.js शामिल था और इसी तरह मोडल भी था। Jquery.js को हटाने के बाद मोडल से शामिल, समस्या हल हो गई थी।