VPF::Как обновить содержимое div-ва из дочернего окна?

t77

Дата 24.1.2010, 16:12 (ссылка)

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

Загрузка ...

Опытный

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

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

Доброе время суток.
Имеется Div(usersGroupsResultsTable), отображающий содержимое ХМЛ документа...
При первой загрузки страницы этот Div заполняется данными.

Код


<TABLE>            
                <TR>
                    <TD nowrap="true" class="SectionTitle" valign="bottom">
                        <A href="javaScript:openModal('/AUTH/PGROUP/MODIFY?pgroup_id=-1','extralarge');">
                            Добавить новую строку в список
                        </A>
                    </TD>
                </TR>            
        </TABLE>
<DIV style="width:100%; height:100%; overflow-y:auto;" id="usersGroupsResultsTable" class="treeMenuStyle">
            <TABLE width="100%" border="0" cellspacing="0" cellpadding="2" style="table-layout:fixed;">
                <xsl:choose>
                    <xsl:when test="count(PGROUPS/PGROUP)=0">
                        <TR>
                            <TD nowrap="true">
                                <I>Ни одной строки не найдено!</I>
                            </TD>
                        </TR>
                    </xsl:when>
                    <xsl:otherwise>
                        <xsl:for-each select="PGROUPS/PGROUP">
                            <xsl:sort select="@name" />
                            <!--Здесь я рисую строки из ХМЛ файла-->
                            <TR onmouseout="this.className='trOff'" onmouseover="this.className='trOn'" onclick="openModal('/AUTH/PGROUP/MODIFY?pgroup_id={@id}', 'extralarge');" class="trOff">
                                <TD onClick="" nowrap="true" width="100%">
                                    <NOBR style="width:100%; overflow:hidden; text-overflow:ellipsis;">
                                        <xsl:value-of select="@name"/>
                                    </NOBR>
                                </TD>
                            </TR>
                        </xsl:for-each>
                    </xsl:otherwise>
                </xsl:choose>
            </TABLE>
        </DIV>

Также над Div-ом имеется линк, при нажатии на который, открывается модальное окно, позволяющее внести новую строку в ХМЛ файл.
Вопрос как обновить Div(usersGroupsResultsTable), после добавления в ХМЛ новой строки, при этом не перегружая страницу ?
Я понимаю, что решение данной задачи, должно быть AJAX. Но не знаю как мне его использовать именно в моем случае...?? Если при загрузке страницы я заполнил Div данными из ХМЛ. То при нажатии на линк "добавить новую строку", открывается модальное окно, состоящее из 4 шагов. Тоесть на каждом шаге собираются данные и в конце при закрытии модального окна добавляется новая строка в ХМЛ файл. Как мне обновить список данных родительского окна-Div(usersGroupsResultsTable)?

12345c

Дата 24.1.2010, 18:32 (ссылка)

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

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 6
Всего: 101

Как Вы его хотите сделать модальным? showModalDialog есть только в IE.
http://xpoint.ru/forums/programming/javasc...ead/29423.xhtml
Если это действительно окно, а не его эмуляция через Div,

Код


opener.document.getElementById('usersGroupsResultsTable').innerHTML = текст-хтмл;

Или "+=" вместо "=".

Это сообщение отредактировал(а) 12345c - 24.1.2010, 18:33

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

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

t77

Дата 24.1.2010, 20:51 (ссылка)

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

Загрузка ...

Опытный

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

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

Ок...
После того как добавил новую строку в ХМЛ файл, делаю следующее:
1)удаляю все строки в таблице.
2)читаю хмл файл и создаю новые строки в таблице.
вроде все хорошо, но в онклике каждой строки мне необходимо указать ID для каждого списка. Прохожусь дебагером и явно вижу, что ID для каждой строки устанавливается правильно!
Но при клике на строку получается, что для всех строк сохранился последний номер ID из файла хмл.
Тоесть проблема в том, что в конце концов ID в онклике устанавливается не правильно!!!
Есть логическая ошибка, которую не могу найти. Уже мозги закипают. smile

Так выглядит хмл:

Код


<PGROUPS>
  <PGROUP id="0" name="default" description="" item_id="0" type="" /> 
  <PGROUP id="1" name="admin" description="" item_id="0" type="" /> 
  <PGROUP id="2" name="csr" description="" item_id="0" type="" /> 
  <PGROUP id="3" name="user1" description="" item_id="0" type="" /> 
  <PGROUP id="4" name="user2" description="" item_id="0" type="" /> 
  <PGROUP id="17" name="user3" description="" item_id="0" type="" /> 
  <PGROUP id="18" name="user4" description="" item_id="0" type="" /> 
  <PGROUP id="19" name="user5" description="" item_id="0" type="" /> 
  <PGROUP id="20" name="user6" description="" item_id="0" type="" /> 
  <PGROUP id="21" name="user7" description="" item_id="0" type="" />  
  <PGROUP id="23" name="user8" description="" item_id="0" type="" /> 
  <PGROUP id="24" name="user9" description="" item_id="0" type="" />   
  <PGROUP id="227" name="user10" description="" item_id="0" type="" /> 
  </PGROUPS>

