Связанные выпадающие списки с записями из базы данных. JQuery-AJAX + PHP

Статус
Закрыто для дальнейших ответов.

VladimirBuzin

Member
Регистрация
18.03.2018
Сообщения
19
Добрый вечер! Я создаю сайт для стоматологического кабинета. Проблемы возникли при создании связанных выпадающих списков. Я подключил нужные скрипты на главной странице и перепроверил названия таблиц, обработчиков, полей формы и базы данных, но при реализации возникли ошибки, причём я не пойму, какие именно. Notepad++ не выделяет строку с ошибкой красным цветом и не выводит внизу экрана пояснение ошибки, как Visual C++.

Я реализовал пример скрипта из Интернета для формы "страна-область-город", и он запустился без ошибок.

Файл "index.html" из архива "select.zip":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Связанные с помощью ajax списки</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="selects.js"></script>
<style>
.StyleSelectBox {
width:200px;
height:24px;
font:14px Arial, Tahoma, Helvetica, Verdana;
text-align:left;
background:#fff;
line-height:30px;
white-space:nowrap; /* запрещаем перенос */
/*padding:0 22px 0 12px; /* отступ справа с учетом стрелочки */
border:1;
zoom:1; /* для IE6 */}
#selectBoxInfo{
clear:left;
padding:10px;
font:16px "Tahoma";
color:red;}

</style>
</head>
<body><br /><br /><br /><br />
<table align="center" >
<tr>
<td><form action="#" method="POST">
Страна:<br />
<select name="country_id" id="country_id" class="StyleSelectBox">
<option value="0">- выберите страну -</option>
<option value="3159">Россия</option>
<option value="9908">Украина</option>
<option value="248">Беларусь</option>
</select></td><td>
Регион:<br />
<select name="region_id" id="region_id" disabled="disabled" class="StyleSelectBox">
<option value="0">- выберите регион -</option>
</select></td><td>
Город:<br />
<select name="city_id" id="city_id" disabled="disabled" class="StyleSelectBox">
<option value="0">- выберите город -</option>
</select>
</form></td>
</tr>
</table><br />
<div align="center" id="selectBoxInfo"></div>



</body>
</html>

Файл "connect.php" из архива "select.zip":

<?php
/******************************************************************************************
* Эти файлы скачаны с сайта http://blog.gssl.ru и являются свободными в распространении.
* Создай свой блог с системой управления контентом GSSL-Blog Free.
******************************************************************************************/
$host='localhost'; //Хост
$db='select1'; //Имя БД
$user_mysql='root'; //Имя пользователя БД
$pass_mysql=''; //Пароль пользователя БД
$link = mysqli_connect($host, $user_mysql, $pass_mysql, $db) or die("<center><h1>Подключение не удалось!</h1></center>");
mysqli_query($link, "set character_set_client='utf8'");
mysqli_query($link, "set character_set_results='utf8'");
mysqli_query($link, "set collation_connection='utf8_general_ci'");
?>

Файл "get_regions.php" из архива "select.zip":

<?php
include_once 'connect.php';
$country_id = @intval($_POST['country_id']);
//$country_id = 3159;

$regs=mysqli_query($link, "SELECT name, region_id FROM region WHERE country_id=$country_id");

if ($regs) {
$num = mysqli_num_rows($regs);
$i = 0;
while ($i < $num) {
$regions[$i] = mysqli_fetch_assoc($regs);
$i++;
}
$result = array('regions'=>$regions);
}
else {
$result = array('type'=>'error');
}

//echo "<pre>";
//print_r ($result);
//echo "</pre>";
print json_encode($result);
//print var_dump($result)
?>

Файл "get_city.php" из архива "select.zip":

<?php
include_once 'connect.php';
$region_id = @intval($_POST['region_id']);
//$region_id = 4312;

$regs=mysqli_query($link, "SELECT name, city_id FROM city WHERE region_id=$region_id");

