[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Selectbox'ы и Ajax
cage
Тема:
Есть 2 selectbox'a, поля первого генерируются при загрузке скрипта,поля же другого должны генерироваться в зависимости от полей первого.Знаю что это можно сделать с помощью Ajax ,но с его синтаксисом я не знаком,поможите разобраться просто и своим языком...



Спустя 56 минут, 36 секунд (24.01.2007 - 10:22) loginsan написал(а):
"синтаксис Ajax" ;)
Попробуй все-же почитать про основы Ajax - уверен, если котелок варит, сделаешь то что ты хочешь.
Могу попробовать набросать схему:

1) Заведи 2 слоя (<div>) для первого select (он формируется) и для второго (который сформируется после выбора в первом):
HTML
  1. <form action="index.php" method="POST">
  2. <div id="d1"><select id="selp" onchange="makeselect()"><option value="1">1</option><option value="2">2</option></select>
  3. </div>
  4. <div id="d2">
  5. </div>
  6. </form>

2) как видишь в первом селекте стоит обработка события onchange="makeselect();" : здесь makeselect() - функция JavaScript которая формирует запрос к серверному php-скрипту, получает от него ответ и выводит его динамически. См. подробности далее:
3) В своем файле еще нужно прописать подключение файла JavaScript functions.js:
JavaScript
  1.  
  2. var xmlhttp = false;
  3. try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  4. }
  5. catch (e) {
  6. try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  7. }
  8. catch (E) {
  9. xmlhttp = false;
  10. }
  11. }
  12.  
  13. if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { xmlhttp = new XMLHttpRequest(); }
  14. //на этом этапе мы создали экземпляр объекта XMLHttpRequest
  15.  
  16. //собственно полезная функция
  17. function makeselect() {
  18. var val = document.getElementById("selp").value; //получаем значение в первом select
  19. var serverPage = "makeselect.php?v=" + val; //php-скрипт обработчика
  20. var obj = document.getElementById("d2"); //элемент, куда поместим результат
  21. xmlhttp.open("GET", serverPage);
  22. xmlhttp.onreadystatechange = function() {
  23. if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  24. obj.innerHTML = xmlhttp.responseText; //про innerHTML знаешь
  25. }
  26. }
  27. xmlhttp.send(null);
  28. }
  29.  

4) Осталось написать код скрипта обработки makeselect.php:
PHP
  1.  
  2. <?php
  3. //header("Content-type: text/html; charset=windows-1251"); - если будет нужен вывод русских букв
  4. $v = $_REQUEST['v'];
  5. $o = "<select id="selv">";
  6. // в зависимости от значения формируется выводимый select
  7. if ($v == 1) $o.= "<option value="1">3</option><option value="2">4</option></select>";
  8. else $o.= "<option value="1">5</option><option value="2">6</option><option value="3">7</option></select>";
  9. echo $o; //"ответ сервера"
  10. ?>

5) вот и все. успехов!

Спустя 23 часа, 9 минут, 51 секунда (25.01.2007 - 09:32) cage написал(а):
ну ладно ...с синтаксисом я переборщил,:P а схема надеюсь работает))))потому ,что собираюсь влить ее!
будем отлаживать
Вопрос xmlhttp.responseText будет понимать html теги,разметка для них одна и та же?

Спустя 30 минут, 44 секунды (25.01.2007 - 10:03) loginsan написал(а):
Потестил бы. Я проверял - у меня в IE6, FF и Opera9 работает.

xmlhttp.responseText - это текст который возвращается сервером в результате работы скрипта и нет разницы - простой текст, html или что-то еще.

Естественно желательно чтобы разметка страницы была валидной и тип следующий (это нужно прописывать в начале html):


Спустя 13 минут, 11 секунд (25.01.2007 - 10:16) cage написал(а):
QUOTE(loginsan)
Потестил бы. Я проверял - у меня в IE6, FF и Opera9 работает.

xmlhttp.responseText - это текст который возвращается сервером в результате работы скрипта и нет разницы - простой текст, html или что-то еще.

Естественно желательно чтобы разметка страницы была валидной и тип следующий (это нужно прописывать в начале html):


А вот и вопрос
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); идет
а if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { xmlhttp = new XMLHttpRequest(); } - не идет

Спустя 13 минут, 13 секунд (25.01.2007 - 10:29) loginsan написал(а):
Когда имеешь дело с Ajax - нужно учитывать все варианты. В данном случае скрипт пытается создать объект XMLHttpRequest в зависимости от браузера пользователя:
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); - это в IE, объект создается как ActiveX элемент
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { xmlhttp = new XMLHttpRequest(); } - это в других, тут просто объект на JavaScript

Спустя 42 минуты, 33 секунды (25.01.2007 - 11:12) cage написал(а):
<!--QuoteBegin-loginsan+--><div class='quotetop'>QUOTE(loginsan)</div><div class='quotemain'><!--QuoteEBegin-->Когда имеешь дело с Ajax - нужно учитывать все варианты. В данном случае скрипт пытается создать объект XMLHttpRequest в зависимости от браузера пользователя:<br>xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); - это в IE, объект создается как ActiveX элемент<br>if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { xmlhttp = new XMLHttpRequest(); } - это в других, тут просто объект на JavaScript<!--QuoteEnd--></div><!--QuoteEEnd--><br>Разве код <br>
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { xmlhttp = new XMLHttpRequest(); }

