Каскад динамических списков

Silence87 · 23.03.2009, 16:20

Здравствуйте!
У меня задача сделать каскад динамических списков произвольной длины.
Нашла статью очень полезную по этой теме: http://www.kachayev.ru/2009/02/08/jq...zvolnoj-dliny/

Создаю файл list.php в директории ajax, файл jquery.js поместила в папку js, полностью скопировала код примера и создала файл test.htm
Пытаюсь открыть test.htm через localhost, но вылезает ошибка в ajax-запросе. Если я все правильно поняла, то неправильно передаются данные, либо что-то не так в php файле... но что именно не могу понять...
Поменяла кодировку с utf-8 на windows-1251, чтобы можно было нормально просмотреть страницу.. Думала, что дело в этом,но нет... Помогите, хоть кто-нибудь!!

Код test.htm

Код HTML:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 	<link href="style/search.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
    <title>создание каскада динамических списков</title>

    <script type="text/javascript">
(function($){
    /* Очищаем select */
    $.fn.clearSelect = function() {
        return this.each(function(){
            /* Проверяем является ли элемент select`ом */
            if(this.tagName=='SELECT') {
                this.options.length = 0;
                /* Блокируем на время заполнения */
                $(this).attr('disabled','disabled');
            }
        });
    }

    /* Удаляем старшие элементы */
    $.fn.clearField = function(selector) {
        /**
         * Ищем все элементы следующие за вызывавшим
         * и удовлеторяющие переданному селектору
         */
        this.nextAll(selector).remove();
        return this;
    }

    /* Заполняем select переданными данными */
    $.fn.fillSelect = function(dataArray) {
        return this.clearSelect().each(function(){
	    /* Проверяем является ли элемент select`ом */
            if(this.tagName=='SELECT') {
                var currentSelect = this;
                /* Добавляем пунтк меню "Выбрать..." */
                var start = new Option('Выбрать...', '-1');
                /* Устанавливаем этот option первым в списке */
                if($.support.cssFloat) {
                    currentSelect.add(start,null);
                } else {
                    currentSelect.add(start);
                }
                $.each(dataArray,function(index,data){
                    /* Если определено 'name' */
                    if(data.name) {
                        /* Создаем новый option */
                        var option = new Option(data.name,data.id);
                        /* Добавляем новый option к select`у */
                        if($.support.cssFloat) {
                            currentSelect.add(option,null);
                        } else {
                            currentSelect.add(option);
                        }
                    }
                });
                /* Выделяем первый элемент списка */
                $(this).removeAttr('disabled').find('option:first').attr('selected', 'selected');
            }
        });
    }
})(jQuery);

/* Функция отсылает ajax-запрос */
function getCategory(pcategory, level) {

    $.ajax({
        url: 'ajax/list.php',
        type: 'post',
        data: 'pcategory='+ pcategory +'&level='+ level,
        dataType: 'JSON',
        
        beforeSend: function(){
            // Блокируем все необходимы select`ы
            $('select[name^=category_]').attr('disabled', 'disabled');
        },
        complete: function(){            // Снимаем блокировку
            $('select[name^=category_]').removeAttr('disabled');
        },
        success: function(response){
            var data = eval('(' + response +')');
	    // Если количество категорий в ответе 0 либо не определено
            if(data.count === 'undefined' || data.count == 0) {
                // просто удаляет старшие уровни каскада
                $('select[name=category_'+ (data.level - 1) +']')
                    .clearField('select[name^=category]')
                    .clearField('span');
                return false;
            }
            if( $('select[name=category_'+ data.level +']').length ) {
                // Если select этого уровня уже существует
                // мы должны удалить все старшие select`ы,
                // очистить старые данные и заполнить новым контентом
                $('select[name=category_'+ data.level +']')
                    .clearField('select[name^=category]')
                    .clearField('span')
                    .fillSelect(data.item);
            } else {
                // Если select этого уровня не существует,
                // мы должны его создать и заполнить данными
                $('#categories select:last').after('<span>&gt;</span> <select name="category_'+ data.level +'"></select>');
                $('select[name=category_'+ data.level +']').fillSelect(data.item);
            }

            /* Сбрасываем старый обработчик */
            $('select[name=category_'+ data.level +']').unbind('change');
            /* Вешаем новый */
            $('select[name=category_'+ data.level +']').change(function(){ return clickEvent($(this)); });
            return false;
        },
         error: function(){
            // Сообщаем пользователю, что произошла ошибка
            $('#msg').append('<p>Some error with categories. Please, try later ;)</p>');
	    return false;}
    });
}

/* Добавляем обработчик событий при изменении пункта списка */
function clickEvent(select)
{
    var id = select.find('option:selected').attr('value');
    /**
     * Если id=-1, значит выбран пункт "Выбор.."
     * значит мы должны просто очистить старшие списки
     */
    if (id == '-1') {
    	select.clearField('select[name^=category]').clearField('span');
    	return false;
    }

    var level = parseInt(select.attr('name').replace('category_', '')) + 1;
    return getCategory(id, level);
}

