Не обновление страницы(Возможно AJAX)
Здравствуйте.
Сначала бы хотел поблогадорить всех кто мне на этом форуме помогал в постижении JS Но у меня возникла новая проблема: нужно сделать чтобы пользователь из предложеного списка/меню(<select name="select">) выбирая какой-то пункт, без перезагрузки страницы, формировал соседний список меню. Т.е. в первом списке через php забиваются категории продукции, и при выборе какой-то категории с соседнем списке/меню появлялись значения(для выбора) подкатегорий товара(из бд ну или ещё каким-то вариантом). Таким образом пользователю не нужно будет вбивать название товара и не придётся долко рыскать в огромном списке/меню. И вот ещё какая проблемка. Как сделать так чтобы после нажатия на кнопку "Ещё товар" Появлялось ещё два(типа связанных между собой) списка меню, ещё для одного товара. |
только Ajax.
|
Кто-нибудь может посоветовать как это всё реализовать?
|
Вы хотябы написали что не получается, или в чем проблема? Или вы хотите чтобы форумчане написали готовый скрипт?
Тогда Вам в раздел работа. Там за плату сделают все что надо. Я так понял что вам нужно что-то подобное - mirplenok.ru |
AJAX
Привет! Вот одно из решений проблемы с помощью AJAX.
1. Сначала на страничке рисуешь элемент формы, у меня это <select...>, и <div...>, где будут "появляться" новые элементы: 2. В тэге <select...> пишем функцию onChange="make_request('search.architect.php?cat=' +this.value, 'id_дива_куда_подружаем_элем ты');". HHTML-код выглядит вот так:
<form name="search" action="#" method="get">
<input type="text" name="keys" value="">
<select name="cat" onChange="make_request('search.architect.php?cat='+this.value, 'search_sub');">
<option value="0">Alla kategorier</option>
<option value="cars">Bilar</option>
<option value="flats">Lägenheter</option>
</select>
<input type="submit" value="SÖK">
<div id="search_sub"><!-- здесь будет "появляться" новые элементы --></div>
</form>
3. Пишем .js файл:
function create_object() {
var http_request = false;
// Mozila, Safari etc.
if(window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/html; charset=windows-1251');
}
}
// IE
else if(window.ActiveXObject) {
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {}
}
}
// Error
if(!http_request) {
alert('Failed to create object of class XMLHTTP');
return false;
}
else { return http_request; }
}
function make_request(url, id) {
http_request = create_object();
http_request.onreadystatechange = function() { paste_response(http_request, id); };
http_request.open('GET', url, true);
http_request.send(null);
}
function paste_response(http_request, id) {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
document.getElementById(id).innerHTML = http_request.responseText;
} else {
alert('No response from server or another error accured.');
}
}
}
И включаем его в нашу страничку в <head>-тэге. 4. Пишем PHP-страничку search.architect.php:
<?
// search.architect.php
//кэш
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
header("Last-Modified: ".gmdate("D, d M Y H:i:s")."GMT");
//кодировку нужно прописывать, чтобы не было "иероглифов"
header('Content-Type: text/html; charset=windows-1251');
//вместо нижепрописоногго массива, пишем любую другую функцию, котоарая обращаеться в БД или генерирует элемнт формы...
$data = array(
'default' => "",
'cars' => "<select name=\"year\"><option value=\"0\">Årsmodell</option><option value=\"2000\">2000</option><option value=\"2001\">2001</option><option value=\"2002\">2002</option></select> <select name=\"price_from\"><option value=\"0\">Pris från</option><option value=\"0\">0</option><option value=\"1000\">1000</option><option value=\"2000\">2000</option><option value=\"3000\">3000</option></select> <select name=\"price_to\"><option value=\"0\">Pris till</option><option value=\"1000\">1000</option><option value=\"2000\">2000</option><option value=\"3000\">3000</option><option value=\"4000\">4000</option></select>",
'flats' => "<select name=\"kvm\"><option value=\"0\">Yta</option><option value=\"20\">20 Kvm</option><option value=\"40\">40 Kvm</option><option value=\"60\">60 Kvm</option></select>"
);
if(!empty($_GET['cat'])) echo $data[$_GET['cat']];
else echo $data['default'];
?>
Вот вообщем-то и всё. Надеюсь ясно описал. С помощю этой функции можно подгружать что угодно и куда угодно без перезагрузки странички. Спасибо за внимание. |
| Часовой пояс GMT +3, время: 07:32. |