Форум

x][x · #1 (**permalink**) 29.04.2009, 23:31

Добрый день, помогите разобраться, есть скрипт который должен заполнять форму таким образом: вводится имя, по нему ищется строка в базе и от туда берутся имена отца и матери, далее берется имя отца/матери и так же ищется строка.

таблица:

<table border=1>
<tr BGCOLOR=EEEEFF><td width=200 rowspan=8>
	<INPUT TYPE=text SIZE=20 id=idf1 VALUE="" onChange="process(this.id)">
</td><td width=200 rowspan=4>
	<INPUT TYPE=text SIZE=20 id=idf11 VALUE="" onChange="process(this.id)">
</td><td width=200 rowspan=2>
	<INPUT TYPE=text SIZE=20 id=idf111 VALUE="" onChange="process(this.id)">
</td><td width=200>
	<INPUT TYPE=text SIZE=20 id=idf1111 VALUE="" onChange="process(this.id)">
</td></tr>
<tr BGCOLOR=FFEEFF><td>
	<INPUT TYPE=text SIZE=20 ID=idf1112 VALUE="" onChange="process(this.id)">
</td></tr><tr BGCOLOR=EEEEFF><td BGCOLOR=FFEEFF rowspan=2>
	<INPUT TYPE=text SIZE=20 id=idf112 VALUE="" onChange="process(this.id)">
</td><td>
	<INPUT TYPE=text SIZE=20 id=idf1121 VALUE="" onChange="process(this.id)">
</td></tr>
<tr BGCOLOR=EEEEFF><td BGCOLOR=FFEEFF>
	<INPUT TYPE=text SIZE=20 id=idf1122 VALUE="" onChange="process(this.id)">
</td></tr><tr BGCOLOR=EEEEFF><td BGCOLOR=FFEEFF rowspan=4>
	<INPUT TYPE=text SIZE=20 id=idf12 VALUE="" onChange="process(this.id)">
</td><td rowspan=2>
	<INPUT TYPE=text SIZE=20 id=idf121 VALUE="" onChange="process(this.id)">
</td><td>
	<INPUT TYPE=text SIZE=20 id=idf1211 VALUE="" onChange="process(this.id)">
</td></tr>
<tr BGCOLOR=EEEEFF><td BGCOLOR=FFEEFF>
	<INPUT TYPE=text SIZE=20 id=idf1212 VALUE="" onChange="process(this.id)">
</td></tr><tr BGCOLOR=EEEEFF><td BGCOLOR=FFEEFF rowspan=2>
	<INPUT TYPE=text SIZE=20 id=idf122 VALUE="" onChange="process(this.id)">
</td><td>
	<INPUT TYPE=text SIZE=20 id=idf1221 VALUE="" onChange="process(this.id)">
</td></tr><tr BGCOLOR=EEEEFF><td BGCOLOR=FFEEFF>
	<INPUT TYPE=text SIZE=20 id=idf1222 VALUE="" onChange="process(this.id)">
</td></tr>
</table>

и две функции:

idForm = "";
// make asynchronous HTTP request using the XMLHttpRequest object 
function process(idForm0, idForm1)
{

   idFormArray=new Array()
   if (idForm1) idFormArray [0]=idForm0; 
   if (idForm2) idFormArray [1]=idForm1;
      for (var i=0; i<idFormArray.length; i++){
      document.getElementById("divProcess").innerHTML += 
                                            '<i>' + idFormArray[i] + '</i><br>';
	if (idFormArray[i].length>6){
           break;}
        else{
	// proceed only if the xmlHttp object isn't busy
	  if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
	  {

 	   // retrieve the name typed by the user on the form
 	   name = encodeURIComponent(document.getElementById(idFormArray[i]).value);
 	   // execute the quickstart.php page from the server
  	  xmlHttp.open("GET", "rss.php?name=" + name, true);  
  	  // define the method to handle server responses
		idForm = idFormArray[i];
  	  xmlHttp.onreadystatechange = handleServerResponse;
 	   // make the server request
 	   xmlHttp.send(null);
	  }
 	 }
	}

}
// executed automatically when a message is received from the server
function handleServerResponse() 
{
  // move forward only if the transaction has completed
  if (xmlHttp.readyState == 4) 
  {
    // status of 200 indicates the transaction completed successfully
    if (xmlHttp.status == 200) 
    {
      // extract the XML retrieved from the server
      xmlResponse = xmlHttp.responseXML;
      // obtain the document element (the root element) of the XML structure
      xmlRoot = xmlResponse.documentElement;

	idArray = xmlRoot.getElementsByTagName('id');
	nameArray = xmlRoot.getElementsByTagName('name');
	otecArray = xmlRoot.getElementsByTagName('otec');
	matArray = xmlRoot.getElementsByTagName('mat');
      // get the text message, which is in the first child of
      // the the document element
	var d = document;
idFormOtec = idForm + "1";
idFormMat = idForm + "2";
  for (var i=0; i<idArray.length; i++){
      document.getElementById("div2").innerHTML += 
                                            '<i>' + idFormOtec + '</i><br>';
	if (idFormOtec.length>7){
           break;}
        else{
		d.getElementById(idForm).value = nameArray.item(i).firstChild.data;
		d.getElementById(idFormOtec).value = otecArray.item(i).firstChild.data;
		d.getElementById(idFormMat).value = matArray.item(i).firstChild.data;
//alert (idFormOtec);
		}}
      // restart sequence
      setTimeout('process(idFormOtec, idFormMat)', 10);
    } 
    // a HTTP status different than 200 signals an error
    else 
    {
      alert("There was a problem accessing the server: " + xmlHttp.statusText);
    }
  }
}

Таблица на половину заполняется, вся отцовская линия idf1-idf1111, а вот все что идет начиная от idf12 пустое. Если в первую функцию вставить alert(idFormArray[i]), то idf121 и idf122 заполняются, но дальше пусто. Xто-то с циклами не так, но где именно понять не могу.
PS xml формируется правильно.

x-yuri · #2 (**permalink**) 30.04.2009, 01:42

советую перейти на firebug

x][x · #3 (**permalink**) 30.04.2009, 23:14

Спасибо за совет, правда firebug'ом нашел только одну ошибку: onChange="process(this.id) передается только один параметр, а сама функция имеет два аргумента. Но у меня проблема в самом алгоритме, не могу понять, как запустить цикл и каким образом передавать параметры, что бы таблица заполнилась правильно.
Буду очень благодарен дельным предложениям.

x-yuri · #4 (**permalink**) 01.05.2009, 01:02

по-моему консоль ошибок и без firebug имеется
я имел в виду как раз про поиск логических ошибок: пишешь

idArray = xmlRoot.getElementsByTagName('id');
console.log(idArray);

при этом на вкладке Console firebug'а появляется содержимое переменной idArray; проверяешь, того ли ты ждал; и т.д.; конечно, проверять каждую строчку не обязательно - ты можешь проверять только подозрительные места

x][x · #5 (**permalink**) 05.05.2009, 01:38

переделал немного функцию

function process(idFI)
{
for (var i=0; i<idFI.length; i++){
      document.getElementById("divProcess").innerHTML += 
                                            '<i>' + idFI[i] + '</i><br>';
if (idFI[i].length>7){
           break;}
        else{
	  if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
	  {
 	   name = encodeURIComponent(document.getElementById(idFI[i]).value);
  	  xmlHttp.open("GET", "rss.php?name=" + name, true);  
		idForm = idFI[i];
  	  xmlHttp.onreadystatechange = handleServerResponse;
 	   xmlHttp.send(null);
	}
  }
}
}

Теперь из функции handleServerResponse передаю массив, но из инпута передается просто переменная.
Вопрос: как можно отличить массив от простой переменной?

xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send(null);

Я так понимаю, что данный код вызывает функцию handleServerResponse и передает в нее null, я прав?

x-yuri · #6 (**permalink**) 05.05.2009, 02:16

1) зачем?
"Теперь из функции handleServerResponse передаю массив" - куда?
"но из инпута передается просто переменная" - это как?

