Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / AJAX: таблица не обновляется / 25 сообщений из 26, страница 1 из 2
17.07.2008, 16:46
    #35437370
DmitryTS
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
Начинаю осваивать AJAX. На странице есть таблица книг. По нажатию на кнопку с сервера приходит список книг, которые должны быть добавлены в таблицу. Я отлаживал скрипты с помощюью Firefor Firebug и все работает. Но работает ТОЛЬКО в режиме отладки скрипта. В обычном режиме Fireforx не обновляет таблицу, так же как и Opera и IE.
Код скрипта:

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
var req = false;
function newXMLHttpRequest() {
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    try {
      req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e1) {
      try {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {
      }
    }
  }
}

function refreshTable() {
    newXMLHttpRequest();
    req.onreadystatechange=function() {
  		if (req.readyState ==  4 ) {
     		if(req.status ==  200 ) {
     			updateBooks(req.responseXML);
         	}
  		}
	};
    req.open("GET", "http://localhost:8080/BookClient/AjaxServlet?action=showbooks", true);
	req.send(null);
}

function updateBooks(booksXML) {
    var books = booksXML.getElementsByTagName("books")[ 0 ];

    var table = document.getElementById("booksTable");

    var items = books.getElementsByTagName("book");
    for (var I =  0  ; I < items.length ; I++) {
        var item = items[I];

        var id = item.attributes.getNamedItem("id").textContent; 
        var title = item.attributes.getNamedItem("title").textContent;
        var author = item.attributes.getNamedItem("author").textContent;
        var price = item.attributes.getNamedItem("price").textContent;

		var tr = document.createElement("tr");
		table.appendChild(tr);
		
		var tdId = document.createElement("td");
		tr.appendChild(tdId);
		tdId.appendChild(document.createTextNode(id));

		var tdTitle = document.createElement("td");
		tr.appendChild(tdTitle);
		tdTitle.appendChild(document.createTextNode(title));

		var tdAuthor = document.createElement("td");
		tr.appendChild(tdAuthor);
		tdAuthor.appendChild(document.createTextNode(author));

		var tdPrice = document.createElement("td");
		tr.appendChild(tdPrice);
		tdPrice.appendChild(document.createTextNode(price));
    }
}

Может я конечно сильно туплю, но не могу понять, почему таблица не обновляется.
...
Рейтинг: 0 / 0
17.07.2008, 20:41
    #35437881
apapacy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
Из подохрительных моментов кода - хранение req в глобальной переменной.

Вместо красивой конструкции
item.attributes.getNamedItem("id").textContent;
дучше использовать из DOM-1
item.getAttribute(name)
This method returns a DOMString. The name parameter is of type DOMString.

Где вызывается код? Сколько раз вызывается? Как задана в коде таблица?

Если до загрузки документа вызывается функция - таблица может быть недоступна еще.

Море вопросов.
...
Рейтинг: 0 / 0
17.07.2008, 22:01
    #35437953
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
Кривизна ясен перец. Как сказал apapacy , подохрительный момент заключается в строчке
Код: plaintext
req.open("GET", "http://localhost:8080/BookClient/AjaxServlet?action=showbooks", true);
. Никто же не знает как у тебя кот Том настроен.
...
Рейтинг: 0 / 0
17.07.2008, 22:35
    #35437978
shiftee
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
Чисто для интереса.

readyState=0 после создания объекта XMLHttpRequest, но до вызова метода open().

readyState=1 после вызова метода open(), но до вызова метода send().

readyState=2 после вызова метода send().

readyState=3 после того, как браузер соединится с сервером, но до завершения сервером ответа.

readyState=4 после завершения запроса и полного получения всех данных ответа с сервера.

А в коде выше получается что он вообще должен проскочить вот этот момент при первом вызове
Код: plaintext
1.
2.
3.
4.
if (req.readyState ==  4 ) {
          if(req.status ==  200 ) {
     	  updateBooks(req.responseXML);
         }
 }

Теоретически где-то должен быть сет таймаут чтобы она всетаки отработалась еще раз.

Я могу ошибаться и поэтому интересуюсь.
...
Рейтинг: 0 / 0
18.07.2008, 05:36
    #35438134
LINUXER
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
shiftee
Я могу ошибаться и поэтому интересуюсь.
Код: plaintext
1.
2.
3.
4.
5.
6.
req.onreadystatechange=function() {
  		if (req.readyState ==  4 ) {
     		if(req.status ==  200 ) {
     			updateBooks(req.responseXML);
         	}
  		}
	};
По-русски: при изменении состояния готовности(readyState) запроса(req) выполняется function(){...}
Каждый раз при изменении
...
Рейтинг: 0 / 0
18.07.2008, 09:15
    #35438258
