Dynamic Header , xslt

Question

I have a webpage with a dynamic list. I want the headers to be configurable. To start with the headers are named as "column1,column2....columnn" . On clicking on any of these header i open up a DHTML modal window where I select the header name from a predefined list so that I can assign this header name to the selected column. So I am returning a unique ID from my modal window to my parent form. Now i want to change the header to the selected header.

here is my xml

<ROOT>
<Header><Item>Column 1</Item></Header>
<Header><Item>Column 2</Item></Header>

<ROW>
<COlUMN>Zamora</COlUMN>
<COlUMN> Ruby E.</COlUMN>
</ROW>
<ROW>
<COlUMN>Hatfield</COlUMN>
<COlUMN> Hanae B.</COlUMN>
</ROW>
</ROOT>

here is how i am generating the xml in the codebehind

oXMLString.Append(Chr(13) & "<Header>")
oXMLString.Append(Chr(13) & "<Item>Column " & j + 1 & "</Item>")
oXMLString.Append(Chr(13) & "</Header>")

Here is my xslt for the header

<tr class="thead">
 <xsl:for-each select="Header/Item">        
  <td class="rowHead" style="vertical-align:bottom;">
   <a href="#">
    <xsl:attribute name="id">
     <xsl:value-of select="@id"/>
    </xsl:attribute>
    <xsl:attribute name="onclick">
     <xsl:text>showPopWin('UploadFile_Step4_Modal.aspx',500,500,returnFieldID);</xsl:text>
    </xsl:attribute>
    <xsl:value-of select="." />
   </a>
  </td>
 </xsl:for-each>
</tr>

If you see, when the list is generated the column headers are "column1" and "column2" where n=2

If you see the xslt the onclick event opens up a modal window which returns a fieldID for the column header. Now suppose i click on "column1" and the modal window returns fieldid="1" which is predefined in the database, how do i change the column header from "column1" to "Firstname" (Fieldid=1 is "firstname" )

Please help, I am stuck. I don't know much about xslt hence facing this issue.

Thanks Mithil

Answer 1

You don’t need xslt to solve your problem. All you need is some JavaScript. Here is a sample code in jQuery:

$('td.rowHead a').click(function(){
    var fieldId, fieldName;
    fieldId = // get field id from the popup
    fieldName = // get field name (e.g. via AJAX)
    this.innerHTML = fieldName;
});