powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / обновление таблицы AJAX 'ом
25 сообщений из 32, страница 1 из 2
обновление таблицы AJAX 'ом
    #35702726
jack_sam
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Добрый день, всем.

задача такая: есть форма из которой отправляются данные на сервак с помощью XMLHttpRequest и получаютется ответ, так вот разместить ответ на странице не проблема... тока как этот ответ засунуть в нужную строку таблицы???

Вот код: этот скрипт отвечает за размещение данных на странице и по идее в нужной строке таблицы:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
function processReqChange2() {

    if (req.readyState ==  4 ) {
        clearTimeout(reqTimeout);

        // only if "OK"
        if (req.status ==  200 ) {    

            //переменная updrow соответствует определенной строке таблицы и вставляем результат 
            //  ответа сервера
            document.getElementById(updrow).innerHTML = req.responseText;

        } else {
            alert("Не удалось получить данные:\n" + req.statusText);
        }
    }
}

Код вставляемой строки из backend 'а:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
  <tr align='center' valign='middle'  >
    <td>рррррр</td>

    <td height='5' nowrap>оооооооо</td>

    <td height='5' nowrap >ггггггггггг</td>

  </tr>

Таблица куда вставляем строку:

Код: 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.
  <table id='tab1' class='sortable' align='center' >

   <thead>
    <tr>
                 <td><strong><font size='1'>Статус</font></strong></td>
                 <td><strong><font size='1'>Бранч</font></strong></td>
                 <td><strong><font size='1'>Программа</font></strong></td>
    </tr>
   </thead>

   <tbody>

  while($res = mysql_fetch_array($res_migr)) //цикл заполнения таблицы
  {
echo "
<span id='".$res['idc'].$res['fid']."'>"; // здесь присваивается id updrow строке, по которому надо сделать вставку строки
  <tr>
    <td>".$res['status_s']."</td>
    <td><font size='1'>".$res['branch']."</font></td>
    <td><font size='1'>".$res['Program']."</font></td>
  </tr>

</span>";
}

echo "</tbody></table>";


соответственно после попытки выполнения вставки строки из backend 'а строка вставляется, тока почемуто прямо над таблицей, а не в таблицу на свое место
подскажите в чем может быть проблема, как сделать чтоб строка вставлялась в таблицу??

связано ли это с innerHTML ?
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35702792
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
jack_samстрока вставляется, тока почемуто прямо над таблицей, а не в таблицу на свое местоА с чего вдруг она должна вставляться в строку???
над строкой формируется элемент span с id (updrow). Потом вы получаете элемент по указанному id (понятно, что им оказывается span) и удивляетесь, что html вставляется в него, а не в tr

Насчет innerHTML в таблицах - Фича 4
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35702960
jack_sam
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Яростный Меч
А с чего вдруг она должна вставляться в строку???
над строкой формируется элемент span с id (updrow). Потом вы получаете элемент по указанному id (понятно, что им оказывается span) и удивляетесь, что html вставляется в него, а не в tr

Со span понятно - спасибо вам))

а Яростный МечНасчет innerHTML в таблицах - Фича 4 не понятно как же все таки сделатьчтоб строка вставлялась??? у вас есть пример?
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35703008
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
jack_samа Яростный МечНасчет innerHTML в таблицах - Фича 4 не понятно как же все таки сделатьчтоб строка вставлялась??? Там же написано - юзайте DOM.
Я, например, получал не HTML, а непосредственно данные (в формате JSON), парсилось через eval(), а далее - стандартные вещи типа document.createElement и appendChild (по этим словам можно гуглить).
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35703522
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Аналогично.
Для большего юзабилити и универсальности использовал возможности ООП javascript - разделял представление от данных: создавал иерархию объектов, где каждый объект знал, что ему делать - вставляться, отображаться, удаляться, прятаться и т.д. Конечно, для новичка сложновато, но оно того стоит - структура совершенно кроссбраузерна, работает очень быстро и как часики.
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35703863
ZeusTheTrueGod
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
попробуйтк ExtJs - там эта возможность встроенная
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35704158
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
jack_sam...отправляются данные на сервак с помощью XMLHttpRequest и получаютется ответ...
Если это получается, остальное - тоже получится. Наверное, поэтому и не отвечают.
Ответ - яваскрипт+дом+хтмл.
А вот Зевсу точно экстжс приплачивает за рекламу. Набираешь в гугле экстжс (латинскими буквами) и, хоть и не с первого раза, попадаешь на пост Зевса.
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35705308
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ZeusTheTrueGodпопробуйтк ExtJs - там эта возможность встроеннаяВчера глянул их сайт - красиво, ничего не скажешь. Взял на заметку. :)
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35706826
jack_sam
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Ну вы чуваки даете...)

