JQueryのAjax/getJSONの問題により、高さを適切に変更することができません

Question

私は部屋の情報をJQueryので取得しようとしています。 getJSONまたは。 ajaxの方法。

OperaおよびFirefoxで問題なく動作します。

問題がとIEChromeで発生し、は、選択ボックスでくれ最初の要素だけを示し、要素の新しい額にその高さを変更しないを選択します。

残りの部分を見るためには、ある要素の高さ内をスクロールしたり、ページの他の部分をクリックして選択範囲からフォーカスを取り、選択オプションを再度選択すると正しい高さが表示されます20要素/オプション）。

"room_id"を選択したときに問題が発生するため、タイミングや.html（）メソッドと関係があると思います。 DOM構造体がajax呼び出しの後に正しく更新されないことがありますか？

<select name="room_id" id="room_id" class="textbox"> 
<option value="..." capacity="...">Select a room from the list...</option> 
</select> 

jQueryの（私は同じこと、前getJSON（）を試してみました）。汚い字下げのため申し訳ありません 、それを最初にやってます。■

$(document).ready(function() 
{ 
... 
$('#room_id').click(function() { 
    fetchRooms(); 
}).change(); 
... 
function fetchRooms() { 
    $('#room_id').html('<option value="">Loading...</option>'); 
    $.ajax({ 
    url:'here is my link...', 
    dataType: "json", 
    async: false,        // tried with true before 
    success: function(data) 
     { 
    var $items=''; 
    var $is_selected = false; 

      // populating items if ajax returns data 
    for (var $i=0; $i < data.length; $i++) 
    { 
     var $selected = (data[$i]['room_id'] == '<?=$event->room_id;?>' ? 'selected="selected"':''); 
     if ($selected != '') { $is_selected = true; } 
     $items += '<option value="'+data[$i]['room_id']+'" '+$selected+' capacity="'+data[$i]['capacity']+'">'+data[$i]['room_name']+'</option>'; 
    } 


      if (data.length == 0) 
     $items = '<option value="">(No rooms are available)</option>'; 

      // populating select with items 
    $('#room_id').html($items); 

} 
}); ... } ... 

EDIT：ShankarSangoliによって示唆されるように、私はのsetTimeoutを発射しようとしたが、それは助けにはなりませんでした。

備考：IEで、それは以下のようになります。私は選択をクリックして、項目が選択されますと、アイテムをリスト が閉じます。 （私が最初のオプションを選択したように、それはそれです）。 FirefoxとOperaでは、私はそれを望んでいたように見えます： の項目/オプションを含む選択、ドロップダウンメニューをクリックすると、最初に強調表示されたajaxによって引かれた項目/オプションが表示されます。 Chromeでは、これは先に説明したとおりで、プルダウンの高さは1つのアイテムで、最初のアイテムはあらかじめ選択されています。私は他の理由のためのクリックではなく、変化にそれをしなければならない

$('#room_id').click(function() { 
// 
setTimeout(function() { 
    fetchRooms(); 
}, 500); 

}).change(); 

、ちょうどしてくださいということを無視：Pあなたの問題の私の理解あたりとして

Answer 1

はここに私のソリューションです。

選択変更で一定の遅延の後にajaxコールを実行すると、選択ボックスを閉じる時間が与えられます。変更を選択した直後にajaxを呼び出すと、IEブラウザですぐには特別に閉じることはありません。これを試しても問題ありません。

$('select').change(function(){ 

    setTimeout(function(){ 
     //Do ajax call here 
    }, 200);//200 ms should be fine 
});