DmitryTS
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
apapacyИз подохрительных моментов кода - хранение req в глобальной переменной.

Вместо красивой конструкции
item.attributes.getNamedItem("id").textContent;
дучше использовать из DOM-1
item.getAttribute(name)
This method returns a DOMString. The name parameter is of type DOMString.

Где вызывается код? Сколько раз вызывается? Как задана в коде таблица?

Если до загрузки документа вызывается функция - таблица может быть недоступна еще.

Море вопросов.

Код вызывается по нажатию на кнопку Refresh:
Код: plaintext
1.
2.
<form>
    <button onclick="refreshTable();">refresh</button>
</form>
Все скрипты объявлены в разделе <head>. Таблица существует изначально.

Таблица на странице JSP задана слудующим образом:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
<table border="1" width="70%" id="booksTable">
	<tr bgcolor="#5577FF">
		<th>Book ID</th>
		<th>Title</th>
		<th>Author</th>
		<th>Price</th>
		<th>Action</th>
	</tr>
	<% for (Iterator iter = books.iterator(); iter.hasNext();) {
		BookBank element = (BookBank) iter.next(); %>
		<tr>
			<td><%=element.getId()%></td>
			<td><%=element.getTitle()%></td>
			<td><%=element.getAuthor().getName()%></td>
			<td><%=element.getPrice()%></td>
			<td align="center">
			<form action="MainServlet" method="POST">
				<input type="hidden" name="action" value="deletebook">
				<input type="hidden" name="id" value="<%=element.getId()%>">
				<input type="submit" value="delete">
			</form>
			<form action="MainServlet" method="POST">
				<input type="hidden" name="action" value="editbookpage">
				<input type="hidden" name="id" value="<%=element.getId()%>">
				<input type="submit" value="edit">
			</form>
			</td>
		</tr>
	<% } %>
</table>

ShSergeКривизна ясен перец. Как сказал apapacy , подохрительный момент заключается в строчке
Код: plaintext
req.open("GET", "http://localhost:8080/BookClient/AjaxServlet?action=showbooks", true);
. Никто же не знает как у тебя кот Том настроен.

Я использую JBOSS. Но суть не в этом. Я отлаживал на стороне сервера, там все нормально, отправляет валидную XML. На стороне клиента отлаживал firebug-ом, все данные из XML извлекает и записывает куда нужно. Проблема в том, что без режима отладки ничего не происходит.

shifteeЧисто для интереса.

readyState=0 после создания объекта XMLHttpRequest, но до вызова метода open().

readyState=1 после вызова метода open(), но до вызова метода send().

readyState=2 после вызова метода send().

readyState=3 после того, как браузер соединится с сервером, но до завершения сервером ответа.

readyState=4 после завершения запроса и полного получения всех данных ответа с сервера.

А в коде выше получается что он вообще должен проскочить вот этот момент при первом вызове
Код: plaintext
1.
2.
3.
4.
if (req.readyState ==  4 ) {
          if(req.status ==  200 ) {
     	  updateBooks(req.responseXML);
         }
 }

Теоретически где-то должен быть сет таймаут чтобы она всетаки отработалась еще раз.

Я могу ошибаться и поэтому интересуюсь.

Тут я что-то не понимаю. Мне же нужно обрабатывать только то состояние, когда ответ получен и его можно парсить. Зачем мне остальные?
...
Рейтинг: 0 / 0
18.07.2008, 10:10
    #35438400
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
Можно пойти другим путём. Послать куда подальше XmlHttpRequest и XML. Преобразовать XML в JSON (таких преобразователей очень много), превратить JSON в JSONP и в калбек функции updateBooks проаппендчилдить чего куда надо.
...
Рейтинг: 0 / 0
18.07.2008, 10:23
    #35438434
DmitryTS
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
Спасибо за совет. Но моя цель заключается в том, чтобы сделать все "классическим" путем, без применения дополнительных средств. Я просто хочу разобраться как AJAX работает сам по себе.
...
Рейтинг: 0 / 0
18.07.2008, 16:53
    #35440039