может я чего-то не догоняю,разве это не код создания объекта после всех проверок браузеров?
P.S.Скрипт не пашет никак, добавил даже стандарты вначале

Спустя 18 минут, 58 секунд (25.01.2007 - 11:31) loginsan написал(а):
Попробую объяснить:<br>//Создаем булеву переменную чтобы проверить правильный экземпляр Internet Explorer.<br>var xmlhttp = false;<br>//Проверяем - используется ли IE<br>try {<br> //Если версия Javascript старше чем 5.<br> xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");<br> alert ("Вы используете Microsoft Internet Explorer.");<br>} catch (e) {<br> //Если получили исключение (т.е. попытка не удалась), попробуем создать более старый вариант ActiveX объекта<br> try {<br> //Если мы используем Internet Explorer.<br> xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");<br> alert ("Вы используете Microsoft Internet Explorer (версия 2)");<br> } catch (E) {<br> //Если и это не удалось - вывод, что используется не-IE браузер<br> xmlhttp = false;<br> }<br>}<br>//Если ипользуется не-IE браузер, создаем экземпляр javascript объекта<br>if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {<br> xmlhttp = new XMLHttpRequest();<br> alert ("У вас используется браузер отличный от Microsoft Internet Explorer");<br>}<br><br>Текст взят из книги. Есть пример и покороче:<br>
 
var xmlhttp;
//Если, доступен activexobject, должно быть используется IE.
if (window.ActiveXObject){
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
//Иначе, можем использовать обработчик Javascript.
xmlhttp = new XMLHttpRequest();
}
 

Хотя автор рекомендует придерживаться первого варианта.
Попробуй отладить код. Все исходники взяты из книги (за исключением перевода комментариев и строк вывода). Должно работать.
Какой браузер?

Спустя 7 минут, 35 секунд (25.01.2007 - 11:38) cage написал(а):
<!--QuoteBegin-loginsan+--><div class='quotetop'>QUOTE(loginsan)</div><div class='quotemain'><!--QuoteEBegin-->Попробую объяснить:<br>//Создаем булеву переменную чтобы проверить правильный экземпляр Internet Explorer.<br>var xmlhttp = false;<br>//Проверяем - используется ли IE<br>try {<br> &nbsp;//Если версия Javascript старше чем 5.<br> &nbsp;xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");<br> &nbsp;alert ("Вы используете Microsoft Internet Explorer.");<br>} catch (e) {<br> &nbsp;//Если получили исключение (т.е. попытка не удалась), попробуем создать более старый вариант ActiveX объекта<br> &nbsp;try {<br> &nbsp; &nbsp;//Если мы используем Internet Explorer.<br> &nbsp; &nbsp;xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");<br> &nbsp; &nbsp;alert ("Вы используете Microsoft Internet Explorer (версия 2)");<br> &nbsp;} catch (E) {<br> &nbsp; &nbsp;//Если и это не удалось - вывод, что используется не-IE браузер<br> &nbsp; &nbsp;xmlhttp = false;<br> &nbsp;}<br>}<br>//Если ипользуется не-IE браузер, создаем экземпляр javascript объекта<br>if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {<br> &nbsp;xmlhttp = new XMLHttpRequest();<br> &nbsp;alert ("У вас используется браузер отличный от Microsoft Internet Explorer");<br>}<br><br>Текст взят из книги. Есть пример и покороче:<br>
 
var xmlhttp;
//Если, доступен activexobject, должно быть используется IE.
if (window.ActiveXObject){
 &nbsp;xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
//Иначе, можем использовать обработчик Javascript.
xmlhttp = new XMLHttpRequest();
}

Хотя автор рекомендует придерживаться первого варианта.
Попробуй отладить код. Все исходники взяты из книги (за исключением перевода комментариев и строк вывода). Должно работать.
Какой браузер?

Так я понял конструкцию catch TRY)))но все равно спасибо,я не понимаю ,почему не идет обработка объекта...
ActiveX вроде включены...так отлаживалпо всякому,тем более из книги ,у меня IE6,но пробовал из O9,может я в настройках что-нить пропустил?

Спустя 50 минут, 1 секунда (25.01.2007 - 12:28) loginsan написал(а):
Если знаешь английский - можешь взять книгу на http://c-books.info/books/news5.php/2006/1...ofessional.html
По поводу отладки: даже alert не выводится?

Спустя 19 минут, 18 секунд (25.01.2007 - 12:47) cage написал(а):
<!--QuoteBegin-loginsan+--><div class='quotetop'>QUOTE(loginsan)</div><div class='quotemain'><!--QuoteEBegin-->Если знаешь английский - можешь взять книгу на <a href='http://c-books.info/books/news5.php/2006/11/24/beginning-ajax-with-php-from-novice-to-professional.html' target='_blank'>http://c-books.info/books/news5.php/2006/1...ofessional.html</a><br>По поводу отладки: даже alert не выводится?<!--QuoteEnd--></div><!--QuoteEEnd--><br>alert как раз-таки выводится,но в определенных случаях,к примеру<br>
 
 try {
    //Если мы используем Internet Explorer.
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    alert ("Вы используете Microsoft Internet Explorer (версия 2)");
 

алерта не выведет,а вот если поставить else alert(),эта скотина вылезет))