А этот код, считывает строки из хмл файла и создает строки в чтмл таблице:

Код


function updateProfileGroupList()
                        {                                                                     
                                                                            
                            //remove all rows                                                                                    
                            var theTable = document.getElementById("usersGroupsResultsTable");    
                            var rowCount = theTable.rows;     
                            while(rowCount.length) // length=0 -> stop         
                                theTable.deleteRow(rowCount.length-1);                                                            
                            
                            var oXML = new ActiveXObject("microsoft.xmldom");
                            oXML.async = "false";
                            oXML.load(urlLocation + "/AUTH/PGROUP/GET?format=xml");    
                            var profGroupDoc = oXML.documentElement;
                            var groupCount = profGroupDoc.selectNodes("PGROUP").length;
                            
                                                                                    
                            if (profGroupDoc != null)
                            {
                            //debugger;
                                theTable = document.getElementById("usersGroupsResultsTable");
                                for(var i=0; i<groupCount; i++)
                                {                                                                                                        
                                    // append new row to the end of the table
                                    newRow = theTable.insertRow(i);
                                    newRow.onmouseout = "this.className='trOff'";
                                    newRow.onmouseover = "this.className='trOn'";
                                    pgroupId = profGroupDoc.selectNodes("PGROUP").item(i).getAttribute("id");
                                    modalUrl = "/AUTH/PGROUP/MODIFY?pgroup_id="+ pgroupId; 
                                    newRow.onclick = new Function("openModal(modalUrl, 'extralarge')");                                    
                                    newRow.className = "trOff";
                                    
                                    newCell = newRow.insertCell(0)
                                    newCell.nowrap = true;
                                    newCell.width = "100%";
                                    
                                    newRow.cells[0].innerHTML = "<NOBR style='width:100%; overflow:hidden; text-overflow:ellipsis;'>"+ profGroupDoc.selectNodes("PGROUP").item(i).getAttribute("name") +"</NOBR>";                                                                        
                                }
                            }
                            
                        }

При клике на любую строку видно, что у всех прописан ID последнего тега из файла хмл- тоесть 227.
Что за фигня не могу понять ?? smile

Помогите плиз. Что я делаю не так?

Добавлено через 4 минуты и 7 секунд
да, кстати вот функция модального окна, если что:

Код


function openModal(path, size)
                {                    
                    var res;
                    if (size == 'small')
                    {
                        var res = openModalDialog(urlLocation+path,null,"dialogWidth:560px; dialogHeight:320px; status:no; help:no");
                    }
                    else if (size == 'extralarge')
                    {
                        var res = openModalDialog(urlLocation+path,null,"dialogWidth:660px; dialogHeight:430px; status:no; help:no");
                    }
                    else
                    {
                        var res = openModalDialog(urlLocation+path,null,"dialogWidth:560px; dialogHeight:450px; status:no; help:no");
                    }
                    return res;
                }

12345c

Дата 24.1.2010, 21:33 (ссылка)

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

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 6
Всего: 101

Известная ошибка от неиспользования замыканий. Видно, что с этим пытались "бороться", вложили в функцию,

Код

//цитата, как не надо делать:
pgroupId = profGroupDoc.selectNodes("PGROUP").item(i).getAttribute("id");
modalUrl = "/AUTH/PGROUP/MODIFY?pgroup_id="+ pgroupId;
newRow.onclick = new Function("openModal(modalUrl, 'extralarge')");

pgroupId тут вообще глобальная переменная и в ней остаётся последний ид цикла. В данном случае var pgroupId не поможет, потому что в onclick она не зашита (текстом или замыканием). Пишите этот фрагмент как

Код


pgroupId = profGroupDoc.selectNodes("PGROUP").item(i).getAttribute("id");
modalUrl = "/AUTH/PGROUP/MODIFY?pgroup_id="+ pgroupId;
newRow.onclick = new Function("openModal('"+modalUrl+"', 'extralarge')");

, но это не модно, т.к. показывает только дедовские методы работы. Лучше и правильнее в плане передачи чего угодно -

Код


var pgroupId = profGroupDoc.selectNodes("PGROUP").item(i).getAttribute("id");
var modalUrl = "/AUTH/PGROUP/MODIFY?pgroup_id="+ pgroupId;
newRow.onclick = (function(modalUrl){
  openModal(modalUrl, 'extralarge');
})(modalUrl);

(можно, конечно, и с new Function с параметром или даже

Код


var pgroupId = profGroupDoc.selectNodes("PGROUP").item(i).getAttribute("id");
var modalUrl = "/AUTH/PGROUP/MODIFY?pgroup_id="+ pgroupId;
newRow.onclick = function(){
  var p = modalUrl;
  openModal(p, 'extralarge');
};

, но менее кошерно - зачем передача через именованную сущность - переменную, если можно через параметр).