vned
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
у тебя функция newXMLHttpRequest() ничего явно не возвращает, тоесть сделай
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
function newXMLHttpRequest() {
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    try {
      req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e1) {
      try {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {
      }
    }
  }
  return req;
}
и так:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
function refreshTable() {
    req=newXMLHttpRequest();
    req.onreadystatechange=function() {
  		if (req.readyState ==  4 ) {
     		if(req.status ==  200 ) {
     			updateBooks(req.responseXML);
         	}
  		}
...
Рейтинг: 0 / 0
18.07.2008, 17:10
    #35440087
DmitryTS
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
Я сделал. Все равно не работает((
У меня получается выводить принятые данные в div с помощью innerHTML. То есть выходит, что браузер нормально принимает даные и корректно их парсит, но почему-то не может добавить новую строку в таблицу.
Кстати в Opera и Firefox, данные, которые я вывожу в div появляются и сразу изчезают, т е страница обновляется
...
Рейтинг: 0 / 0
18.07.2008, 17:18
    #35440102
Шогал
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
А если строки и столбцы создавать через функции insertRow и insertCell ?
...
Рейтинг: 0 / 0
18.07.2008, 17:20
    #35440104
vned
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
Пы.Сы не помешало бы добавить проверку на доступность объекта XMLHttpRequest (тоесть значение параметра ReadyState должно быть 0 или 4) перед отправкой данных, а создавать его не в процедуре запроса а при инициализации страницы, тоесть сделать так:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
var req = newXMLHttpRequest();

function newXMLHttpRequest() {
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    try {
      req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e1) {
      try {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {
      }
    }
  }
  return req;
}

function refreshTable() {
      if(req.readyState== 4 ||req.readyState== 0 ){
           req.open("GET", "http://localhost:8080/BookClient/AjaxServlet?action=showbooks", true);
           req.onreadystatechange=updateBooks;
           req.send(null);
      }
}
function updateBooks()
{
  if(req.readyState== 4 )
  {
    if(req.status== 200 )
    {
      readResponse();
    }
    else
    {
      alert(req.statusText);
    }
  }
}
function readResponse();
{
    var books = booksXML.getElementsByTagName("books")[ 0 ];

    var table = document.getElementById("booksTable");

    var items = books.getElementsByTagName("book");
    for (var I =  0  ; I < items.length ; I++) {
        var item = items[I];

        var id = item.attributes.getNamedItem("id").textContent; 
        var title = item.attributes.getNamedItem("title").textContent;
        var author = item.attributes.getNamedItem("author").textContent;
        var price = item.attributes.getNamedItem("price").textContent;

		var tr = document.createElement("tr");
		table.appendChild(tr);
		
		var tdId = document.createElement("td");
		tr.appendChild(tdId);
		tdId.appendChild(document.createTextNode(id));

		var tdTitle = document.createElement("td");
		tr.appendChild(tdTitle);
		tdTitle.appendChild(document.createTextNode(title));

		var tdAuthor = document.createElement("td");
		tr.appendChild(tdAuthor);
		tdAuthor.appendChild(document.createTextNode(author));

		var tdPrice = document.createElement("td");
		tr.appendChild(tdPrice);
		tdPrice.appendChild(document.createTextNode(price));
    }
}
...
Рейтинг: 0 / 0
18.07.2008, 17:24
    #35440112
vned
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
DmitryTSЯ сделал. Все равно не работает((
У меня получается выводить принятые данные в div с помощью innerHTML. То есть выходит, что браузер нормально принимает даные и корректно их парсит, но почему-то не может добавить новую строку в таблицу.
Кстати в Opera и Firefox, данные, которые я вывожу в div появляются и сразу изчезают, т е страница обновляется
попробуй последний топ)
...
Рейтинг: 0 / 0
18.07.2008, 17:46
    #35440167
DmitryTS
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
ШогалА если строки и столбцы создавать через функции insertRow и insertCell ?

Спасибо!!!! Все заработало!
...
Рейтинг: 0 / 0
18.07.2008, 17:49
    #35440181
DmitryTS
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
Но работает только в IE ((
...
Рейтинг: 0 / 0
18.07.2008, 18:40
    #35440257
vned
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
DmitryTSНо работает только в IE ((
Код: plaintext
1.
2.
3.
4.
5.
		var tr = document.createElement("tr");
		tr=table.insertRow(tr);
		
		var tdId = document.createElement("td");
		tdId=tr.insertCell(tdId);
                tdId.innerHTML=id;


попробуй таким образом. Проверил в IE и Мозиле
...
Рейтинг: 0 / 0
18.07.2008, 18:53
    #35440281
DmitryTS
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
Это не помогает. Зато я понял причину. Opera и Firefox почему-то перезагужают всю страницу полностью. Т. е. новые строки в таблицу добавляются, затем сразу же происходит обновление страницы и таблица возвращается в исходное состояние.
...
Рейтинг: 0 / 0
18.07.2008, 19:01
    #35440289
vned
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
Пы.Сы может, стоить заменить строки

Код: plaintext
1.
2.
3.
        var id = item.attributes.getNamedItem("id").textContent; 
        var title = item.attributes.getNamedItem("title").textContent;
        var author = item.attributes.getNamedItem("author").textContent;
        var price = item.attributes.getNamedItem("price").textContent;
на

Код: plaintext
1.
2.
3.
       var id = item.getElementsByTagName("id").firstChild.data; 
        var title = item.getElementsByTagName("title").firstChild.data;
        var author = item.getElementsByTagName("author").firstChild.data;
        var price = item.getElementsByTagName("price").firstChild.data;
если не ошибаюсь ;)
вообщем у меня так:


Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
function readResponse()
{
  booksXML=xmlHttp.responseXML;


    var books = booksXML.getElementsByTagName("response")[ 0 ];

    var table = document.getElementById("booksTable");

    var items = books.getElementsByTagName("result");
    for (var I =  0  ; I < items.length ; I++) {
        var item = items[I];

        var id = item.firstChild.data; 

		var tr = document.createElement("tr");
		tr=table.insertRow(tr);
		
		var tdId = document.createElement("td");
		tdId=tr.insertCell(tdId);
                tdId.innerHTML=id;

		var tdNum = document.createElement("td");
		tdNum=tr.insertCell(tdNum);
                tdNum.innerHTML="1";

    }
}
ответ сервера:

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
<?xml version=\"1.0\"?>
<response>
    <result>Kyiv</result>
    <result>Kirovograd</result>
    <result>Moskow</result>
    <result>Murmansk</result>
    <result>Washington</result>
    <result>Atlanta</result> 
    <result>London</result>
    <result>Manchester</result>
    <result>Toronto</result>
    <fieldid>insCountry</fieldid>
</response>  
...
Рейтинг: 0 / 0
18.07.2008, 19:05
    #35440294
vned
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
и еще сама страница:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<!DOCTYPE html PUBLIC "=//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;
                                        charset=Windows-1251"/>
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE"/>
<script type="text/javascript" src="validate1.js"></script>
</head>
<table width="50%" id="booksTable">
<caption>Login</caption>
</table>
<button onclick="validate('::ALL::','insCountry')">OK</button>

...
Рейтинг: 0 / 0
18.07.2008, 19:14
    #35440302
vned
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
DmitryTSЭто не помогает. Зато я понял причину. Opera и Firefox почему-то перезагужают всю страницу полностью. Т. е. новые строки в таблицу добавляются, затем сразу же происходит обновление страницы и таблица возвращается в исходное состояние.
Я у себя так проделал и не перегружает О_о
...
Рейтинг: 0 / 0
18.07.2008, 19:19
    #35440308
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
Переходи с реквеста на калбек (это тоже аякс, но в стиле гугл).
...
Рейтинг: 0 / 0
19.07.2008, 05:26
    #35440547
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
DmitryTSЭто не помогает. Зато я понял причину. Opera и Firefox почему-то перезагужают всю страницу полностью.

так может происходить из-за ошибки в яваскрипте или отстутствия строки return false в случае клика по кнопке. Т.е. чтобы не происходило перехода после нажатия на кнопку нужно написать примерно следующее: <button onclick="myFunc(); return false;"> , иначе ФФ делает сабмит формы, даже если кнопка - не submit (хз почему). Тоже самое происходит, если посреди myFunc() встречается ошибка и до строки return false дело не доходит.

Из сомнительного в Вашем скрипте: Вы делаете appendChild элементов в tr прямо в объект table. Это ошибка - строки tr таким образом можно добавлять только в tbody, thead или tfoot. Чтобы не заморачиваться с tbody/thead/tfoot, можно использовать insertRow и insertCell , но только не тем кривым макаром, каким "советовали" несколькими постами выше, а согласно спецификациям:
Код: plaintext
1.
2.
3.
4.
var tr = table.insertRow(- 1 );
tr.insertCell(- 1 ).appendChild(document.createTextNode(id));
tr.insertCell(- 1 ).appendChild(document.createTextNode(title));
...
...
Рейтинг: 0 / 0
19.07.2008, 05:27
    #35440548
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
ShSergeПереходи с реквеста на калбек (это тоже аякс, но в стиле гугл).
ты еще не замучался рекламировать?
...
Рейтинг: 0 / 0
19.07.2008, 10:43
    #35440612
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
illionты еще не замучался рекламировать?
Замучался. Но какая классная мулька!
...
Рейтинг: 0 / 0
19.07.2008, 20:49
    #35440950
apapacy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AJAX: таблица не обновляется
Серж.
Существуент три способа загрузки контента Ajax: XMLHttpRequesr, IFRAME, SCRIPT.
У скрипта есть ровно одно положительное свойство - кросс-доменность.
Но есть и отрицательные - невозможность синхронной загрузки, невозможность работы с ответом как с текстом, невозможность работы с ответом как с ЧМД-документом.
Второй и боле существенный недостаток для крупных проектов заключается в так называемой жесткой связанности клиентсого и серверного кода, которую можно избежать при взаимодечтвии с запросами и фреймами используя XML или JSON.
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / AJAX: таблица не обновляется / 25 сообщений из 26, страница 1 из 2
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]