if ($regs) {
$num = mysqli_num_rows($regs);
$i = 0;
while ($i < $num) {
$citys[$i] = mysqli_fetch_assoc($regs);
$i++;
}
$result = array('citys'=>$citys);
}
else {
$result = array('type'=>'error');
}
/**
* if ($regs) {
* $num = mysql_num_rows($regs);
* $citys = array();

* for ($i=0; $i<$num; $i++)
* $city[$i] = mysql_fetch_row($regs);

* $i=0;
* foreach ($city as $r) {
* $citys[] = array('id'=>$i, 'title'=>$r);
* $i++;
* }
* $result = array('type'=>'success', 'citys'=>$citys);
* }
* else {
* $result = array('type'=>'error');
* }
*/
//echo "<pre>";
//print_r ($result);
//echo "</pre>";
print json_encode($result);
//print var_dump($result)
?>

Файл "selects.js" из архива "select.zip":

$(document).ready(function () {
$('#country_id').change(function () {
var country_id = $(this).val();
if (country_id == '0') {
$('#region_id').html('<option>- выберите регион -</option>');
$('#region_id').attr('disabled', true);
$('#city_id').html('<option>- выберите город -</option>');
$('#city_id').attr('disabled', true);
return(false);
}
$('#region_id').attr('disabled', true);
$('#region_id').html('<option>загрузка...</option>');

var url = 'get_regions.php';

$.post(
url,
"country_id=" + country_id,
function (result) {
if (result.type == 'error') {
alert('error');
return(false);
}
else {
var options = '';

$(result.regions).each(function() {
options += '<option value="' + $(this).attr('region_id') + '">' + $(this).attr('name') + '</option>';
});

$('#region_id').html('<option value="0">- выберите регион -</option>'+options);
$('#region_id').attr('disabled', false);
$('#city_id').html('<option>- выберите город -</option>');
$('#city_id').attr('disabled', true);

}
},
"json"
);
});

$('#region_id').change(function () {
var region_id = $(this).val(); //$('#region_id :selected').val();
//alert (region_id);
if (region_id == '0') {
$('#city_id').html('<option>- выберите город -</option>');
$('#city_id').attr('disabled', true);
return(false);
}
$('#city_id').attr('disabled', true);
$('#city_id').html('<option>загрузка...</option>');

var url = 'get_city.php';

$.post(
url,
"region_id=" + region_id,

function (result) {
if (result.type == 'error') {
alert('error');
return(false);
}
else {
var options = '';
$(result.citys).each(function() {
options += '<option value="' + $(this).attr('city_id') + '">' + $(this).attr('name') + '</option>';

});
$('#city_id').html('<option value="0">- выберите город -</option>'+options);
$('#city_id').attr('disabled', false);

$('#city_id').change(function(){
var value = $('#city_id :selected').text();
var city_id = $('#city_id :selected').val();
if (city_id !== '0') {
$('#selectBoxInfo').html('Выбран '+ value).
fadeIn(1000,function(){
$(this).fadeOut(2000);
});
}
});
}
},
"json"
);
});
});

Требуется на сайте для стоматологического кабинета создать скрипт для связанных выпадающих списков. При выборе врачебной специализации должен разблокироваться список услуг с записями из таблицы "service", а при выборе услуги - список врачей с записями из таблицы "doctor". Когда я перенёс скрипт из примера выше на свой сайт и выбрал врачебную специализацию, второй список с услугами даже не открылся. Разумеется, я переписал названия всех таблиц, обработчиков, полей формы и базы данных, и подключил к главной странице все скрипты. А где ошибки, не пойму.

