5

jQuery Chosenの選択/ドロップダウンリストをBootboxモーダルで動作させようとしています。標準の HTML ページで動作するコードはほぼ同じなので、リストをモーダルにポップするのは簡単だと思いました。div を生成し、モーダルでオブジェクトを選択し、それが「表示」された後、Chosen を呼び出します。

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

この後、Chosen が壊れたようです。選択項目がグレー表示され、クリックできません。

myApp.init() 内で、選択項目を入力すると、機能します。

ここに画像の説明を入力

モーダルの舞台裏を見ると、Chosen コンテナーが初期化されているように見えますが、選択オプションが chzn-drop div に転送されていません。画像では、chzn-results UL にオプションを入力する必要があります。モーダルバージョンは次のとおりです。ここに画像の説明を入力

HTML バージョンでは、次のようになります。 目標

HTML バージョンでは、私のコードは body タグの一番下にあり (同様に、選択オプションは myApp.init() に取り込まれています)、問題なく動作しているようです。呼び出しの順序は同じようです...

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

これは単なる z-index の問題ではありません。モーダル内では、適切に初期化されているにもかかわらず、Chosen プラグインが何らかの形で混乱し、バインドまたは更新されていないようです。トラブルシューティングの方法がわからず、同じ問題を抱えている他の人を見つけることができません...これは、タイミングの問題である可能性があると思います（しかし、なぜHTMLで機能するのですか？）、または私は愚かなことをしています（非常におそらく）。どこを見るべきか、何が間違っているかについて誰か提案がありますか?

ありがとう！

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

選択入力用の HTML の追加 (Christopher の質問による)

両方のバージョンで、select に次のコードを入力します (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>');
    });
}

実際の要素自体は次のとおりです。動作しないモーダル バージョン:

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

2 に答える 2

2

実際のコード構造を見ないと何が問題なのか正確にはわかりませんが、一般的には、プラグインを初期化する前に選択内容を入力することをお勧めします。オプションが追加された後の 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");
于 2013-08-09T18:15:10.070 に答える
0

最初のページの選択で同様の問題が発生し、モーダルを開くと、$().chosen() を呼び出すと JavaScript エラーが発生しました。

原因は、最初のページに jquery.js が含まれていたため、モーダルも含まれていました。モーダルから jquery.js インクルードを削除した後、問題は解決しました。

于 2015-04-17T15:11:09.677 に答える