Зависимые списки средствами Ajax. Урок 1

Дата публикации: 19-06-2013

Чтобы иметь доступ к просмотру всех уроков этого курса, оформите подписку в премиум раздел
Регистрация пользователей

От автора: в течение двух уроков мы с Вами поработаем с т.н. зависимыми списками. Что такое зависимые списки? Это ни что иное как списки форм. При этом значения каждого последующего списка зависят от выбранного значения в предыдущем списке.

В работе мы будем активно использовать возможности AJAX, а также поработаем с PHP и SQL.

По результатам урока Вы узнаете о понятии зависимых списков, узнаете, как реализовать зависимость одного списка формы от другого.

lesson

Все уроки курса:

Метки: ,

Комментарии (10)

  1. [email protected]

    Здравствуйте Андрей. Урок просто замечательный!
    Есть вопрос: как реализовать, если при выборе в первом списке определенной позиции необходимо вывести два списка с разными параметрами, но с одной таблицы? Вот такой вид: Шторы -> Ширина и еще список Высота.

    • Андрей Кудлай

      Здравствуйте. Алгоритм должен быть тем же, что и для одного списка. Получаем необходимые данные и каждая часть данных вставляется в свой список.

  2. gh.goq89@gmail.com

    Здравствуйте Андрей, как можно сделать чтобы последний элемент так-же зависел от первого, во втором списке у меня есть повторяющиеся элементы

    • Андрей

      Здравствуйте. Честно говоря, не понял сути проблемы. Но в любом случае принцип тот же, что и показан в уроке: в зависимости от выбора одного элемента будут получены из хранилища связанные с ним элементы.

  3. temanick@gmail.com

    Добрый день. Есть вопрос. Можно ли реализовать зависимые списки из одной таблицы. Например, у меня есть поле тип: овощи, фрукты . и таблица построена типа
    id, овощи , редиска,
    id, овощи , морковь,
    id, фрукты, яблоко,
    id, овощи , капуста,
    id, фрукты, груша, и т.д.

    Интересует как вывести спискок чтобы в одном списке было Фрукты и подгружались фрукты, а по втором Овощи и подгружались Овощи, т.к. это не уникальные значения

    • Андрей

      Добрый день. Возможно. Для первого списка выбираются все уникальные значения из второй колонки: SELECT DISTINCT col2 FROM tbl;
      Ну а далее для второго списка получаете значения по выбранному элементу первого списка: фрукты или овощи.

  4. aw_apanasenko@mail.ru

    Добрый день! Не могу разобраться, каким образом, индексный файл получает значение $_POST. Как я понял, его генерирует метод .load(), однако, в моём коде файл не получает этого значения, выдаёт Notice.
    Вопросы:
    1. Как проверить, в чем причина несрабатывания кода в части генерации параметров для отправки в двух функциях js?
    2. Может ли являться причиной отсутствия в посте передаваемых параметров то, что форма находится в модальном окне?
    3. Как всё то же самое сделать на современных инструментах разработки — mysqli и PDO, ведь mysql уже давно устарел?
    Мне не нужны академические знания по предмету, я хочу решить свою прикладную задачу, для этого использую php 7 и несколько библиотек, которые не работают со прошлыми версиями, перенастраивать всё это под mysql мне нельзя. Переделал обработчик на redbean php, Ваш пример работает, мои скрипты нет(

    • Андрей

      Добрый день!
      В документации к методу load() написано: «В случает использования объекта в качестве второго аргумента — будет выполнен метод POST, в противном случае — метод GET». Соответственно, коль передается такой объект — на сервере данные забираются из массива POST.
      По вопросам:
      1. Проверить достаточно просто — используйте консоль браузера. Распечатайте переменные и посмотрите в консоли, те ли значения в них, которые Вы ожидаете.
      2. Нет. Модальное окно — обычный элемент страницы, который изначально скрыт, но при некотором событии показывается. Единственный вариант возможной проблемы может заключаться в том, что данные в модальное окно могут поступать динамически, асинхронно и DOM может изменяться. В этом случае не забывайте о делегировании событий в JS. Опять-таки, Ваш это случай или нет и что не так с параметрами — достаточно легко разобраться, если использовать консоль.
      3. Просто использовать другие функции. В случае с MySQLi это совсем просто. Например:

      $res = mysql_query($query); // вместо такой строки кода
      $res = mysqli_query($link, $query); // используем такую... $link - это идентификатор соединения с БД, который дополнительно нужно передать в функцию

      Собственно, и вся разница.
      Ваш код удалил, поскольку его много, а смысла в нем мало, потому что выполнить его в голове я не могу, а для использования на сервере нужен весь проект, а не части кода.