<td> Les balises sont supprimées du texte lorsqu'elles sont injectées dans MooTools Elements

Question

J'essaie de générer du JavaScript dans MooTools qui récupère le balisage de ligne de table du serveur, puis l'ajoute à une table. J'ai un objet nommé htmlAjax qui est défini comme objet MooTools Ajax. L'objet récupère correctement le HTML du serveur (testé dans la console Firebug), mais lorsque j'essaie d'ajouter ce balisage à un nouvel élément, les éléments <td> sont supprimés. Voici ma fonction qui capture les données de la requête HTTP et tente d'ajouter une ligne:

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

La réponse que je reviens du serveur data ressemble à ceci:

<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> 

Une fois que j'appelle setHTML sur la variable slot (passant en data), l'élément <tbody>volunteer_slots a une nouvelle ligne, mais cette nouvelle ligne contient tout sauf les éléments <td>. Y a-t-il un moyen d'empêcher cela?

Answer 1

Ceci est assez intéressant. Bien que je ne puisse pas l'expliquer, j'ai une solution pour vous. Inverser l'ordre de vos setHTML() et injectInside() lignes, et les <td> s sont insérés correctement:

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

Vous utilisez apparemment MooTools 1.11, cependant, ce comportement semble se produire dans 1.2 ainsi. Très étrange! Cela doit avoir quelque chose à voir avec le fait qu'avant que le slots var soit injecté, il ne fait pas partie du DOM. Les effets de la définition de innerHTML d'un élément non-DOM peuvent être inattendus? J'aimerais pouvoir l'expliquer. Je vais devoir creuser plus profondément quand j'ai le temps.

Answer 2

Quelle version de MooTools utilisez-vous? Je ne suis pas sûr si cela a quelque chose à voir avec cela, mais dans la dernière version, il n'y a pas (autant que je sache) méthode setHTML, il est maintenant set('html', data). Je crois aussi que injectInside est devenu slot.inject($('volunteer_slots')). J'espère que cela t'aides.