I have a large XML that needs to be generated into HTMl table. The table will contain a small icon and subject that is clickable in each row.

so when each row is clicked, the details should be displayed in another frame. each row has some kind of message id.

the problem is that when it is p****d, it generates HTML table pretty quickly, but when I click one of the rows to view the detail, it holds until all icons are loaded. Once all icons for rows are completely loaded, the detail appears in another frame.

So I am just wondering if what is causing to hold the process.

here is the two different XML. the first one p****s XML for really long, but unexpectedly displays graphic quickly.

The second one p****s XML really fast, but loads graphic really slowly. I just want to know the difference.

the first XSL.

--------------------------------------------------

<xsl:for-each select="msgs/msg">
  <xsl:sort select="scol[@name = $SORTCOL_1]/@sortdata | @*[concat('@',name()) = $SORTCOL_1] | col[@name = $SORTCOL_1]" order="{$SORTORD_1}"/>
  <xsl:sort select="scol[@name = $SORTCOL_2]/@sortdata | @*[concat('@',name()) = $SORTCOL_2] | col[@name = $SORTCOL_2]" order="{$SORTORD_2}"/>
  <TR><xsl:attribute name="onClick"><xsl:value-of select="concat(concat('eventhandler.onRowClick(1,' ,@mid),');')"/></xsl:attribute> <xsl:attribute name="onDblClick"><xsl:value-of select="concat(concat('eventhandler.onRowClick(2,' ,@mid),');')"/></xsl:attribute> <xsl:attribute name="id"><xsl:value-of select="concat('M_',@mid)"/></xsl:attribute><xsl:choose><xsl:when test="@RD = '0'"><xsl:attribute name="class">rowunread</xsl:attribute></xsl:when><xsl:otherwise><xsl:attribute name="class">rowread</xsl:attribute></xsl:otherwise></xsl:choose>
    <TD valign="top"><xsl:choose><xsl:when test="@DL = 'I'"><IMG SRC="images/row_excl.gif" WIDTH="11" HEIGHT="16"/></xsl:when></xsl:choose></TD>
    <TD valign="top"><xsl:choose><xsl:when test="@RD = '0'"><IMG SRC="images/row_notread.gif" WIDTH="19" HEIGHT="16"/></xsl:when><xsl:otherwise><IMG SRC="images/row_read.gif" WIDTH="19" HEIGHT="16"/></xsl:otherwise></xsl:choose></TD>
    <TD valign="top"><xsl:value-of select="col[@name='Subject']"/></TD>
    <TD valign="top"><xsl:value-of select="scol[@name='Date']"/></TD>
  </TR>
  <TR><TD COLSPAN="5" HEIGHT="1" BGCOLOR="#E2E2E2"></TD></TR>

</xsl:for-each>

------------------------------------------------------------------------------------------------------------------

the second XSL.

------------------------------------------------------------------------------------------------------------------

<xsl:for-each select="msgs/msg">
  <xsl:sort select="scol[@name = $SORTCOL_1]/@sortdata | @*[concat('@',name()) = $SORTCOL_1] | col[@name = $SORTCOL_1]" order="{$SORTORD_1}"/>
  <xsl:sort select="scol[@name = $SORTCOL_2]/@sortdata | @*[concat('@',name()) = $SORTCOL_2] | col[@name = $SORTCOL_2]" order="{$SORTORD_2}"/>
  <TR><xsl:attribute name="id"><xsl:value-of select="concat('M_',@mid)"/></xsl:attribute> <xsl:choose><xsl:when test="@RD = '0'"><xsl:attribute name="class">rowunread</xsl:attribute></xsl:when><xsl:otherwise><xsl:attribute name="class">rowread</xsl:attribute></xsl:otherwise></xsl:choose>
    <TD valign="top"><xsl:choose><xsl:when test="@DL = 'I'"><IMG SRC="images/row_excl.gif" WIDTH="11" HEIGHT="16"/></xsl:when></xsl:choose></TD>
    <TD valign="top"><xsl:choose><xsl:when test="@RD = '0'"><IMG SRC="images/row_notread.gif" WIDTH="19" HEIGHT="16"/></xsl:when><xsl:otherwise><IMG SRC="images/row_read.gif" WIDTH="19" HEIGHT="16"/></xsl:otherwise></xsl:choose></TD>
    <TD valign="top"><xsl:value-of select="col[@name='From']"/></TD>
    <TD valign="top"><xsl:value-of select="col[@name='Subject']"/></TD>
    <TD valign="top"><xsl:value-of select="scol[@name='Date']"/></TD>
  </TR>
  <TR><TD COLSPAN="5" HEIGHT="1" BGCOLOR="#E2E2E2"></TD></TR>

</xsl:for-each>

-----------------------------------------------------------------------------------------------------------------



the difference in these xsl is that "<TR>" tag. the first one concatenates string to build javascript function, but the second one doesn't have it. instead, I am using this function. so for the second XSL, after it p****s, this function is called. but this is not slow at all. I am assuming that the slowness for loading graphic might be associated with this function. i am not sure what is causing the slowness of loading graphic.

function initTable()
{
 var table = document.getElementById('MessageTable');
 if(table != 'undefined' && table != null)
 {
  var rows = table.getElementsByTagName("tr");
  var nRow = table.rows.length;
  if(nRow > 1)
  {
   for(var i=1;i<nRow;i++)
   {
    var msgId = rows[i].getAttribute('id');
    msgId = msgId.substring(msgId.indexOf("_")+1, msgId.length);
    rows[i].onclick = new Function("eventhandler.onRowClick(1, '" + msgId + "')");
    rows[i].ondblclick = new Function("eventhandler.onRowClick(2, '" + msgId + "')");
   }
  }
 }
}

I am not sure if my description is enough.

It would be very great if someone can solve this issue.