$(document).ready(function(){
    /* Развешиваем обработчики */
    //$('select[name^=category] option').live("click", function(){
    //    var select = $(this).parents('select');
    //    var level = parseInt(select.attr('name').replace('category_', '')) + 1;
    //    return getCategory(select.find('option:selected').attr('value'), level);
    //})

    /* Получаем список категорий */
    getCategory(0, 0);
});
    </script>
</head>
<body>
	<div id="wrapper">
		<h1>Пример динамического каскада списков:</h1>

<div id="searchQuery">

<form name="search" action="" method="post">
	<table width="973" bgcolor="#f2f2f2" border="0" cellpadding="5" cellspacing="5">
		<tbody>
			<tr>
				<td width="218">&nbsp;</td>
				<td width="735" align="right">Обрезанная форма для поиска :)</td>
			</tr>
			<tr>
				<td><div align="right">
						<div align="right">Категория:</div>
				</div></td>
				<td id="categories">
					<select name="category_0">

					</select>
				</td>
			</tr>
		</tbody>
	</table>
</form>
<p>&nbsp;</p>
</div>
	<div id="msg">
		<h1>Сообщения о возможных ошибках: </h1>
	</div>
</body>
<html>

Код list.php

PHP код:


			
<?php

 

/* Если это не AJAX.. умираем :) */

if( $_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest')

    die( 'Request Error!' );



$categories = array(

    'x0'  => 'Компьютерная техника', 'x1'  => 'Персональные компьютеры',

    'x2'  => 'Windows', 'x3'  => 'Athlon', 'x4'  => 'Celeron',

    'x5'  => 'Pentium', 'x6'  => 'Macintosh', 'x7'  => 'Прочее',

    'x8'  => 'Ноутбуки', 'x9'  => 'КПК', 'x10' => 'Периферийные устройства',

    's0'  => 'Бытовая техника', 's1'  => 'Аудио-аппаратура',

    's2'  => 'Фотоаппараты', 's3'  => 'Микроклиматическое оборудование',

    's4'  => 'Вентиляторы', 's5'  => 'Кондиционеры', 's6'  => 'Оконные',

    's7'  => 'Навесные', 's8'  => 'Обогреватели', 'k0'  => 'Офисное оборудование',

    'k1'  => 'Копировальная техника', 'k2'  => 'Факсы'

);



$levels = array(

    'x0'  => '0',  'x1'  => 'x0',

    'x2'  => 'x1', 'x3'  => 'x2', 'x4'  => 'x2',

    'x5'  => 'x2', 'x6'  => 'x1', 'x7'  => 'x1',

    'x8'  => 'x0', 'x9'  => 'x0', 'x10' => 'x0',

    's0'  => '0',  's1'  => 's0',

    's2'  => 's0', 's3'  => 's0',

    's4'  => 's3', 's5'  => 's3', 's6'  => 's5',

    's7'  => 's5', 's8'  => 's0', 'k0'  => '0',

    'k1'  => 'k0', 'k2'  => 'k0'

);





$pcategory = $_POST['pcategory'] ? $_POST['pcategory'] : 0;

$level        = $_POST['level'] ? $_POST['level'] : 0;



$list = array();

/**

 * @var array Промежуточный массив идентификаторов категорий

 */

$result = array();

 

/**

 * Получаем идентификаторы нужных нам категорий

 * @see http://www.php.net/array_keys

 */

foreach( array_keys($levels, $pcategory) as $value)

    $result[] = array('id'=>$value, 'name'=>$categories[$value]);

 

/* Заносим категории в результирующий массив */

if(count($result))

    $list['item'] = $result;

 

/* Указываем дополнительные параметры */

$list['count'] = count($result);

$list['level'] = $level;

 

/* Явно указываем формат данных */

header('Content-type: application/json');

 

/**

 * Преобразуем в массив в JSON

 * @see http://www.php.net/json_encode

 */

echo json_encode($list);



?>

Ошибка следующая:
при ajax-запросе выполняется раздел error.
error: function(){
// Сообщаем пользователю, что произошла ошибка
$('#msg').append('<p>Some error with categories. Please, try later ;)</p>');
return false;}
});
выводит это сообщение. Получается что в раздел success не заходит...
в чем причина? в передаче данных? или в php файле? или может еще в чем...

hawk777 · 20.01.2010, 20:15

У меня работает нормально

20.01.2010, 20:15	#2
hawk777 Неактивный пользователь Пол: Регистрация: 27.10.2009 Сообщений: 8 Репутация: 0	Re: Каскад динамических списков У меня работает нормально

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Программа для создания динамических меню для веб страниц	no_n@me	Веб - Программирование	5	03.02.2007 14:11