2) нет, ты назначаешь обработчик события "пришел ответ сервера" и посылаешь запрос серверу (при этом тело запроса отсутствует, нужно для запросов POST)

x][x · #7 (**permalink**) 05.05.2009, 11:48

Таблица:

<table border=1>
<tr BGCOLOR=EEEEFF><td width=200 rowspan=8>
    <INPUT TYPE=text SIZE=20 id=idf1 VALUE="" onChange="process(this.id)">
</td><td width=200 rowspan=4>
    <INPUT TYPE=text SIZE=20 id=idf11 VALUE="" onChange="process(this.id)">
</td><td width=200 rowspan=2>
    <INPUT TYPE=text SIZE=20 id=idf111 VALUE="" onChange="process(this.id)">
</td><td width=200>
    <INPUT TYPE=text SIZE=20 id=idf1111 VALUE="" onChange="process(this.id)">
</td></tr>
<tr BGCOLOR=FFEEFF><td>
    <INPUT TYPE=text SIZE=20 ID=idf1112 VALUE="" onChange="process(this.id)">
</td></tr><tr BGCOLOR=EEEEFF><td BGCOLOR=FFEEFF rowspan=2>
    <INPUT TYPE=text SIZE=20 id=idf112 VALUE="" onChange="process(this.id)">
</td><td>
    <INPUT TYPE=text SIZE=20 id=idf1121 VALUE="" onChange="process(this.id)">
</td></tr>
<tr BGCOLOR=EEEEFF><td BGCOLOR=FFEEFF>
    <INPUT TYPE=text SIZE=20 id=idf1122 VALUE="" onChange="process(this.id)">
</td></tr><tr BGCOLOR=EEEEFF><td BGCOLOR=FFEEFF rowspan=4>
    <INPUT TYPE=text SIZE=20 id=idf12 VALUE="" onChange="process(this.id)">
</td><td rowspan=2>
    <INPUT TYPE=text SIZE=20 id=idf121 VALUE="" onChange="process(this.id)">
</td><td>
    <INPUT TYPE=text SIZE=20 id=idf1211 VALUE="" onChange="process(this.id)">
</td></tr>
<tr BGCOLOR=EEEEFF><td BGCOLOR=FFEEFF>
    <INPUT TYPE=text SIZE=20 id=idf1212 VALUE="" onChange="process(this.id)">
</td></tr><tr BGCOLOR=EEEEFF><td BGCOLOR=FFEEFF rowspan=2>
    <INPUT TYPE=text SIZE=20 id=idf122 VALUE="" onChange="process(this.id)">
</td><td>
    <INPUT TYPE=text SIZE=20 id=idf1221 VALUE="" onChange="process(this.id)">
</td></tr><tr BGCOLOR=EEEEFF><td BGCOLOR=FFEEFF>
    <INPUT TYPE=text SIZE=20 id=idf1222 VALUE="" onChange="process(this.id)">
</td></tr>
</table>
<table border=2>
<tr>
<td>
  <div id="divProcess" />
</td>
<td>
  <div id="div2" />
</td>
<tr>
</table>

Функции:

var idForm = "";
function process(idFI)
{
for (var i=0; i<idFI.length; i++){
      document.getElementById("divProcess").innerHTML += 
                                            '<i>' + idFI[i] + '</i><br>';
if (idFI[i].length>7){
           break;}
        else{
	  if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
	  {

 	   name = encodeURIComponent(document.getElementById(idFI[i]).value);
  	  xmlHttp.open("GET", "rss.php?name=" + name, true);  
		idForm = idFI[i];
  	  xmlHttp.onreadystatechange = handleServerResponse;
 	   xmlHttp.send(null);
	}
  }
}
}
function handleServerResponse() 
{
  if (xmlHttp.readyState == 4) 
  {
    if (xmlHttp.status == 200) 
    {
      xmlResponse = xmlHttp.responseXML;
      xmlRoot = xmlResponse.documentElement;

	idArray = xmlRoot.getElementsByTagName('id');
	nameArray = xmlRoot.getElementsByTagName('name');
	otecArray = xmlRoot.getElementsByTagName('otec');
	matArray = xmlRoot.getElementsByTagName('mat');
idFormOtec = idForm + "1";
idFormMat = idForm + "2";

  for (var i=0; i<idArray.length; i++){
      document.getElementById("div2").innerHTML += 
                                            '<i>' + idFormOtec + '</i><br>';
	if (idFormOtec.length>7){
           break;}
        else{
		document.getElementById(idForm).value = nameArray.item(i).firstChild.data;
		document.getElementById(idFormOtec).value = otecArray.item(i).firstChild.data;
		document.getElementById(idFormMat).value = matArray.item(i).firstChild.data;
		}}
idFAr=new Array()
idFAr[0] = idFormOtec;
idFAr[1] = idFormMat;
      setTimeout('process(idFAr)', 100);
    } 
    else 
    {
      alert("There was a problem accessing the server: " + xmlHttp.statusText);
    }
  }
}

Вобщем если вводить имя в инпут, то в функцию process передается только один id в который ввели текст, после отправки на сервер запроса и обработки ответа в функции handleServerResponse появляются еще два id инпутов? содержание которых надо отправить на сервер.

idFAr=new Array()
idFAr[0] = idFormOtec;
idFAr[1] = idFormMat;
      setTimeout('process(idFAr)', 100);

x-yuri · #8 (**permalink**) 05.05.2009, 11:57

1) например, так

idFI instanceof Array

x][x · #9 (**permalink**) 05.05.2009, 14:49

В чем может быть проблема, на сервер name отсылается только 3 раза и заполняются только idf1-idf1111, но если ставлю breakpoint на строку document.getElementById("divProcess").innerHTML += '<i>' + idFI[i] + '</i><br>'; заполняется вся таблица.

x-yuri · #10 (**permalink**) 05.05.2009, 20:42

сделай нормальные отступы для начала

Форум

Справочник

Discord чат

Курсы javascript