Question

I’ve got to add a new row with it’s content populated from an ajax query when I click on any row present. Everything is working well in ie8, ff3.6, opera11, but in chrome10 and safari5 the row are always shown as the first row even if the HTML code is well ordered.

the javascript use is here:

jQuery('.tx_tacticinfocours_pi1_cour_line').click(function (){
    if(running==false){
        running=true;
        jQuery('.cour_detail_temp_inner').slideUp(500, function () {
            jQuery(this).parents('.cour_detail_temp').remove();
        });
        var td=jQuery(this).after('<tr class="cour_detail_temp"><td colspan="8" style="padding: 0pt;"><div class="cour_detail_temp_inner" style="display: none;"></div></td></tr>');
        td=td.next().find('.cour_detail_temp_inner');
        var url=jQuery(this).find('.tx_tacticinfocours_pi1_detail_link a').attr('href');

        td.load(url,function(){
            jQuery(this).slideDown(500,function(){running=false;});
        });
    }
});

and here is the HTML (it’s typo3 template):

<table class="tx_tacticinfocours_pi1_liste" border="0" cellspacing="0" cellpadding="0">

<tr>
    <th>###TITRE_WEB###</th>
    <th>###TITRE_PDF###</th>
    <th>###TITRE_DETAILS###</th>
    <th>###TITRE_SIGLE###</th>
    <th>###TITRE_TITRE###</th>
    <th>###TITRE_ENLIGNE###</th>
    <th>###TITRE_ENSEIGNANT###</th>
    <th>###TITRE_RESPONSABLE###</th>
</tr>

<!-- ###COURS### begin -->
<tr class="tx_tacticinfocours_pi1_cour_line">
    <td class="tx_tacticinfocours_pi1_link"><!-- ###COURS_LINK### begin -->###COURS_WEB_IMAGE###<!-- ###COURS_LINK### end --></td>
    <td class="tx_tacticinfocours_pi1_link"><!-- ###PDF_LINK### begin -->###PDF_IMAGE###<!-- ###PDF_LINK### end --></td>
    <td class="tx_tacticinfocours_pi1_link tx_tacticinfocours_pi1_detail_link"><!-- ###DETAILS_LINK### begin -->###DETAILS_IMAGE###<!-- ###DETAILS_LINK### end --></td>
    <td class="tx_tacticinfocours_pi1_sigle" nowrap>###COURS_SIGLE###</td>
    <td class="tx_tacticinfocours_pi1_titre">###COURS_TITRE###</td>
    <td class="tx_tacticinfocours_pi1_enligne">###COURS_ENLIGNE###</td>
    <td class="tx_tacticinfocours_pi1_enseignant" nowrap>###COURS_ENSEIGNANT###</td>
    <td class="tx_tacticinfocours_pi1_responsable" nowrap>###COURS_RESPONSABLE###</td>
</tr>
<!-- ###COURS### end -->

have you got any idea why it’s doing so or any work around?

Answer 1

I’m not sure, but try turning:
var td=jQuery(this).after(...)

to: var td=jQuery('<tr class="cour_detail_temp"><td colspan="8" style="padding: 0pt;"><div class="cour_detail_temp_inner" style="display: none;"></div></td></tr>').appendTo(this);

I think what you’ve got there is more of a css problem than a javascript problem.