Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Работа функции JS для передачи данных из XMLHttp, динамическая навигация на основе select 
:(
    Опции темы
rised
Дата 14.2.2007, 15:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 2
Регистрация: 14.2.2007

Репутация: нет
Всего: нет



Дано:

Форма, которая предназначена для навигации в каталоге предприятий.
Форма содержит 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
//Подключаемся к базе данных
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"];

?> 
<html>
    <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;">&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" 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">&nbsp;</td>
            </tr>
        </table>
        <!-- навигация по каталогу : конец -->    
</form>


</body>
</html>


ajax.js
Код

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
//Подключаемся к базе данных
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=\"\">&nbsp;</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>";
                    }
    }

?>

PM MAIL   Вверх
Sardar
Дата 14.2.2007, 16:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Цитата(rised @  14.2.2007,  14:19 Найти цитируемый пост)
Меня особенно интересуют Ваши комментарии по поводу JavaScript кода.

Вроде IE only из-за не стандартного outerHTML, что мешало сделать так не знаю:

Код
var el, nel = document.createElement('div');
nel.innerHTML = '<select size="1" name="respCity">' + resp + '</select>';
nel.id = 'respCityContainer';
(el = document.getElementById('respCityContainer')).parentNode.replaceChild(nel, el);


В остальном обычное выдёргивание вёрстки с сервера по запросу, к AJAX'у почти не имеющее отношения. Помним что в "правильном AJAX" с сервера достаём только XML контент, вёрстка на клиенте.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
rised
Дата 15.2.2007, 06:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 2
Регистрация: 14.2.2007

Репутация: нет
Всего: нет



iinerHTML у меня почему-то не работает...
(и я поставил Ваш код вместо своего и тоже у меня ошибки появились, работать перестал, как его переделать я не сообразил)

может Вы знаете работающий пример (с кодом)  smile , но только мне нужно, чтобы select выводил массив option в другой select и таблицу в div

Я понимаю как это сделать на php, но с JavaScript у меня не хватает практики.  smile 

Спасибо!
PM MAIL   Вверх
Sardar
Дата 16.2.2007, 01:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Нужно было обернуть <select> в div с id="respCityContainer" и всё. Ну или в span, смотря какая вёрстка. Слой создал, что бы тебе было понятней с твей логикой, а самом деле просто document.getElementById('respCityContainer').innerHTML="<select... достаточно.

Вёрстка:
Код
<div id="respCityContainer"><select name="respCity">...</select></div>



--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Esco
Дата 26.8.2007, 14:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 21
Регистрация: 20.7.2007

Репутация: нет
Всего: нет



Ребяты, в продолжение темы... 

У меня такая же примочка - выбор страны, затем выбор района и города.. селектом
Все работает под IE.

В других браузерах не работает.
Помогите выровнять. Страница здесь - 
http://lovefree.us/registration.html

значится так - грузится селест со странами, на OnChange - Ajax запросом выдергивается селект с районами<select name=state>, также с городами <select name=city>...
и вставляется результат в cоответсвующие <div id=state><div id=city>.... 
все нормально....
далее нажимаем кнопку "регистрация" и переменные state, city не передаются нифига... в браузер нетскейп , firefox, opera...

передаются только в IE..

В чем проблема? переменные в форму, для последующей передачи нужно ставлять только inner.html?

Это сообщение отредактировал(а) Esco - 26.8.2007, 14:13
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0784 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.