Это сообщение отредактировал(а) 12345c - 24.1.2010, 21:39

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

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

t77

Дата 25.1.2010, 01:38 (ссылка)

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

Загрузка ...

Опытный

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

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

12345c, ваш ответ конечно же исчерпывающий. Чесно говоря еще не попробовал, но кажется это то что нужно.
Буду пробовать, спасибо! smile

Скажите пожалуйста, что касается присвоения классов и стилей... Что то я там тоже запорол, не класятся мои строки и стили не работают. smile

Посмотрите пожалуйста.
Заранее благодарю.

12345c

Дата 25.1.2010, 12:22 (ссылка)

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

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 6
Всего: 101

newRow.className = "trOff"; - присвоен нормально, а с событиями, наверное, та же история. Хорошо бы сразу иметь полный текст примера, чтобы посмотреть, а то так догадываться нужно. Например, будет работать:

Код


newRow.onmouseout = (function(t){t.className='trOff'";})(this);
newRow.onmouseover = (function(t){t.className='trOfn";})(this);

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

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

t77

Дата 25.1.2010, 15:51 (ссылка)

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

Загрузка ...

Опытный

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

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

Из всех вышеприведенных вами вариантов, работает этот:

Код


pgroupId = profGroupDoc.selectNodes("PGROUP").item(i).getAttribute("id");
modalUrl = "/AUTH/PGROUP/MODIFY?pgroup_id="+ pgroupId;
newRow.onclick = new Function("openModal('"+modalUrl+"', 'extralarge')");

Спасибо!

А, что касается стилей(onmouseout & onmouseover), то при первой загрузки странички лседующий вариант на ХСЛ работает:

Код


<xsl:for-each select="PGROUPS/PGROUP">
<xsl:sort select="@name" />
 <TR onmouseout="this.className='trOff'" onmouseover="this.className='trOn'" onclick="openModal('/AUTH/PGROUP/MODIFY?pgroup_id={@id}', 'extralarge');" class="trOff">
  <TD onClick="" nowrap="true" width="100%"><NOBR style="width:100%; overflow:hidden; text-overflow:ellipsis;"><xsl:value-of select="@name"/></NOBR></TD>
 </TR>
</xsl:for-each>

Теперь как сделать тоже самое(onmouseout & onmouseover) на JavaScript?
Пишу:

Код


newRow.onmouseout = (function(t){t.className='trOff';})(this);
newRow.onmouseover = (function(t){t.className='trOfn';})(this);

//OR

newRow.onmouseout = new Function({this.className='trOff'}); 
newRow.onmouseover = new Function({this.className='trOfn'});

Не работает...
Как это сделать??
И еще такой вопрос, можно ли в JavaScript сделать сортировку по атрибуту.Например как в вышеприведенном примере ХСЛ:

Код


<xsl:sort select="@name" />

Можно ли сделать тоже самое на JavaScript ?? Если да, то как ?
Заранее благодарю.

12345c

Дата 25.1.2010, 17:59 (ссылка)

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

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 6
Всего: 101

Так надо научить работать код по этому типу: newRow.onmouseout = (function(t){t.className='trOff';})(this); , потому что надо сохранять объект в этом замыкании.
...
В JS есть функция sort(), по массиву.

Цитата(12345c @ 25.1.2010, 12:22

)

Хорошо бы сразу иметь полный текст примера, чтобы посмотреть, а то так догадываться нужно.

(дубль 2)

Добавлено через 48 секунд
(Текст примера - к вопросу. почему не работает onmouseout = (function(t){t.className='trOff';})(this) .)

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

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

t77

Дата 25.1.2010, 18:57 (ссылка)

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

Загрузка ...

Опытный

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

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

Цитата

newRow.onmouseout = (function(t){t.className='trOff';})(this);

Данный вариант не работает...
Получилось установить значения onmouseout & onmouseover, следующим образом:

Код


newRow.onmouseout = new Function("this.className='trOff'");
newRow.onmouseover = new Function("this.className='trOfn'");

Спасибо, работает!
Что же касается сортировки. Скажите пожалуйста, можно ли сортировать хмл значения сразу в петле FOR ??
Или же нужно перекинуть их сначала в массив и только потом сортировать??

12345c

Дата 25.1.2010, 19:44 (ссылка)

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

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 6
Всего: 101

Прямо XML в JS нельзя, в смысле, нет прямой функции или простой реализации. Есть где-то готовые скрипты - сортировщики таблиц по столбцам (например, jquery.tablesorter). Можно использовать как каркас.

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

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

t77

Дата 26.1.2010, 01:35 (ссылка)

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

Загрузка ...

Опытный

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

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

12345c, большое и человеческое вам спасибо!
Вопрос закрыт.
В вашей репутации появляется еще один плюс. smile

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