HTML+CSS+JavaScript

Извиняюсь - невнимательно просматривал ваш код. У вас там динамически вставляются теги (option) В таком случае мой последний пост (автор: coloboc66 (11.02.2007 в 13:26) ) считайте недейчствительным, лучше оставьте все как было до него. Помочь не могу, так как мускул у меня не установлен.
если у меня переменная resp, содержащая результат работы php скрипта вставляется в какой-то один элемент, то как мне разделить информацию? - в функцию processregChange или go() добавьте код ява-скрипт, который по событию обращения к аяксу будет менять элемент, в который получаете ответ сервера.

coloboc66

Спасибо за помощь - я разделил файлы и я думаю, что ajax заработал, но теперь я не понимаю, как мне получить запрос нужном формате или режиме.

Не могу решить логическую задачу:
Есть блок навигации по каталогу, написанный на php, который делает выборки из MySQL БД на основе параметров:
regId, cityId, catId, subCatId

По умолчанию выводится список регионов в тэге select форы form1

В скрипте обрабатываются 4 события:

есть значение regId - в select name cityId загружаются города региона
есть значение cityId - в select name catId выводится список категорий
есть значение catId - в select name subCatId выводится список подкатегорий, в ячейку таблицы загружается список фирм из другой таблицы БД
есть значение subCatId - в ячейку таблицы загружается список фирм из другой таблицы БД

и я не могу понять:
если у меня переменная resp, содержащая результат работы php скрипта вставляется в какой-то один элемент, то как мне разделить информацию?
мне нужно получить ответ от сервера в виде переменная $cityList содержит html код - для select name cityId, для $firmsList получает код для слоя в котором выводятся фирмы и все это аккуратно вставляется.

Я сейчас читаю книгу "Ajax и PHP" и надеюсь, что разберусь, но может Вы подскажете места на которые следует обратить внимания.

Привожу код двух файлов:

index.htm

<? //Подключаемся к базе данных include_once("../include/config.inc"); ?>  <script language="javascript"> function my_ajax(URL) {      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){processReqChange();}else alert("ERROR " +req.statusText   +' '+req.status+url);} } function processReqChange() { var resp = req.responseText; document.getElementById('cityId').innerText=document.write(resp); } function goReg() { var url="index1.php?regId="+document.forms['form1'].regId.value; my_ajax(url); } function goCity() { var url="index1.php?regId="+document.forms['form1'].regId.value+"&cityId="+document.forms['form1'].cityId.value; my_ajax(url); } function goCat() { var url="index1.php?regId="+document.forms['form1'].regId.value+"&cityId="+document.forms['form1'].cityId.value+"&catId="+document.forms['form1'].catId.value; my_ajax(url); } function goSubCat() { var url="index1.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); } </script>     <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;">&nbsp;</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" onChange="goCity();">                 <OPTION value=""></OPTION>                 </select>                 </td>                         </tr>                          <tr>                 <td id="moduleBaseL">Категория:</td>                 <td id="moduleBaseR" colspan="2">                 <select name="catId" size="1" onChange="goCat();">                 <OPTION value=""></OPTION>                 </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">&nbsp;</td>             </tr>         </table>         <!-- навигация по каталогу : конец -->     </form> <div id="response" />

