Теги ‹td› удаляются из текста при вставке в MooTools Elements.

Я пытаюсь создать JavaScript в MooTools, который извлекает разметку строки таблицы с сервера, а затем добавляет ее в таблицу. У меня есть объект с именем htmlAjax, который установлен как объект MooTools Ajax. Объект правильно получает HTML-код с сервера (проверено в консоли Firebug), но когда я пытаюсь добавить эту разметку к новому элементу, элементы <td> удаляются. Вот моя функция, которая захватывает данные из HTTP-запроса и пытается добавить строку:

htmlAjax.addEvent('onComplete', function (data) {
    var slot = new Element('tr');
    slot.setHTML(data);
    slot.injectInside($('volunteer_slots'));
});

Ответ, который я получаю от сервера в data, выглядит так:

<td><div class="title" rel="60">
    <a class="modal" href="index.php?view=volunteerslot&amp;tmpl=component&amp;id=60" rel="{handler: 'iframe', size: {x: 650, y: 550}}" >test</a>
</div>
</td>
<td class="button_column">
    <img src="images/publish_x.png" />
</td>
<td>0 minutes</td>
<td><select name="volunteers[60]" id="volunteers60" class="inputbox"><option value="0"  selected="selected">(select...)</option><option value="63" >Joe LeBlanc</option><option value="64" >Test User</option><option value="65" >Test User</option><option value="66" >Test User</option><option value="67" >Test User</option></select></td>
<td><select name="total_time_spent[60][hours]" id="total_time_spent60hours" ><option value="0"  selected="selected">0</option><option value="1" >1</option><option value="2" >2</option><option value="3" >3</option><option value="4" >4</option><option value="5" >5</option><option value="6" >6</option><option value="7" >7</option><option value="8" >8</option><option value="9" >9</option><option value="10" >10</option><option value="11" >11</option><option value="12" >12</option><option value="13" >13</option><option value="14" >14</option><option value="15" >15</option><option value="16" >16</option><option value="17" >17</option><option value="18" >18</option><option value="19" >19</option><option value="20" >20</option><option value="21" >21</option><option value="22" >22</option><option value="23" >23</option><option value="24" >24</option></select>&nbsp;hours&nbsp;&nbsp;<select name="total_time_spent[60][minutes]" id="total_time_spent60minutes" ><option value="0"  selected="selected">0</option><option value="15" >15</option><option value="30" >30</option><option value="45" >45</option></select>&nbsp;minutes</td>
<td class="button_column">
    <img src="images/tick.png" />
</td>

Как только я вызываю setHTML для переменной slot (передавая data), элемент <tbody> volunteer_slots имеет новую строку, но эта новая строка содержит все, кроме элементов <td>. Есть ли способ предотвратить это?


javascript html ajax mootools
person jlleblanc    schedule 11.09.2009    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Это довольно интересно. Хотя я не могу это объяснить, у меня есть решение для вас. Поменяйте местами строки setHTML() и injectInside(), и <td> будут вставлены правильно:

slot.injectInside($('volunteer_slots'));
slot.setHTML(data);

Очевидно, вы используете MooTools 1.11, однако такое поведение наблюдается и в 1.2. Очень странно! Это должно быть как-то связано с тем фактом, что до внедрения переменной slots она не является частью DOM. Эффекты установки innerHTML элемента, отличного от DOM, могут быть неожиданными? Хотел бы я объяснить это. Мне придется копнуть глубже, когда у меня будет время.

person zombat    schedule 11.09.2009
comment
хорошо поймать это. mootools иногда делает странные вещи с элементами, которые он вводит, у меня он испортил стиль от блока к встроенному элементу, введенному в div с переполнением... - person Dimitar Christoff; 14.09.2009

arrow_upward
0
arrow_downward

Какую версию MooTools вы используете? Не уверен, что это как-то связано с этим, но в последней версии нет (насколько я знаю) метода setHTML, теперь есть set('html', data). Я также считаю, что injectInside стал slot.inject($('volunteer_slots')). Надеюсь это поможет.

person theIV    schedule 11.09.2009