Правильный способ ленивой загрузки отдельных опций окна выбора через ajax после нажатия - PullRequest
Новая
       6

Правильный способ ленивой загрузки отдельных опций окна выбора через ajax после нажатия

3 голосов
/ 28 мая 2009

У меня есть поле выбора, которое должно быть заполнено только при нажатии. Этот запрос занимает много времени, поэтому я отключаю его от стандартных данных, показанных на странице.

Я реализовал функцию loadMyData(element, id), которая выполняет запрос ajax и возвращает данные в виде JSON. Затем он заполняет поле выбора.

событие привязано к элементу так: 

<select onclick="loadMyData(this, 1)">
</select>

и поле выбора заполняется следующим образом: 

$.each(data, function(index, optionData) {
  select.options[element.options.length] 
             = new Option(optionData.Text, optionData.Value);
});

В браузерах на основе Gecko, но в браузерах Webkit (safari и chrome), когда я нажимаю на поле выбора, перед запросом ajax отображается пустое раскрывающееся окно, а после ответа - раскрывающееся окно: не обновляется. Нужно щелкнуть за пределами поля выбора и щелкнуть его снова, чтобы увидеть обновленные «параметры».

Есть ли способ заставить его обновить содержимое? или просто автоматически выбрать первый и скрыть раскрывающийся список?

** попробовал onfocus и нашел те же результаты. onmouseover работает, но "не годится". onchange не жизнеспособен из-за того, что поле выбора пусто в своем начальном состоянии. *

Ответы [ 3 ]

2 голосов
/ 29 мая 2009

Некоторые идеи:

  1. Не используйте стандартные поля выбора html - ваше приложение в любом случае не ухудшается.

  2. Использовать некоторые клик-джеккинг - иметь прозрачный блок выбора над OVER - проблемы с IE

  3. Используйте чекбокс, чтобы разрешить "нестандартный" ответ, который заполнил бы поле выбора и сделал бы его кликабельным (не отключенным)

  4. Мой любимый: кешировать результаты запроса и сразу же заполнять поле выбора. Дайте еще одну кнопку "Обновить параметры" рядом с полем выбора, чтобы перезагрузить параметры через AJAX.

1 голос
/ 29 мая 2009

Как обычно, плохой браузер здесь IE 6 и ниже, потому что он имеет эту функцию только для чтения в опциях выбора, поэтому единственный способ справиться с этим - заменить весь выбор.

index.php 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>lazy loading thing</title>
        <script src="js/jquery.js" type="text/javascript"></script>
        <script src="js/script.js" type="text/javascript"></script>
    </head>
    <body>
        <form>
            <p>
                <span id="replaceMe"><select name="drinks">
                    <option>oh well... click me...</option>
                </select></span>
            </p>
        </form>
    </body>
</html>

script.js 

$(function() {
     $('#replaceMe').one('click', replaceIt);
});

function replaceIt(e) {
    $(this).html('now wait...');
    $.post('options.php', {}, replaceItHandler, 'json');
}

function replaceItHandler(options) {
    var select = '<select name="drinks">';
    $.each(options, function(i, option) {
        select += '<option value="' + option.data + '">' + option.label + '</option>';
    });
    select += '</select>';
    $('#replaceMe').html(select);
}

options.php 

<?php
$options[] = array('data' => 0, 'label' => 'Water');
$options[] = array('data' => 0, 'label' => 'Wine');
$options[] = array('data' => 0, 'label' => 'Beer');
$options[] = array('data' => 0, 'label' => 'Coke');
echo json_encode($options);
?>

И, конечно же, вы можете использовать PHP или что угодно и JSON как этот или отправить весь выбор, это ваш выбор.

0 голосов
/ 05 сентября 2010

В Safari проблема заключается в событии onclick, которое должно быть включено.

см. Здесь решение: http://munteanutraian.info/forum/?p=5

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...