Спустя 19 минут, 25 секунд (25.01.2007 - 13:07) cage написал(а):
Прости за мат ,но без этого никак ...
Бляяяя...вот гамно...ты не представляешь,что я в поспехе сделал)))))))я вроде makeselect.php заполнил,а оказывается на запрос о сохранении нет нажал,до сих пор пустым лежал,такое тоже бывает,мать их..


Все вроде наманя,но вот на второе значение не реагирует,т.е при =1 вытаскивает селект,а при =2 нет

Спустя 21 минута, 21 секунда (25.01.2007 - 13:28) loginsan написал(а):
Я думаю - ты на правильном пути. Это была схема для примера.
makeselect.php можешь сам придумать. Вобщем, Ajax крутится, остается только пожелать успехов!

Спустя 4 минуты, 31 секунда (25.01.2007 - 13:33) cage написал(а):
QUOTE(loginsan)
Я думаю - ты на правильном пути. Это была схема для примера.
makeselect.php можешь сам придумать. Вобщем, Ajax крутится, остается только пожелать успехов!

Последний вопрос,думаю я не разозлю тебя)))
Почему когда я изменяю значения опций селектов,то при обновлении браузера,эти изменения не вступают немедленно,мне приходиться закрывать страницу и заново ее открывать


Наверно из-за Геши,в опере все наманя

Спустя 11 минут, 14 секунд (25.01.2007 - 13:44) loginsan написал(а):
Вопрос конечно интересный...
"Обновление браузера" как я понимаю - обновление страницы. Изменяешь значения опций селектов - т.е. изменяешь код html...?
(В вопросах будь поточнее и если что-то не работает, хотя по идее должно работать, приводи исходный код).
А ответ - может страница содержала ошибки или кешировалась браузером. А конечный пользователь от этой проблемы страдать не будет.

Спустя 4 минуты, 54 секунды (25.01.2007 - 13:49) cage написал(а):
QUOTE(loginsan)
Вопрос конечно интересный...
"Обновление браузера" как я понимаю - обновление страницы. Изменяешь значения опций селектов - т.е. изменяешь код html...?
(В вопросах будь поточнее и если что-то не работает, хотя по идее должно работать, приводи исходный код).
А ответ - может страница содержала ошибки или кешировалась браузером. А конечный пользователь от этой проблемы страдать не будет.

Я тоже так думаю ,придеться нокэш поставить
А вопрос был скорее риторический))))сам на него и ответил

QUOTE
Наверно все-таки из-за Геши

Спустя 7 месяцев, 13 дней, 8 часов, 10 минут, 12 секунд (8.09.2007 - 20:59) xaxaTyH написал(а):
1. А как быть с неправильныой кодировкой в этом примере?
Русские буквы, выведеные через echo в php скрипте отображаются через Ж.
Подскажите пожалуйста

2. И как сделать чтобы при загрузке слоя выдавалось что-то типа "Загрузка ..."

Спустя 1 день, 22 часа, 14 минут, 48 секунд (10.09.2007 - 19:14) xaxaTyH написал(а):
С загрузкой разобрался

Надо перед

Код
xmlhttp.open("GET", serverPage);


поставить

Код
obj.innerHTML = "Загрузка";


Помогите с кодировкой пожалуйста

Спустя 7 дней, 22 часа, 25 секунд (18.09.2007 - 17:14) xaxaTyH написал(а):
Девелоперы, ау!!!

Что мне делать с кодировкой, подскажите пожалуйста

Спустя 8 дней, 20 часов, 8 минут, 47 секунд (27.09.2007 - 13:23) FArt написал(а):
Цитата(xaxaTyH @ 18.9.2007, 14:14) [snapback]27217[/snapback]
Девелоперы, ау!!!

Что мне делать с кодировкой, подскажите пожалуйста


решить проблему можно одним из способов:
1) отправкой заголовка
Код
header("Content-type: text/html; charset=cp1251;");

перед выводом текста

2) использование функции iconv

Спустя 3 дня, 13 часов, 1 минута, 16 секунд (1.10.2007 - 02:24) GonZig написал(а):
Цитата(xaxaTyH @ 18.9.2007, 18:14) [snapback]27217[/snapback]
Девелоперы, ау!!!

Что мне делать с кодировкой, подскажите пожалуйста

А что, в PHP функцию iconv отменили? rolleyes.gif
пример: $keyword = iconv("UTF-8", "Windows-1251", $keyword)

Спустя 2 дня, 13 часов, 33 минуты, 31 секунда (3.10.2007 - 15:58) xaxaTyH написал(а):
отправка хеадера не помогла, пересобирать php с iconv возможности нет ..


_____________
you can see me only when die
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.