За последние 24 часа нас посетили 22555 программистов и 1013 роботов. Сейчас ищут 612 программистов ...

Связанные списки (динамические select) на jQuery

Тема в разделе "JavaScript и AJAX", создана пользователем Elkaz, 11 сен 2009.

  1. Elkaz

    Elkaz Старожил
    Команда форума Модератор

    С нами с:
    26 июн 2006
    Сообщения:
    3.373
    Симпатии:
    0
    Адрес:
    Баку, Азербайджан
    Долгое время искал решение, которое бы подходило мне в плане интеграции в достаточно сложную систему. В Google адекватного решения не нашёл. Те которые работали в чистом виде, не работали у меня. Разбираться не получилось поэтому я написал собственное решение с использованием библиотеки jQuery. Может быть кому-то будет полезно.
    Итак, у нас три файла - index.html, handler.php и jquery.js.

    Листинг index.html
    HTML:
    1.  
    2. <!DOCTYPE html>
    3.     <head>
    4.         <title>jQuery Dynamic Lists Example</title>
    5.         <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    6.         <script type="text/javascript" src="./jquery.js"></script>
    7.     </head>
    8.     <body>
    9.         <div id="my-form">
    10.             <form id="form" method="post" action="">
    11.                 <select id="category" size="1">
    12.                                         <option value="0">Выберите категорию</option>
    13.                     <option value="1">Автомобили</option>
    14.                     <option value="2">Языки программирования</option>
    15.                 </select>
    16.                 <br>
    17.                 <select id="sub-category" size="1">
    18.                     <option value="0">---</option>
    19.                 </select>
    20.             </form>
    21.         </div>
    22.         <div id="result">
    23.         </div>
    24.         <script type="text/javascript">
    25.         $("#category").change(function(){
    26.             $("#sub-category").load("./handler.php", { id: $("#category option:selected").val() });
    27.         });
    28.         </script>
    29.     </body>
    30. </html>
    31.  
    Листинг handler.php
    PHP:
    1.  
    2. <?php
    3. if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){
    4.     $subcategory = array(0 => array('BMW', 'Mercedes-Benz', 'Audi', 'Subaru', 'Mazda', 'ВАЗ', 'ЗАЗ', 'ГАЗ'),
    5.                          1 => array('PHP', 'Java', 'Javascript', 'Python', 'C++', 'C', 'C#'),
    6.                         );
    7.  
    8.     if (is_numeric ($_REQUEST['id']) && is_array ($subcategory[$_REQUEST['id']])){
    9.         foreach ($subcategory[$_REQUEST['id']] as $id => $value){
    10.             echo '<option value="' . $id . '">' . $value . '</option>';
    11.         }  
    12.     }
    13.  
    14. } else {
    15.     echo 'Bad request!';
    16.     exit;
    17. }
    18.  

    Thanks to Sergey89 за решение проблемы с Firebug.
     
  2. 440Hz

    440Hz Старожил
    Команда форума Модератор

    С нами с:
    21 дек 2012
    Сообщения:
    8.003
    Симпатии:
    1
    Адрес:
    Оттуда
    1. иногда даже второй селект прячут и грузят сразу с <select> тогда приколько появляются новые селекты.
    2. когда открывается форма первый раз - загрузкт второго селекта нет? надо руками дернуть, что б загурзилось
    3. можно вместо <option> возвращать JSON и уже на клиете рулить.
     
  3. Elkaz

    Elkaz Старожил
    Команда форума Модератор

    С нами с:
    26 июн 2006
    Сообщения:
    3.373
    Симпатии:
    0
    Адрес:
    Баку, Азербайджан
    1. Ну, мне-то нужно было именно на два :) А так можно .append заюзать
    3. Можно, но зачем? :)
     
  4. Kreker

    Kreker Старожил

    С нами с:
    8 апр 2007
    Сообщения:
    5.433
    Симпатии:
    0
    IE как работает?
     
  5. Elkaz

    Elkaz Старожил
    Команда форума Модератор

    С нами с:
    26 июн 2006
    Сообщения:
    3.373
    Симпатии:
    0
    Адрес:
    Баку, Азербайджан
    Kreker
    Проверь, если не сложно. Я под Ubuntu
     
  6. kostyl

    kostyl Guest

    а где же isset($subcategory[$_REQUEST['id']]) и соотвествующий else ? ))
     
  7. Elkaz

    Elkaz Старожил
    Команда форума Модератор

    С нами с:
    26 июн 2006
    Сообщения:
    3.373
    Симпатии:
    0
    Адрес:
    Баку, Азербайджан
    kostyl
    Это база, а не полноценное решение.
    PHP:
    1.  
    2. <?php
    3. require_once ('./config.php');
    4. require_once ('./init.php');
    5. if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){
    6.     if (!is_numeric ($_REQUEST['id'])) exit;
    7.     if ($_REQUEST['id'] == 0) die ('<option value="0">---</option>');
    8.     $query = mysql_query('SELECT `id`, `name` FROM `' . table_categories . '` WHERE `parent_id` = ' . $_REQUEST['id']);
    9.     while ($subcategory = mysql_fetch_assoc ($query)){
    10.         echo '<option value="' . $subcategory['id'] . '">' . $subcategory['name'] . '</option>' . "\r\n";
    11.     }  
    12. } else {
    13.     echo 'Bad request!';
    14.     exit;
    15. }
    16.  
     
  8. kostyl

    kostyl Guest

    Elkaz
    аааа, а чё ты новую тему прилепил, в старой вроде на этом и закончили только без jquery?
     
  9. Koc

    Koc Активный пользователь

    С нами с:
    3 мар 2008
    Сообщения:
    2.253
    Симпатии:
    0
    Адрес:
    \Ukraine\Dnepropetrovsk
  10. Elkaz

    Elkaz Старожил
    Команда форума Модератор

    С нами с:
    26 июн 2006
    Сообщения:
    3.373
    Симпатии:
    0
    Адрес:
    Баку, Азербайджан
    kostyl
     
  11. kostyl

    kostyl Guest

    Elkaz
    да я понял, просто предлагаю типа...)
     
  12. darkgod

    darkgod Активный пользователь

    С нами с:
    31 мар 2008
    Сообщения:
    201
    Симпатии:
    0
    Пробовал по всякому, но не проходит почему то запрос... помогите! если без запроса то работает... все данные в самом запросе менял на свои
     
  13. Elkaz

    Elkaz Старожил
    Команда форума Модератор

    С нами с:
    26 июн 2006
    Сообщения:
    3.373
    Симпатии:
    0
    Адрес:
    Баку, Азербайджан
    darkgod
    Покажите код =)
     
  14. darkgod

    darkgod Активный пользователь

    С нами с:
    31 мар 2008
    Сообщения:
    201
    Симпатии:
    0
    Запрос рабочий на 100% (проверял 100 раз уже). НО - после запроса ничего не работает... если запрос поставить в самое начало, то после него вся страница не работает...

    PHP:
    1. <?php
    2. if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){
    3.      if (!is_numeric ($_REQUEST['id'])) exit;
    4.      if ($_REQUEST['id'] == 0) die ('<option value="0">------</option>');
    5.  
    6. $query = mysql_query('SELECT * FROM hm_city_country WHERE `parent_id` = ' . $_REQUEST['id']);
    7.      while ($subcategory = mysql_fetch_assoc ($query)){
    8.          echo '<option value="' . $subcategory['id'] . '">-' . $subcategory['name_city'] . '</option>' . "\r\n";
    9.      }
    10.  
    11.  } else {
    12.      echo 'Bad request!';
    13.      exit;
    14.  }
    15. ?>
     
  15. Elkaz

    Elkaz Старожил
    Команда форума Модератор

    С нами с:
    26 июн 2006
    Сообщения:
    3.373
    Симпатии:
    0
    Адрес:
    Баку, Азербайджан
    darkgod
    PHP:
    1.  
    2. <?php
    3.   $query = mysql_query('SELECT * FROM hm_city_country WHERE `parent_id` = ' . $_REQUEST['id']) or die (mysql_error());
    4.       while ($subcategory = mysql_fetch_assoc ($query)){
    5.        print_r ($subcategory);
    6.          echo '<option value="' . $subcategory['id'] . '">-' . $subcategory['name_city'] . '</option>' . "\r\n";
    7.       }
    8.  
     
  16. mikeles

    mikeles Активный пользователь

    С нами с:
    1 ноя 2009
    Сообщения:
    51
    Симпатии:
    0
    А как можно сделать чтобы и первый список грузился с аяксом?
     
  17. Elkaz

    Elkaz Старожил
    Команда форума Модератор

    С нами с:
    26 июн 2006
    Сообщения:
    3.373
    Симпатии:
    0
    Адрес:
    Баку, Азербайджан
    mikeles
    Точно так же
     
  18. mikeles

    mikeles Активный пользователь

    С нами с:
    1 ноя 2009
    Сообщения:
    51
    Симпатии:
    0
    А по какому событию??надо чтобы он при загрузки страницы отображался
     
  19. Simpliest

    Simpliest Активный пользователь

    С нами с:
    24 сен 2009
    Сообщения:
    4.511
    Симпатии:
    2
    Адрес:
    Донецк
    [js]$(document).ready(function () {
    //тут все что надо выполнить при загрузке
    });[/js]
     
  20. mikeles

    mikeles Активный пользователь

    С нами с:
    1 ноя 2009
    Сообщения:
    51
    Симпатии:
    0
    Хочу серверную часть case-ми сделать, правильно ли я передаю параметр?

    [js]$("#category").change(function(){
    $("#sc").load("mail_ajax.php", {id:$("#category option:selected").val(), parametr: "podkatalog" });
    }); [/js]

    Серверная часть:

    PHP:
    1. <?
    2. if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') //выполняем условие передачи
    3.  
    4. {
    5.  $link1 = mysql_pconnect("localhost", "root", "") //Соединяемся с MySQL
    6.         or die (mysql_error());              //выводим ошибку mysql
    7.         mysql_select_db("objava")            // Соединяемся с базой
    8.         or die (mysql_error());             //выводим ошибку mysql
    9.         $id=$_REQUEST['id'];
    10.         $p=$_REQUEST['parametr'];
    11.         switch ($p)
    12.                           {
    13.                               case "podkatalog": $query_2 = "SELECT * FROM podkatalog where katalogID=$id";
    14.                               break;
    15.                               default:
    16.                                 $query_2 = "SELECT * FROM katalog";
    17.                             }; //выводим все каталоги    
    18.    
    19. $result = mysql_query($query_2)  or die (mysql_error()); //Делаем выборку с параметром $query_2
    20.       while ($category = mysql_fetch_assoc ($result))
    21.       { //Начало цикла  while
    22.        print_r ($category);
    23.          echo '<option value="' . $category['katalogID'] . '">' . $category['name'] . '</option>' . "\r\n";
    24.        } //конец цикла  while
    25.  
    26.   }//конец цикла передачи
    27.  
    28.   else {
    29.      echo 'Bad request!';
    30.     exit;
    31. }
    32.    mysql_close($link1);//закрываем соединение MySQL
    33.  
    34. ?>
    Почеу то не обрабатывает парметр на сервере.
     
  21. Koc

    Koc Активный пользователь

    С нами с:
    3 мар 2008
    Сообщения:
    2.253
    Симпатии:
    0
    Адрес:
    \Ukraine\Dnepropetrovsk
    может HTTP_X_REQUESTED_WITH не передался серверу? вот у меня он не передается почему-то(
     
  22. mikeles

    mikeles Активный пользователь

    С нами с:
    1 ноя 2009
    Сообщения:
    51
    Симпатии:
    0
    Если кому надо с КЕЙСАМИ и MySQL...вот рабочий отлаженный пример

    [js]
    <script type="text/javascript">
    //загружаем список-1
    $(document).ready(function() {
    $("#category").load("mail_ajax.php");
    });
    //загружаем список-2 на событие change
    $("#category").change(function(){
    $("#sc").load("mail_ajax.php", {id:$("#category option:selected").val(), parametr: "podkatalog" });
    });
    // На событие click кнопки but_click производим добавление элемента в список-1
    $("#but_click").click(function(){
    $("#category").load("mail_ajax.php", { name:$('#change_text').val(), id:$('#category option:selected').val(), parametr:"addKatalog" }); //Передаём параметр "parametr" КЕЙСУ
    });


    </script>[/js]

    Серверная часть

    PHP:
    1.  
    2. <?
    3. if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') //выполняем условие передачи
    4.  
    5. {
    6.  $link1 = mysql_pconnect("localhost", "root", "") //Соединяемся с MySQL
    7.         or die (mysql_error());              //выводим ошибку mysql
    8.         mysql_select_db("objava")            // Соединяемся с базой
    9.         or die (mysql_error());             //выводим ошибку mysql
    10.         $id=$_REQUEST['id'];// получаем id списка-1
    11.         $p=$_REQUEST['parametr']; //получаем параметр для КЕЙСА
    12.        
    13.         switch ($p)
    14.                           {
    15.                               case "podkatalog": {$query_2 = "SELECT podkatalogID,podkatalogName FROM podkatalog where katalogID='$id'";}; // Если  "podkatalog" то открываем список-2 по id
    16.                               break;
    17.                               case "addKatalog": { //если "addKatalog" то производим добавление
    18.                                   $name=iconv("utf-8","windows-1251",$_REQUEST['name']); //функция //перевода кодировки (необязательно) можно просто $name=$_REQUEST['name']
    19.                                   $query ="INSERT INTO katalog (`name`) VALUES ('".$name."')";
    20.                                   $result = mysql_query($query);
    21.                                   $query_2 = "SELECT * FROM katalog";
    22.                               };
    23.                               break;
    24.                               default:  $query_2 = "SELECT * FROM katalog"; //если не передан не один параметр, то просто открываем список-1
    25.                             }; //выводим все каталоги    
    26.  
    27.        
    28.        
    29. $result_1 = mysql_query($query_2)  or die (mysql_error()); //Делаем выборку с параметром $query_2
    30.       while ($row = mysql_fetch_row($result_1)) // Задаём массив
    31.       { //Начало цикла  while
    32.   //производим выдачу
    33.          echo '<option value="' . $row['0'] . '">' . $row['1'] . '</option>' . "\r\n"; //Выводим <option>
    34.        } //конец цикла  while
    35.  
    36.   }//конец цикла передачи
    37.  
    38.   else {
    39.      echo 'Bad request!';
    40.     exit;
    41. }
    42.    mysql_close($link1);//закрываем соединение MySQL
    43.  
    44. ?>
    Спасибо всем кто отвечает на мои вопросы!
     
  23. jquery

    jquery Активный пользователь

    С нами с:
    27 ноя 2009
    Сообщения:
    2
    Симпатии:
    0
    Код
    Код (Text):
    1.  
    2. $(document).ready(function() {
    3. $("#category").load("mail_ajax.php");
    4. });
    лучше заменить на mail_ajax.php, быстрее в два раза. А так всё хорошо.
     
  24. Koc

    Koc Активный пользователь

    С нами с:
    3 мар 2008
    Сообщения:
    2.253
    Симпатии:
    0
    Адрес:
    \Ukraine\Dnepropetrovsk
    jquery кого позвать?
     
  25. spieler

    spieler Активный пользователь

    С нами с:
    29 ноя 2009
    Сообщения:
    1
    Симпатии:
    0
    Не передается. Работает только в Опере. IE вообще не реагирует, в Мозилле возвращается массив. Если я все правильно понимаю, это связано с проблемой XMLHttpRequest в Мозилле.

    Или не связано... Версия jQuery 1.3.2

    UPD. Проблема решена. Забыл убрать print_r массива выборки из базы.