еслиб в доки не отправляли , а примерчик бы дали рабочий, то сколько времени бы сэкономилось)

почитал про передачу данных XML и JSON, короче буду использовать последнее ... надеюсь будет результат
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35706955
jack_sam
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Яростный Мечjack_samа Яростный МечНасчет innerHTML в таблицах - Фича 4 не понятно как же все таки сделатьчтоб строка вставлялась??? Там же написано - юзайте DOM.
Я, например, получал не HTML, а непосредственно данные (в формате JSON), парсилось через eval(), а далее - стандартные вещи типа document.createElement и appendChild (по этим словам можно гуглить).

как ни печально твои советы оказались для меня самыми дельными))) я имею ввиду отсылания к докам... получилось все реализовать, единственное JSON не передает кириллицу... но в google с первого тыка нашел функцию преобразования .

так что все гуд! спасибо всем
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35706984
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
jack_samполучилось все реализовать, единственное JSON не передает кириллицу...
то есть как это не передает? По-моему прекрасно получалась у тебя кириллица в исходном варианте (<tr align='center' valign='middle'><td>рррррр</td>...). А под JSON имелся в виду не пхпшный модуль, а то, что response надо отдавать не в виде хтмл, а в виде хэша или массива (в твоем вопросе - достаточно массива : ['рррррр','оооооооо','ггггггггггг']). Итого должно получиться что-то эдакое:
Код: 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.
<script>
var response = "['рррррр','оооооооо','ггггггггггг']";
function addRow(aData) //вариант1
{
	var tbody = document.getElementById('tab1').tBodies[ 0 ];
	var newTr = document.createElement('tr');
	for (var i= 0 ; i<aData.length; i++)
	{
		var newTd = document.createElement('td');
		newTd.innerHTML = aData[i];
		newTr.appendChild(newTd);
	}
	tbody.appendChild(newTr);  //либо insertBefore, чтобы вставить встроку на определенную позицию, а не в конец
}
function addRow_v2(aData) //вариант2
{
	var newTr = document.getElementById('tab1').insertRow(- 1 );
	for (var i= 0 ; i<aData.length; i++) newTr.insertCell(- 1 ).innerHTML = aData[i];
}
</script>

<table id='tab1'>
	<thead><tr><td>Статус</td><td>Бранч</td><td>Программа</td></tr></thead>
	<tbody></tbody>
</table>
<button onclick="addRow(eval(response))">доб. строку</button>
<button onclick="addRow_v2(eval(response))">доб. строку (вариант2)</button>
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35707034
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
jack_samЯростный Меч
как ни печально твои советы оказались для меня самыми дельными))) А почему это печально?
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35707040
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
illion
Код: plaintext
eval(response)
Маленькое уточнение: лучше делать так
Код: plaintext
eval('(' + response + ')')

Для массивов это не принципиально, но в случае хэша (с фигурными скобками) приведет к дурацким вопросам на форуме :)
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35707060
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Яростный Мечjack_samкак ни печально твои советы оказались для меня самыми дельными))) А почему это печально?
наверное потому, что не готовое решение, а лазать по докам... :-)

Яростный Мечлучше делать так
Код: plaintext
eval('(' + response + ')')
Для массивов это не принципиально, но в случае хэша (с фигурными скобками) приведет к дурацким вопросам на форуме :)
дурацкие вопросы никого не удивят :-). Здесь скорее вопрос единообразия, чем принципа массив-хэш. +1.
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35707063
jack_sam
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Яростный Мечillion
Код: plaintext
eval(response)
Маленькое уточнение: лучше делать так
Код: plaintext
eval('(' + response + ')')

Для массивов это не принципиально, но в случае хэша (с фигурными скобками) приведет к дурацким вопросам на форуме :)
за евал.. я в теме