Файл "stomkab-main.html" из архива "stomkab.zip":

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Студия современной стоматологии |</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="shortcut icon" href="images/toothdoctor_diente_10728.ico" type="image/x-icon">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="css/form-style.css" type="text/css" media="all">
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/roundabout.js" type="text/javascript"></script>
<script src="js/roundabout_shapes.js" type="text/javascript"></script>
<script type="text/javascript" src="selects.js"></script>
<!--[if lt IE 7]><script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script><![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->

</head>

<body>
<div class="top1">
<header>
<div class="main">
<h1><a href="stomkab-main.html"><img src="images/Logo4.jpg"></a></h1>
<div class="indent">
<p style="color: black;"><img src="images/6c68d1fa8ee30ed55b0b2147b47c229c.png" alt="">
<span style="font-weight:bold">+7 (4722) 50-54-73, +7 (920) 201-54-73</span><br />
Россия, г. Белгород, ул. Щорса, д. 8 "Б"
</p>
</div>
<div class="indent-right">
<p style="color: black;"><img src="images/clock-306409__340.png" alt="">
<span style="font-weight:bold">Время работы:</span><br />
Пн–Пт: с 8:00 до 20:00; Сб: с 8:00 до 17:00
</p>
</div>
<div class="inside">
<nav>
<ul class="sf-menu">
<li><a href="stomkab-main.html" class="current">Главная</a></li>
<li><a href="index-2.html">О компании</a></li>
<li><a href="index-1.html">Услуги и цены</a>
<ul>
<li><a href="#">Терапия</a></li>
<li><a href="#">Хирургия</a></li>
<li><a href="#">Ортопедия</a></li>
<li><a href="#">Ортодонтия</a></li>
<li><a href="#">Пародонтология</a></li>
</ul>
</li>
<li><a href="index-2.html">Наши врачи</a></li>
<li><a href="index-3.html">Лицензии</a></li>
<li><a href="index-4.html">Контакты</a></li>
</ul>
</nav>
</div>
</div>
</header>
</div>
<aside>
<div class="main">
<a href="#" class="btnPrev"><img src="images/button-1.png" alt=""></a><a href="#" class="btnNext"><img src="images/button-2.png" alt=""></a>
<div id="carousel">
<ul id="myRoundabout">
<li><img src="images/1307777.jpg" alt="" /></li>
<li><img src="images/news_file_24_l.jpg" alt="" /></li>
<li><img src="images/stomat-03.jpg" alt="" /></li>
<li><img src="images/Untitled-6.jpg.6d243a94d32c96a062ba4d3e399b24f0.jpg" alt="" /></li>
<li><img src="images/80414_content_Вэладент_улыбайся.jpg" alt="" /></li>
<li><img src="images/5d0eda80b4c8fd12548c50b746e50a5a.jpg" alt="" /></li>
<li><img src="images/akciya-plastinochnyj-protez-2e319f0a7265b99e24824ce68036675e.jpg" alt="" /></li>
</ul>
</div>
</div>
</aside>
<div class="bg_cont1">
<div class="bg_cont">
<section id="content">
<div class="main">
<div class="inside">
<div class="container_16">
<div class="tail">
<div class="container">
<div class="grid_4 alpha">
<h2>Ортопедия</h2>
<p class="p2">- Установка коронок<br />
- Установка протезов<br />
- И другое</p>
<div class="container"><a href="#" class="link-1">Подробнее</a></div>
</div>
<div class="grid_4">
<h2>Терапия</h2>
<p class="p2">- Лечение кариеса<br />
- Реставрация зубов<br />
- И другое</p>
<div class="container"><a href="#" class="link-1">Подробнее</a></div>
</div>
<div class="grid_4">
<h2>Хирургия</h2>
<p class="p2">- Удаление зуба<br />
- Имплантация<br />
- И другое</p>
<div class="container"><a href="#" class="link-1">Подробнее</a></div>
</div>
<div class="grid_4 omega">
<h2>Ортодонтия</h2>
<p class="p2">- Исправление прикуса<br />
- Исправление формы зубов<br />
- И другое</p>
<div class="container"><a href="#" class="link-1">Подробнее</a></div>
</div>
</div>
</div>
<div class="container">
<div>
<h2 align="center">Рады видеть Вас в нашей новой клинике!</h2>
<img alt="" src="images/009.jpg" class="img-left" />
<p align="justify">Наша компания уже 15 лет представляет широкий спектр различных стоматологических услуг: все виды лечебных и хирургических процедур, ортодонтия, протезирование и имплантация. За нашими плечами большой практический опыт и тысячи благодарных пациентов, которым наша дружная команда вернула не только красивую и белоснежную улыбку, но и уверенность в завтрашнем дне благодаря своевременному и правильному лечению.
Все наши врачи и доктора имеют профессиональную подготовку, но мы не стоим на месте. Для получения наилучших результатов весь медицинский персонал клиники регулярно повышает свой квалификационный уровень, проходя обучение как современным медикаментозным средствам лечения, так и новейшим технологиям в нашей сфере. Только так мы сможем обеспечить наших пациентов наивысшим качеством предоставляемых услуг.
Многие бояться боли во время стоматологических процедур. Но только не у нас! При проведении лечения или протезирования наша компания использует только новейшее оборудование и современные медикаменты.</p>
</div>
</div>
<div class="container" style="background-color:cyan;" align="center">
<h2 align="center">Наши лицензии</h2>
<table style="border-collapse: collapse; border: none;" cellpadding="15">
<tr style="border: none;"><td style="border: none;"><img alt="" src="images/1-130x185.jpg" />
</td>
<td style="border: none;">
<img alt="" src="images/2-130x185.jpg" />
</td>
<td style="border: none;">
<img alt="" src="images/3-130x185.jpg" /></td></tr>
</table>
</div>
<div class="tail">
<div class="container" style="background-color:violet;">
<h2 align="center">Наши преимущества</h2>
<div class="grid_4 alpha">
<p><img src="http://img.up-zdrav.ru/thumbs/200_auto_5_80/otkrytie_stomatologicheskogo_kabineta_6_vazhnyh_sovetov.jpg"></p>
<h1 align="center" style="color: green; font-family: 'Comic Sans MS'; font-size: 125%;">Профессиональное оборудование</h1>
<p class="p2" align="justify" style="color:black;">Мы следим за развитием медицинских технологий, используя в своей работе современные медицинские инструменты в полностью исправном, техническом состоянии. Это позволяет нам эффективно проводить все процедуры со 100% безопасностью для пациента и с минимальными неприятными ощущениями.</p>
</div>
<div class="grid_4">
<p><img src="images/vidy-koronok-dlya-zubov-1.jpg" width="200" height="208"></p>
<h1 align="center" style="color: green; font-family: 'Comic Sans MS'; font-size: 125%;">Качественные материалы</h1>
<p class="p2" align="justify" style="color:black;">Одна из составляющих эффективности нашей работы – качественные материалы, используемые врачами нашей клиники. И это не случайность. Мы особо тщательно подходим к выбору медикаментов и материалов, так как от них напрямую зависит конечный результат и самое главное – здоровье наших пациентов.</p>
</div>
<div class="grid_4">
<p><img src="images/zub_spasatel_(1).jpg" width="200" height="234"></p>
<h1 align="center" style="color: green; font-family: 'Comic Sans MS'; font-size: 125%;">Гарантия - 1 год</h1>
<p class="p2" align="justify" style="color:black;">Мы заботимся о здоровье наших пациентов и всегда несём ответственность за все оказанные нашей клиникой услуги. Только гарантия качества, которую мы предоставляем на каждую из выполненных медицинских процедур, может служить доказательством нашей надёжности и ответственного подхода к делу.</p>
</div>
<div class="grid_4 omega">
<p><img src="images/nagrada_4_3.jpg" width="202" height="199"></p>
<h1 align="center" style="color: green; font-family: 'Comic Sans MS'; font-size: 125%;">Опытные врачи</h1>
<p class="p2" align="justify" style="color:black;">Медицинский персонал клиники – это дружный и сплоченный коллектив с большим опытом работы. Наш высокий профессионализм обусловлен не только многолетней практикой работы с пациентами, но и постоянным изучением передовых стоматологических технологий и новейших медицинских препаратов.</p>
</div>
</div>
</div>
<div class="container">
<form action="#" method="POST" class="checkout">
<div class="checkout-header">
<h1 class="checkout-title">

Записаться на приём
<span class="checkout-price">GO!</span>

</h1>

</div>
<p>
<input type="text" name="surname" size="30" class="checkout-input checkout-name" pattern="[А-Яа-яЁё]{2,30}" placeholder="Фамилия" title="Введите фамилию на русском языке, от 2 до 30 символов" maxlength="30" required>
<input type="text" name="name" size="30" class="checkout-input checkout-name" pattern="[А-Яа-яЁё]{2,30}" placeholder="Имя" title="Введите имя на русском языке, от 2 до 30 символов" maxlength="30" required>
<input type="text" name="patronymic" size="30" class="checkout-input checkout-name" pattern="[А-Яа-яЁё]{7,30}" placeholder="Отчество" title="Введите отчество на русском языке, от 7 до 30 символов" maxlength="30" required>
<input type="tel" name="phone_number" size="30" class="checkout-input checkout-name" pattern="\+([0-9]{1,3})(\([0-9]{2,5}\))([0-9]{5,7})" placeholder="+XXX(XXXXX)XXXXXXX" maxlength="30" required>
</p>

<p>

<input type="email" name="email" size="80" class="checkout-input checkout-name" pattern="([A-z0-9_.-]{1,})@([A-z0-9_.-]{1,}).([A-z]{2,8})" placeholder="mail@example.com" maxlength="80" required>

<select name="med_spec" id="med_spec" class="checkout-input checkout-name" required>
<option value="0">Выберите область медицины</option>
<option value="1">Терапия</option>
<option value="2">Хирургия</option>
<option value="3">Ортопедия</option>
<option value="4">Ортодонтия</option>
<option value="5">Пародонтология</option>
</select>

<select name="services" id="services" class="checkout-input checkout-name" disabled required>
<option value="0">Выберите услугу</option>
</select>

<select name="doctors" id="doctors" class="checkout-input checkout-name" disabled required>
<option value="0">Выберите врача</option>
</select>

</p>

<p>
<input type="date" name="appointment_date" class="checkout-input checkout-name" min="1920-01-01" max="2075-01-01" placeholder="Дата приёма" required>
<input type="time" name="appointment_time" class="checkout-input checkout-name" min="8:00" max="20:00" placeholder="Время приёма" required>
</p>

<p>
<input type="submit" value="Записаться" class="checkout-btn">

</p>

</form>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<footer>
<div class="main">
<div class="inside">
<div class="container">
<div class="fright"><!--{%FOOTER_LINK}--></div>
<div class="fleft"><span>Industrial</span> &copy; 2011 &bull; <a href="index-7.html">Privacy policy</a></div>
</div>
</div>
</div>
</footer>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
$('ul#myRoundabout').roundabout({
shape: 'figure8'
});

var cnn=[]
$('#myRoundabout li').each(function(){
cnn.push(this)
})

var curr=0
$('.btnPrev').live('click',function(){
if(curr<0)
curr=cnn.length-1
else
curr--
$(cnn.slice(curr,curr+1)).trigger('click')
return false
})
$('.btnNext').live('click',function(){
if(curr<cnn.length)
curr++
else
curr=0
$(cnn.slice(curr,curr+1)).trigger('click')
return false
})
});
// ]]>
</script>
</body>
</html>