index1.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))     {                 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($catId) and !empty($catId))     {                 global $catId;                 $catId = $_GET['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))     {                 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>";                     }     } ?>

Ничего не понял: а зачем вы РНР-скрипт и аякс объединили в одном файле index.htm ???РНР-файл должен быть отдельным и выглядеть так:
file.php

<?  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);  //Перед header() см выше нельзя ничего ставить!!! //Подключаемся к базе данных  include_once("../include/config.inc");  $regId=@$_GET["regId"];  $cityId=@$_GET["cityId"];  $catId=@$_GET["catId"];  $subCatId=@$_GET["subCatId"];  Дальше пишете в этом файле все, что касается запросов к БД на основе принятых $_GET (повынимайте код из файла index.htm). В общем - весь РНР-код перенести сюда. ?>

А в файле index.htm формируете к нему запрос:

var url="file.php?regId="+document.forms[....................

coloboc66
Я почитал литературу по ajax, еще раз посмотрел код и попытался все склеить.
Хотя бы для первой пары select
Первый раз все работает
Второй раз работает и пишет undefined
Третий раз огибка

Выкладываю весь скрипт, если у Вас будет время укажите, что я пропустил:

<? //Подключаемся к базе данных 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"]; ?>  <script language="javascript"> function my_ajax(URL) {      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){processReqChange();}else alert("ERROR " +req.statusText   +' '+req.status+url);} } function processReqChange() { var resp = req.responseText; document.getElementById('response').innerText=document.write(resp); } function go() { var url="index.htm?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); } </script> <?=@$regId?> <div id="response">     <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;">&nbsp;</td>             </tr>             <tr>                 <td id="moduleBaseL">Регион:</td>                 <td id="moduleBaseR" colspan="2">                 <select name="regId" size="1" onChange="go();">                 <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" onChange="go();"> <SCRIPT language="JavaScript"> <!--     document.write('<OPTION value=index.php></OPTION>'); //--> </SCRIPT>                         <?php                 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>";                     }                 ?>                 </select>                 </td>                         </tr>                  <tr>                 <td id="moduleBottom" colspan="3">&nbsp;</td>             </tr>         </table>         <!-- навигация по каталогу : конец -->     </form> </div>

1. Да - два плюса - это опечатка, нужен один плюс.
2. Не index.php , а file.php - названия файлов могут быть любыми. Взаимодействуют они так: в файле index.htm формируется строковая переменная с url, на первом месте в которой ставится адрес РНР-файла:

var url="file.php?regld="+document.forms['form1'].regld.value+"&cityld="+...

Затем эта переменная передается в функцию аякса

my_ajax(url);

и аякс теперь знает, с каким РНР-файлом ему нужно открывать соединение:

req.open("GET",URL,true);

Ответ от РНР-файла на странице index.htm получается так:

var resp = req.responseText;  document.getElementById('response').innerText=resp;

3. Да- в <option> опечатка.

-

Спасибо, coloboc66

Сейчас разбираю Ваш код и у меня возникло несколько вопросов:

1) В строке:

var url="file.php?regld="+document.forms['form1'].regld.value+"&cityld="+document.forms['form1'].cityld.value++"&catld="+document.forms['form1'].catld.value++"&subCatld="+document.forms['form1'].subCatld.value;

Перед $catId и $subCat идет два плюса - это опечатка?

2) Каким образом взаимодействуют index.htm и index.php

3) У Вас также опечатка opton вместо option (я указываю на опечатки для будущих посетителей форума - понимаю, что Вы писали в спешке)
P.S. По форуму я искал, но нашел другие скрипты, которые работают без Ajax

Если вам даже лень по форуму поискать, то вы так ничему не научитесь. Не хотите сами работать и думать, так платите тогда, что-ли...
Файл index.htm

<script> function my_ajax(URL) {      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){processReqChange();}else alert("ERROR " +req.statusText   +' '+req.status+url);} } function processReqChange() { var resp = req.responseText; document.getElementById('response').innerText=""; document.getElementById('response').innerText=resp; } function go() { var url="file.php?regld="+document.forms['form1'].regld.value+"&cityld="+document.forms['form1'].cityld.value++"&catld="+document.forms['form1'].catld.value++"&subCatld="+document.forms['form1'].subCatld.value; my_ajax(url); } </script> <form name="form1"> <select name ="regld">Регион <opton value = "1"> <opton value = "2"> </select> <select name ="cityld">Город <opton value = "1"> <opton value = "2"> </select> <select name ="catld">Категория <opton value = "1"> <opton value = "2"> </select> <select name ="subCatld"> Подкатегория <opton value = "1"> <opton value = "2"> </select> <input type="button" value="GO" onclick="go()"> </form> <div id="response">

Файл file.php

<? 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); $regld=$_GET["regld"]; $cityld=$_GET["cityld"]; $catld=$_GET["catld"]; $subCatld=$_GET["subCatld"]; echo "Данные получены"; ?>

C первой частью проблем нет.
Я до сих пор не решил этот вопрос, поэтому если кто-нибудь объяснит или даст образец кода - буду благодарен.

Есть 4 form.select:
- Регион (regId)
- Город (cityId)
- Категория (catId)
- Подкатегория (subCatId)

В зависимости от значений передающихся в массиве $_GET сейчас выводятся следующие блоки:
- Путь
- Список предприятий с отдельной страницей
- Список предприятий без отдельной страницы
- Список категорий
- Список подкатегорий

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

Вопрос:
Как сделать на Ajax навигацию (элементы формы select)?

Спасибо

1) передаётся обычный запрос со значением "региона".
2) аякс обычный, а по форме у Вас будет отдельный вопрос - как генерировать селект - см. метод. add() для options (IE) и appendChild() для других. Или проще весь селект вставить как innerHTML. Как брать "регион" - тоже проблемы?