Как создать связанные select?

Question

[Алексей Алексин]

Добрый день!

В базе хранятся категории и подкатегории. У меня на форме есть два select, при выборе категории в первом необходимо заполнить второй соответствующими подкатегориями без перезагрузки страницы.

Ajax только недавно начал изучать, нашел похожий пример - вот html

<div class="form-group">
     <label class="col-md-2 control-label">Категория:</label>
           <div class="col-md-10">
                <select onchange="javascript:selectCategory();" name="category_id" id="category_id"  class="form-control">
		    <?php if (is_array($categoriesList)): ?>
		     <?php foreach ($categoriesList as $category): ?>
		         <option value="<?php echo $category['id']; ?>"> <?php echo $category['name']; ?></option>
		     <?php endforeach; ?>
		    <?php endif; ?>
		</select>
           </div>
</div>
														
<div  class="form-group">
    <label class="col-md-2 control-label">Подкатегория: </label>
    <div name="selectCategory" class="col-md-10">
     </div>
</div>

При выборе категории срабатывает скрипт

function selectCategory(){
        var category_id = $('select[name="category_id"]').val();
        if(!category_id){
                $('div[name="selectCategory"]').html('');
                
        }else{
                $.ajax({
                        type: "POST",
                        url: "/ajax.base.php",
                        data: { action: 'showRegionForInsert', category_id: category_id },
                        cache: false,
                        success: function(responce){ $('div[name="selectCategory"]').html(responce); }
                });
        };
};

Он вызывает вот этот файл

switch ($_POST['action']){
                
        case "showRegionForInsert":
                echo '<select name="pod_category_id" id="pod_category_id"  class="form-control">';
				$ListPodCategories = Category::PodCategoriesListAll($_POST['$category_id']);
              
				
                foreach ($ListPodCategories as $listCateg) {
                        echo '<option value="'.$listCateg['id'].'">'.$listCateg['name'].'</option>';
                };
                echo '</select>';
                break;
                
               
};

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

Comments

[riot26]

что в консоли браузера?

[OVK2015]

В консоле что возвращает?

<select name="pod_category_id" id="pod_category_id"  class="form-control"></select>

[Алексей Алексин]

riot26: OVK2015: когда выбираю значение в первом селекте, там появляется это "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.".

[OVK2015]

Павел Мелехов: Вкладку Network смотрите. Что приходит в ответ от ajax.base.php

[Алексей Алексин]

OVK2015: а что делать если нет form data ?

[OVK2015]

Павел Мелехов:

а что делать если нет form data ?

Нет где? В ответе сервера что пишет?

[Алексей Алексин]

OVK2015: ну во вкладке Network у ajax.base.php нет form data. Вы же мне сказали там смотреть) я раньше это не делал. погуглил - написано было эту строку искать

[OVK2015]

Павел Мелехов: Я так понимаю, что гуглили вы про передачу параметров от js к phpю В вашем случае они внизу вкладки Network->Headers будут. Правда, несколько в другом виде.
Мне интересно, что будет во вкладке Network->Response

[Алексей Алексин]

OVK2015: Ну если я на этот раз правильно уже посмотрел, то в Response же просто сам скрипт написан

[OVK2015]

Павел Мелехов:
О как....
Давайте, поэтапно, что ли.
https://developers.google.com/web/tools/chrome-dev...
Я вот про эту вкладку говорю, если вы chrome пользуетесь, конечно

[OVK2015]

Павел Мелехов: Там чуть ниже идет View HTTP response content

[Алексей Алексин]

OVK2015: у меня хром, я тут и смотрю. В превью пусто, в response код скрипта, в headers разная инфа (general, response headers и request headers) .Так что из этого смотреть то))

[OVK2015]

Павел Мелехов:

в response код скрипта

Т.е. в response приходит чистый php код:

...
switch ($_POST['action']){
                
        case "showRegionForInsert":
                echo '<select name="pod_category_id" id="pod_category_id"  class="form-control">';
        $ListPodCategories = Category::PodCategoriesListAll($_POST['$category_id']);
              
        
                foreach ($ListPodCategories as $listCateg) {
                        echo '<option value="'.$listCateg['id'].'">'.$listCateg['name'].'</option>';
                };
                echo '</select>';
                break;
...

а не html теги, кот. ожидаете? Правильно понял?

[Алексей Алексин]

OVK2015: я на свежую голову с утра понял в чем дело, это из-за обращению к функции в модели. Написал запрос сразу в ajax.base.php и в response появилось . Пытался из этого файла распечатать id который передается, но ничего не вывелось, массив пустой. Но в Headers у ajax.base.php вроде выводит id категории

[Алексей Алексин]

OVK2015: ой, html не вставился в коммент. Ну в общем в response пустой селект выводится

[Алексей Алексин]

OVK2015: причем action то передается, раз селект вообще вывелся. Ну и если верить form data в headers то и id передается, тогда почему если его вывести в ajax.base.php ничего не выводится.

[OVK2015]

Павел Мелехов:

причем action то передается, раз селект вообще вывелся.

Верно рассуждаете. => Не отрабатывает foreach ($ListPodCategories as $listCateg)
Добавьте перед ним print_r($ListPodCategories); Так хоть понятно будет, что Category::PodCategoriesListAll выбирает.
+ Покажите, что во вкладке Network->Headers скрипту в параметрах передается

[Алексей Алексин]

OVK2015: print_r вывел пустой массив, что в принципе логично, если номера категории нет.

[Алексей Алексин]

OVK2015: action:showRegionForInsert
category_id:27

[OVK2015]

Павел Мелехов: Простая проверка:
В $ListPodCategories = Category::PodCategoriesListAll($_POST['$category_id']); вместо $_POST['$category_id'] вставьте эту 27. Как ее туда вставлять, как строку или как число зависит от реализации метода(мне его отсюда не видно). Ну и откройте сам ajax.base.php в браузере.

[Алексей Алексин]

OVK2015: поменял параметр на число и вывелось все.

[OVK2015]

Павел Мелехов: Т.е. работает?

[Алексей Алексин]

OVK2015: ну так мне надо чтоб параметр вставлялся, а я просто число для проверки вставил, как вы и посоветовали. Естественно с числом все работает. Я просто не понимаю, почему один параметр (action) передается без проблем, а второй нет. Причем в headers оба указаны верно.

[OVK2015]

Павел Мелехов: Видать дело в реализации вашего метода Category::PodCategoriesListAll,- его то вы не показываете
Если

поменял параметр на число и вывелось все.

Попробуйте:
Category::PodCategoriesListAll(intval($_POST['$category_id']));

[Алексей Алексин]

OVK2015: intval не помог.
$sql = 'SELECT id, name FROM category WHERE status = "1" and parent IS NOT NULL and parent = :category_id';
$result = $db->prepare($sql);
$result->bindParam(':category_id', intval($_POST['$category_id']), PDO::PARAM_INT);
$result->execute();

Обычный запрос с параметром) вместо переменной ставлю число - работает, на других страницах работает. Хоть убей, не пойму в чем проблема, ведь один параметр есть, второй тоже есть, но его не видно - магия

[OVK2015]

ведь один параметр есть, второй тоже есть, но его не видно

Мда... Сия тайна велика есть.
Ладно, давайте так:
1. Код в последнем посте НЕ рабочий? Правильно понимаю?
2.

ставлю число - работает

покажите как php код в этом случае выглядит.
3.

на других страницах работает

как выглядят параметры запросов(строка в devtool) в работающем и не работающем вариантах.

[Алексей Алексин]

OVK2015: ну с числом это вместо $_POST['$category_id'] ставлю переменную равную 27 например. Я уже вынесла этот запрос вместо вызова функции, так что без разницы уже, что там передавалось в других местах

[OVK2015]

Павел Мелехов:

Я уже вынесла этот запрос вместо вызова функции

Это все здорово, конечно! И от чего теперь отталкиваться? В вопросе покажите как это все сейчас выглядит.
+ Т.е., сейчас и на тех страницах где раньше работало сейчас перестало?

[Алексей Алексин]

я уже показывал, как выглядит запрос. этот запрос теперь вместо Category::PodCategoriesListAll($_POST['$category_id']);
Да и забудьте уже про другие страницы, они вообще не при чем. я просто как пример говорил, что там такой же запрос и он работает - следовательно моя проблема не из-за него. От того, что я поменял вызов функции на запрос из этой функции ничего конкретно не поменялось.

[Алексей Алексин]

OVK2015: в общем спасибо, но проблема уже решена. всего то вместо $_POST['$category_id'] нужно было писать $_POST['category_id']

Answer 1

[kamenevn]

в ajax.base.php
не нужно возвращать html, нужно вернуть в ответ в формате json

foreach ($ListPodCategories as $listCateg) {
                        echo '<option value="'.$listCateg['id'].'">'.$listCateg['name'].'</option>';
                };

Переделать в

$result = ['data'];
foreach ($ListPodCategories as $listCateg) {
$result['data'][] = [
'id' => $listCateg['id'],
'name' => $listCateg['name']
];
}

и ответ возвращаешь в json
echo json_encode($result);

на js делаешь
не
$('div[name="selectCategory"]').html(responce);
а примерно так:
Если IE8 не нужен, то

$('div[name="selectCategory"]').empty();
$.each(response.data, function(key, value) {
$('div[name="selectCategory"]').append(new Option(value.name, value.key));
}

Если нужен, то примерно так:

$('div[name="selectCategory"]').empty();
$.each(response.data, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value", value.id)
                    .text(value.name)); 
});

Answer 2

[Daemon23RUS]

в начало файла ajax.base.php добавьте

<?php

Comments

[Алексей Алексин]

там уже есть это.