Файл "connect.php" из архива "stomkab.zip":

<?php
$host='localhost'; //Хост
$db='stomat'; //Имя БД
$user_mysql='root'; //Имя пользователя БД
$pass_mysql=''; //Пароль пользователя БД
$link = mysqli_connect($host, $user_mysql, $pass_mysql, $db) or die("<center><h1>Подключение не удалось!</h1></center>");
mysqli_query($link, "set character_set_client='utf8'");
mysqli_query($link, "set character_set_results='utf8'");
mysqli_query($link, "set collation_connection='utf8_general_ci'");
?>

Файл "get_services.php" из архива "stomkab.zip":

<?php
include_once 'connect.php';
$medspec_id = @intval($_POST['med_spec']);

$regs=mysqli_query($link, "SELECT service_name, service_id FROM service WHERE id_speciality=$medspec_id");

if ($regs) {
$num = mysqli_num_rows($regs);
$i = 0;
while ($i < $num) {
$services[$i] = mysqli_fetch_assoc($regs);
$i++;
}
$result = array('services'=>$services);
}
else {
$result = array('type'=>'error');
}

print json_encode($result);
?>

Файл "get_doctor.php" из архива "stomkab.zip":

<?php
include_once 'connect.php';
$medspec_id = @intval($_POST['med_spec']);

