<td> теги удаляются из текста при добавлении в элементы MooTools

Question

Я пытаюсь создать некоторый 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>. Есть ли способ предотвратить это?

Answer 1

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

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

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

Answer 2

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