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

Question

J'essaie de créer du code JavaScript dans MooTools qui récupère le balisage des lignes de la table du serveur, puis l'ajoute à une table. J'ai un objet nommé htmlAjax défini comme objet MooTools Ajax . L'objet obtient le code HTML du serveur correctement (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 reçois du serveur sous données se présente comme suit:

<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 (en transmettant des données ), le < tbody > l'élément 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 que cela se produise?

Answer 1

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

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

Vous utilisez apparemment MooTools 1.11, toutefois, ce problème semble également se produire dans la version 1.2. Très étrange! Cela doit avoir quelque chose à voir avec le fait qu'avant l'injection de la slots var, elle 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 sais pas si cela a quelque chose à voir avec cela, mais dans la dernière version, il n'y a pas de méthode (à ma connaissance) setHTML , elle est maintenant set (' html ', data) . Je pense également que injectInside est devenu slot.inject ($ ('volunteer_slots')) . J'espère que cela vous aidera.