$regs=mysqli_query($link, "SELECT doctor_surname, doctor_name, doctor_id FROM doctor WHERE speciality_id=$medspec_id");

if ($regs) {
$num = mysqli_num_rows($regs);
$i = 0;
while ($i < $num) {
$doctors[$i] = mysqli_fetch_assoc($regs);
$i++;
}
$result = array('doctors'=>$doctors);
}
else {
$result = array('type'=>'error');
}
print json_encode($result);
?>

Файл "selects.js" из архива "stomkab.zip":

$(document).ready(function () {
$('#med_spec').change(function () {
var med_spec = $(this).val();
if (med_spec == '0') {
$('#services').html('<option>Выберите услугу</option>');
$('#services').attr('disabled', true);
$('#doctors').html('<option>Выберите врача</option>');
$('#doctors').attr('disabled', true);
return(false);
}
$('#services').attr('disabled', true);
$('#services').html('<option>Загрузка...</option>');

var url = 'get_services.php';

$.post(
url,
"med_spec=" + med_spec,
function (result) {
if (result.type == 'error') {
alert('Ошибка!');
return(false);
}
else {
var options = '';

$(result.services).each(function() {
options += '<option value="' + $(this).attr('service_id') + '">' + $(this).attr('service_name') + '</option>';
});

$('#services').html('<option value="0">Выберите услугу</option>'+options);
$('#services').attr('disabled', false);
$('#doctors').html('<option>Выберите врача</option>');
$('#doctors').attr('disabled', true);

}
},
"json"
);
});

$('#services').change(function () {
var med_spec = $(#med_spec).val();
var services = $(this).val();
if (services == '0') {
$('#doctors').html('<option>Выберите врача</option>');
$('#doctors').attr('disabled', true);
return(false);
}
$('#doctors').attr('disabled', true);
$('#doctors').html('<option>Загрузка...</option>');

var url = 'get_doctor.php';

$.post(
url,
"med_spec=" + med_spec,

function (result) {
if (result.type == 'error') {
alert('Ошибка!');
return(false);
}
else {
var options = '';
$(result.doctors).each(function() {
options += '<option value="' + $(this).attr('doctor_id') + '">' + $(this).attr('doctor_surname') + ', ' + $(this).attr('doctor_name') + '</option>';

});
$('#doctors').html('<option value="0">Выберите врача</option>'+options);
$('#doctors').attr('disabled', false);
}
},
"json"
);
});
});

Сможете в комментариях к коду указать, где ошибки и на что нужно изменить эти фрагменты кода, или привести пример более удобного скрипта для связанных выпадающих списков с русскими комментариями? Есть ли другие редакторы кода для HTML и PHP с функциями отладки, поиска и пояснения найденных ошибок?
 

Вложения

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
Тут слишком много кода и никто не будет разворачивать у себя всё это для тестов.
Давайте ссылку на проект, там посмотрим клиентскую сторону, если ошибка на клиенте, то подскажу.

Все ошибки всегда можно увидеть:
- на клиентской стороне в консоли браузера (F12)
- на сервере обычно сам сервер выдаёт в браузер ошибку или дополнительно можно прописать
Код:
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
 
Статус
Закрыто для дальнейших ответов.
Верх Низ