JQuery Ajax / getJSON проблема выбора для изменения высоты соответственно - PullRequest
Новая
       0

JQuery Ajax / getJSON проблема выбора для изменения высоты соответственно

0 голосов
/ 13 декабря 2011

Я пытаюсь получить информацию о комнате с помощью JQuery's . getJSON или. ajax методов.

Отлично работает в Opera и Firefox .

Проблема возникает в Chrome и IE , а select не изменяет свою высоту на новое количество элементов, показывая мне только первый элемент в поле выбора .

Чтобы увидеть остальное, я могу прокрутить высоту одного элемента или убрать фокус с выбора, щелкнув где-нибудь еще на странице, и выбор опции выбора снова покажет правильную высоту (скажем, 20 элементы / опция).

Я думаю, что это связано с синхронизацией или методом .html () , потому что проблема возникает, когда я заполняю свой выбор "room_id". Может быть, структура DOM не обновляется должным образом после вызова ajax? 

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

JQuery (я пытался getJSON () раньше, тоже самое). Извините за грязный отступ, делаю это впервые: s 

$(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);

}
 }); ... } ...

РЕДАКТИРОВАТЬ : В соответствии с предложением ShankarSangoli Я пытался запустить setTimeout , но это не помогло.

Примечание : в IE это выглядит следующим образом: я нажимаю на кнопку выбора, элемент выбирается и список с предметами закрывается. (Как будто я выбрал первый вариант и все тут). В Firefox и Opera все выглядит так, как я хотел: я нажимаю на кнопку выбора, раскрывающееся меню с элементы / опции появляются с первым, который был предварительно выделен ajax. В Chrome это то, что я описал выше, высота раскрывающегося списка составляет один элемент, а первый элемент предварительно выбран. 

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

}).change();

Я должен сделать это по клику, а не по изменению по другим причинам, просто проигнорируйте это, пожалуйста: p

1 Ответ

0 голосов
/ 13 декабря 2011

В соответствии с моим пониманием вашей проблемы, вот мое решение.

Выполните вызов ajax после определенной задержки при изменении выбора, это даст время для закрытия поля выбора.Когда вы делаете вызов ajax сразу после изменения выбора, он не закрывается сразу, особенно в браузере IE.Попробуйте это будет работать нормально. 

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

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