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

Самозванка

Дата 26.7.2007, 11:42 (ссылка)

(нет голосов)

Загрузка ...

Девушка в стиле IT

Профиль
Группа: Завсегдатай
Сообщений: 484
Регистрация: 5.9.2006
Где: USA

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

Вопрос такой. Есть две БД 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, а то я его ниразу еще не использовала?

Это сообщение отредактировал(а) Самозванка - 26.7.2007, 13:13

--------------------

Неуёмная жажда жизни!

smile

dXdYdZ

Дата 1.8.2007, 01:53 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

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

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

Вот стандартній код для отправки запроса и приёма данных.

Код


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 скрипт) выдаст содержимое правого столбца Вашей таблицы.
Обратите внимание на идентификатор_правого_столбца.

Самозванка

Дата 13.8.2007, 15:44 (ссылка)

(нет голосов)

Загрузка ...

Девушка в стиле IT

Профиль
Группа: Завсегдатай
Сообщений: 484
Регистрация: 5.9.2006
Где: USA

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

Пытаюсь разобраться с 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, без перезагрузки страницы....

--------------------

Неуёмная жажда жизни!

smile

Astraller

Дата 15.8.2007, 10:05 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 300
Регистрация: 1.8.2007
Где: $Украина[Кры м]->Феодосия

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

Цитата(Самозванка @ 13.8.2007, 15:44)

Код


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

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

Разберитесь сначала с основами HTML&JS. smile

Вот к стати, недавно написаное мной дерево. Чистые обьекты без наворотов - отлично спасает от багов и помогает в кросбраузерности КЛАЦ.

Это сообщение отредактировал(а) Astraller - 15.8.2007, 10:07

--------------------

A.S.T.R.A.L.L.E.R.: Artificial Synthetic Technician Responsible for Assassination, Logical Learning and Efficient Repair

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »