wish
Новичок
Работа функции JS для передачи данных из XMLHttp, навигация на основе select
Дано:
Форма, которая предназначена для навигации в каталоге предприятий.
Форма содержит 4 элемента select: regId, cityId, catId, subCatId (регион, город, категория, подкатегория)
Каждый элемент вызывает работу функции по событию onClick:
goReg(), goCity(), goCat(), goSubCat();
Функция формирует переменную URL с GET параметрами, передает значение в php файл, получает ответ и выводит результат в дочерний элемент select (первый элемент select regId - сформирован сразу, остальные select - пустые значения)
Я хочу обрабатывать все запросы в одном php файле и одной JS функцией, которая в зависимости от вызывающей функции формирует на странице select и другие элементы (div, span и т.д.).
Первая этап проходит отлично, первый select (regId) формирует второй (cityId). Но второй select (cityId) не вызывает никакого действия, я думаю, что это из-за путаницы с переменной fName в файле ajax.js (глобальная, локальная)
Ниже я привожу код всех трех файлов, которые участвуют в процессе, всего это около 300 строк, я не стал ничего резать, так как может кто-то возьмет структуру для примера.
Меня особенно интересуют Ваши комментарии по поводу JavaScript кода.
Большое спасибо за советы!
ajax_test.html
ajax.js
some.php
Дано:
Форма, которая предназначена для навигации в каталоге предприятий.
Форма содержит 4 элемента select: regId, cityId, catId, subCatId (регион, город, категория, подкатегория)
Каждый элемент вызывает работу функции по событию onClick:
goReg(), goCity(), goCat(), goSubCat();
Функция формирует переменную URL с GET параметрами, передает значение в php файл, получает ответ и выводит результат в дочерний элемент select (первый элемент select regId - сформирован сразу, остальные select - пустые значения)
Я хочу обрабатывать все запросы в одном php файле и одной JS функцией, которая в зависимости от вызывающей функции формирует на странице select и другие элементы (div, span и т.д.).
Первая этап проходит отлично, первый select (regId) формирует второй (cityId). Но второй select (cityId) не вызывает никакого действия, я думаю, что это из-за путаницы с переменной fName в файле ajax.js (глобальная, локальная)
Ниже я привожу код всех трех файлов, которые участвуют в процессе, всего это около 300 строк, я не стал ничего резать, так как может кто-то возьмет структуру для примера.
Меня особенно интересуют Ваши комментарии по поводу JavaScript кода.
Большое спасибо за советы!
ajax_test.html
PHP:
<head>
<script language="JavaScript" src="ajax.js"></script>
</head>
<body>
<br>
<form name="form1" style="margin: 0px;">
<!-- навигация по каталогу : начало -->
<table cellspacing="0" cellpadding="0" id="settings" bgcolor="#fafafa" border="0">
<tr>
<td id="moduleTop">Навигация по каталогу</td>
<td colspan="2" style="border-bottom: 1px Solid Black;background: White;"> </td>
</tr>
<tr>
<td id="moduleBaseL">Регион:</td>
<td id="moduleBaseR" colspan="2">
<select name="regId" size="1" onChange="goReg();">
<OPTION value="">Выберите регион</OPTION>
<?php
//Делаем выборку активных городов
$GetFromDb = mysql_query("SELECT * FROM cities WHERE active='yes' ORDER BY parentReg") or die("Не удалось подключиться к базе данных<br>".mysql_error()."");
global $regArray;
while($citiesActiv = mysql_fetch_array($GetFromDb))
{
//Создаем массив, содержащий id регионов с активными городами
$regArray[] = $citiesActiv['parentReg'];
}
if (!empty($regArray))
{
global $regArray;
$regArray = array_unique($regArray);
$count = count($regArray);
foreach ($regArray as $regIdArr)
{
global $regId;
$regId = @$_GET['regId'];
//Делаем выборку регионов, сортируем по regId
$GetFromDb2 = mysql_query("SELECT * FROM regions WHERE regId=$regIdArr ORDER BY regId") or die("Не удалось подключиться к базе данных<br>".mysql_error()."");
while ($regArray1 = mysql_fetch_array($GetFromDb2))
{
echo "<option value=\"".$regArray1['regId']."\"";
if ($regArray1['regId'] == @$regId)
echo "selected";
echo ">".$regArray1['regName']."</option>";
}
}
}
?>
</select>
</td>
</tr>
<tr>
<td id="moduleBaseL">Город:</td>
<td id="moduleBaseR" colspan="2">
<select name="cityId" size="1" id="respCity" onChange="goCity();">
<OPTION value="">Выберите город</OPTION>
<!-- Выводим список городов в зависимости от региона-->
<?=@$cityListOption?>
</select>
</td>
</tr>
<tr>
<td id="moduleBaseL">Категория:</td>
<td id="moduleBaseR" colspan="2">
<select name="catId" size="1" id="respCat" onChange="goCat();">
<OPTION value="">Выберите категорию</OPTION>
<?=@$catListOption?>
</select>
</td>
</tr>
<tr>
<td id="moduleBaseL">Подкатегория:</td>
<td id="moduleBaseR" colspan="2">
<select name="subCatId" size="1" onChange="goSubCat();">
<OPTION value="">Выберите подкатегорию</OPTION>
</select></td>
</tr>
<tr>
<td id="moduleBottom" colspan="3"> </td>
</tr>
</table>
<!-- навигация по каталогу : конец -->
</form>
</body>
</html
PHP:
function my_ajax(URL, FNAME)
{
fName = FNAME;
if (window.XMLHttpRequest)
{
req = new XMLHttpRequest();
req.onreadystatechange = verify;
req.open("GET", URL, true);
req.send();
}
else if (window.ActiveXObject)
{
req = new ActiveXObject("Msxml2.XMLHTTP");
if (req)
{
req.onreadystatechange = verify;
req.open("GET", URL, true);
req.send(null);
}
}
}
function verify()
{
if (req.readyState == 4)
{
if (req.status == 200)
{
var resp = req.responseText;
if (fName == 'goReg')
{
document.getElementById('respCity').outerHTML = '<select size="1" name="respCity">' + resp + '</select>';
}
if (fName == 'goCity')
{
document.getElementById('respCat').outerHTML = '<select size="1" name="respCat">' + resp + '</select>';
}
}
else
alert("ERROR " +req.statusText +' '+req.status+url);
}
}
function goReg()
{
url="some.php?regId="+document.forms['form1'].regId.value;
var fName = "goReg";
my_ajax(url, fName);
}
function goCity()
{
alert('goCity');
url="some.php?regId="+document.forms['form1'].regId.value+"&cityId="+document.forms['form1'].cityId.value;
var fName = "goCity";
my_ajax(url, fName);
}
function goCat()
{
url="some.php?regId="+document.forms['form1'].regId.value+"&cityId="+document.forms['form1'].cityId.value+"&catId="+document.forms['form1'].catId.value;
my_ajax(url);
}
function goSubCat()
{
url="some.php?regId="+document.forms['form1'].regId.value+"&cityId="+document.forms['form1'].cityId.value+"&catId="+document.forms['form1'].catId.value+"&subCatId="+document.forms['form1'].subCatId.value;
my_ajax(url);
}some.php
PHP:
<?php
//Подключаемся к базе данных
include_once("../include/config.inc");
header("Content-type: text/plain; charset=windows-1251");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
$regId=@$_GET["regId"];
$cityId=@$_GET["cityId"];
$catId=@$_GET["catId"];
$subCatId=@$_GET["subCatId"];
if (isset($regId) and !empty($regId))
{
echo "<option value=\"\"> </option>";
if (!isset($regId) or !is_numeric($regId) or $regId < 0 or $regId == 1)
{
$GetFromDb = mysql_query("SELECT * FROM cities WHERE active='yes' ORDER BY cityId") or die("Не удалось подключиться к базе данных<br>".mysql_error()."");
}
else
{
$GetFromDb = mysql_query("SELECT * FROM cities WHERE parentReg=$regId AND active='yes' ORDER BY cityId") or die("Не удалось подключиться к базе данных<br>".mysql_error()."");
}
//Делаем выборку городов, сортируем по regId
while ($cityArray = mysql_fetch_array($GetFromDb))
{
echo "<option value=\"{$cityArray['cityId']}\"";
if ($cityArray['cityId'] == @$cityId)
echo "selected";
echo ">".$cityArray['cityName']."</option>";
}
}
if (isset($cityId) and !empty($cityId))
{
global $catId;
//Делаем выборку категорий, сортируем по catId
$GetFromDb = mysql_query("SELECT * FROM catCategories WHERE parentCatId=0 AND active='yes' ORDER BY catName") or die("Не удалось подключиться к базе данных<br>".mysql_error()."");
while ($catArray1 = mysql_fetch_array($GetFromDb))
{
echo "<option value=\"{$catArray1['catId']}\"";
if ($catArray1['catId'] == @$catId)
echo "selected";
echo ">".$catArray1['catName']."</option>";
}
}
if (isset($subCatId) and !empty($subCatId))
{
echo "***";
if (!isset($catId) or !is_numeric($catId) or $catId < 0)
{
$GetFromDb = mysql_query("SELECT * FROM catCategories WHERE parentCatId!=0 ORDER BY catName") or die("Не удалось подключиться к базе данных<br>".mysql_error()."");
}
else
{
$GetFromDb = mysql_query("SELECT * FROM catCategories WHERE parentCatId=$catId ORDER BY catName") or die("Не удалось подключиться к базе данных<br>".mysql_error()."");
}
//Делаем выборку подкатегорий, сортируем по catId
while ($catArray = mysql_fetch_array($GetFromDb))
{
echo "<option value=\"{$catArray['catId']}\"";
if ($catArray['catId'] == @$subCatId)
echo "selected";
echo ">".$catArray['catName']."</option>";
}
}
?>
)