Переход по сслыкам дерева с помощью AJAX

 
0
 
JavaScript
ava
Самозванка | 26.07.2007, 12:42
Вопрос такой. Есть две БД CLSGOOD и GRPGOOD. Берем данные из CLSGOOD. И по столбцу CLASSID в левом столбце таблицы строим дерево значений. При нажатии на значение, в правом столбце должно появляться список значений из БД GRPGOOD, которые связаны между собой CLASSID = GOODCLASSID.

Так вот проблема в том как сделать так, чтобы вывести при нажатии на ссылку в левой колонке, список в правую колонку таблицы.

Вот мой код:

<script language="JavaScript">
function changeDisplay(id)
{
var ul = document.getElementById('ul' + id).style;
var li = document.getElementById('li' + id).style;
if ( 'none' == ul.display )
{
ul.display = 'block';
li.listStyleImage = 'url("open.gif")';
}
else
{
ul.display = 'none';
li.listStyleImage = 'url("closed.gif")';
}
}
</script>



<?php
echo ("<table width=100% height=100% border=2><tr><td width=25% align=left valign=top>");
$conn = odbc_connect( "BP", "DBA", "SQL" );
$sSQL="SELECT CLASSID, CLASSNAME FROM CLS_GOOD ORDER BY CLASSID ";
$result=odbc_exec($conn, $sSQL);
//odbc_result_all($result);
//$n=odbc_fetch_row($result,2);
//echo $n;
$k=0;
for ($i=0; $i<odbc_num_rows($result); $i++)
{
$k++;
$f=odbc_fetch_array($result, $i+1);
$v=odbc_fetch_array($result, $i+2);
$vc=strlen($v[CLASSID]);
$fc=strlen($f[CLASSID]);
$min1=($fc-$vc)/5;
$min2=($vc-$fc)/5;
if ($vc>$fc) {
echo "<li id='li$k')'>\n";
echo ("<a href=\"javascript: changeDisplay($k); document.location.href='indextrue.php'; \">".$f["CLASSNAME"]."</A>"." \n");
//echo ("<a href=\"javascript: changeDisplay($k); \">".$f["CLASSNAME"]."</A>"." \n");
echo ("</li>");
//echo ("<UL id='ul$k' style='display: none;'>\n");
echo ("<UL id='ul$k'>\n");
}
if ($vc<$fc) {
echo("<li>\n");
echo ("<a href=>".$f["CLASSNAME"]."</A>"." \n");
echo ("</li>");
for ($j = 0; $j<$min1; $j++) echo("</UL>\n");
}
if ($vc==$fc) {
echo("<li>\n");
echo ("<a href=>".$f["CLASSNAME"]."</A>"." \n");
echo ("</li>");
}
}
echo ("</td><td align=left valign=top>");
$nSQL="SELECT GOODCLASSID, GOODNAME FROM GRPGOODS ORDER BY GOODCLASSID ";
$result2=odbc_exec($conn, $nSQL);

for ($j=0; $j<odbc_num_rows($result2); $j++)
{
$l=odbc_fetch_array($result2);
echo "<li>";
echo ($l["GOODNAME"]);
echo ("</li>");
}
odbc_close( $conn );
//echo ("<iframe src='5.php' name='pole' height='600' width='700'></iframe>");
echo ("</td></tr></table>");
?>

как мне надо изменить Javascript , что происходило изменение правого столбца таблицы по ссылка левого? С помощью Ajax. Может у кого нить есть простенький пример применения ajax, а то я его ниразу еще не использовала?



Comments (3)
ava
dXdYdZ | 01.08.2007, 01:53 #
Вот стандартній код для отправки запроса и приёма данных.


var req;

processReqChange=function(obj) {
if(req.readyState == 4){
if(req.status == 200){
document.getElementById("идентификатор_правого_столбца").innerHTML = req.responseText;
}else{
alert("There was a problem retrieving the XML data:\n" + req.statusText);
}
}
}


loadText=function(url,method) {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open(method, url, true);
req.send(null);
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open(method, url, true);
req.send();
}
}
}



Согласовать всё это с Вашими скриптами - это уже Ваша задача.
При щелчке по элементу дерева с помощью JavaScript надо візівать функцию loadText(url,"POST") (или loadText(url,"GET")), где url - адрес, при запросе по которому сервер (ваш PHP скрипт) выдаст содержимое правого столбца Вашей таблицы.
Обратите внимание на идентификатор_правого_столбца.
ava
Самозванка | 13.08.2007, 15:44 #
Пытаюсь разобраться с AJAX, сделала пробный пример:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="44%"><ul>
<li id="s1"><a href="onClick=getCustomerInfo();"> sfdf </a> </li>
<li id="s2">dsf</li>
<li id="s3">sdf</li>
<li id="s4">sdfs</li>
</ul></td>
<td id="t1" width="56%">&nbsp;</td>
</tr>
</table>
</body>
</html>


Код AJAX

<script language="javascript" type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}

if (!request)
alert("Error initializing XMLHttpRequest!");

function getCustomerInfo() {
var phone = document.getElementById("s1").value;
var url = "proba.php?s1=" + escape(s1);
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
document.getElementById("t1").innerHTML = 5;
} else
alert("status is " + request.status);
}
}
</script>


Что я делаю не так? Направьте в нужном направлении... Хочу чтоб при нажатии ссылки, в правой части таблицы появлялась число5, без перезагрузки страницы....
ava
Astraller | 15.08.2007, 10:05 #
Цитата (Самозванка @ 13.8.2007, 15:44)

  <li id="s1"><a href="#" onClick="getCustomerInfo();"> sfdf



Что я делаю не так?

Разберитесь сначала с основами HTML&JS. smile
Вот к стати, недавно написаное мной дерево. Чистые обьекты без наворотов - отлично спасает от багов и помогает в кросбраузерности КЛАЦ.
Please register or login to write.
Firm of day
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Contributors
advanced
Submit