рабочий вариант почему то заглючился в 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.
function processReqChange2() {

    if (req.readyState ==  4 ) {
        clearTimeout(reqTimeout);

        // only if "OK"
        if (req.status ==  200 ) {

            var json = eval( "(" + req.responseText + ")" );
            
    var tbody = document.getElementById('tab1');

    var trow = document.getElementById(updrow);
    
    var trownew = document.createElement('tr');
    
var TD_status_s=document.createElement('td');
    TD_status_s.appendChild(document.createTextNode(json.status_s));    
    
var TD_branch=document.createElement('td');
    TD_branch.appendChild(document.createTextNode(json.branch));
    
var TD_Program=document.createElement('td');
    TD_Program.appendChild(document.createTextNode(json.Program));    

var TD_refcontract=document.createElement('td');
    TD_refcontract.appendChild(document.createTextNode(json.refcontract));      

trownew.appendChild(TD_status_s);    
trownew.appendChild(TD_branch);
trownew.appendChild(TD_Program);
trownew.appendChild(TD_refcontract);   
    
    
  tbody.insertBefore(trownew, trow); 

        } else {
            alert("Не удалось получить данные:\n" + req.statusText);
        }
    }
}
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35707226
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Во первых:
Код: plaintext
1.
var tbody = document.getElementById('tab1').tBodies[ 0 ];
Во вторых не надо криэйтить textNode, а присваивать элементу innerHTML
В третьих, вариант2 от illion проще заюзять.
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35707283
jack_sam
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
ShSergeВо первых:
Код: plaintext
1.
var tbody = document.getElementById('tab1').tBodies[ 0 ];
Во вторых не надо криэйтить textNode, а присваивать элементу innerHTML
В третьих, вариант2 от illion проще заюзять.

Добавил tBodies[0] и присвоил элементу innerHTML - не помогло (((

я понимаю что вариант2 от illion проще заюзять, но и этот же должен работать!!!
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35707380
jack_sam
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Сейчас на рабочем компе вылезла еще такая муть: Fatal error: Call to undefined function json_encode()
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35707411
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
jack_samно и этот же должен работать!!!
как в детском саду. Что не работает то хоть конкретно?! В каком месте ошибка вылазит? Откуда берется переменная updrow? Как выглядит responseText?


jack_samСейчас на рабочем компе вылезла еще такая муть: Fatal error: Call to undefined function json_encode()
с пхп разбирайся сам или в форуме по пхп. Здесь не место.
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35707858
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ShSerge
Код: plaintext
1.
var tbody = document.getElementById('tab1').tBodies[ 0 ];
Во вторых не надо криэйтить textNode, а присваивать элементу innerHTMLИ снова Фича 4 :)
Увы, это имеет место.
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35708127
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Яростный Меч,

То, что я написал к фиче №4 не имеет никакого отношения. На самом деле, фича довольно известная.
Одно дело присвоение элементу td innerHTML, а другое - присваивать тбоди строки с ячейками.
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35708226
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ShSergeЯростный Меч,

То, что я написал к фиче №4 не имеет никакого отношения. На самом деле, фича довольно известная.
Одно дело присвоение элементу td innerHTML, а другое - присваивать тбоди строки с ячейками.Так у тбоди innerHTML тоже readonly
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35708266
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Яростный Меч,

Непонятка вышла, я именно про ячейку говорил. Ячейке присваивать иннерХТМЛ можно.
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35709405
jack_sam
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
господа хорошие все получилось!!!!)))
и все было проще чем думал и пытался сделать, illion тока не ворчи)), к слову вместо json_encode() использовал PEAR JSON.

Вот собстна какой получился код вставки строки:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
function processReqChange2() {

    if (req.readyState ==  4 ) {
        clearTimeout(reqTimeout);

        // only if "OK"
        if (req.status ==  200 ) {

            var json = eval( "(" + req.responseText + ")" );


var upx=document.getElementById(updrow).cells;
upx[ 0 ].innerHTML=json.status_s;

upx[ 1 ].innerHTML=json.branch;

upx[ 3 ].innerHTML=json.refcontract;


        } else {
            alert("Не удалось получить данные:\n" + req.statusText);
        }
    }
}
...
Рейтинг: 0 / 0
обновление таблицы AJAX 'ом
    #35778983
NT Man
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Меня тоже интересует данная тема. Только нужно универсальное решение. Лепить отдельную логику для таблиц ну никак не устраивает. Весь html-шаблонизирован, следовательно, просто кровь из носа нужен универсальный innerHTML, который бы работал с таблицами как с DIV-ами.
...
Рейтинг: 0 / 0
25 сообщений из 32, страница 1 из 2
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / обновление таблицы AJAX 'ом
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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