José Molero José Molero - 5 months ago 15
HTML Question

Refresh table content from xsl transform using jquery

I am trying to update data from a xml service state using a xsl transform and attach data to a table.

As you can see, I use

xsl:value-of
to extract the required data from xml file. This data is variable in time, so it eventually changes.

desired table
This is a sample table format




I tried using
.load()
jquery function but it doesn't create the desired effect, it shatters the table structure with data from
svc:data1
.

What I want is to update each cell of the table with the xsl transform received data without refreshing page. Any idea?

xsl:variable
could help to store data on another place?

Sample code:

<header>
<script>
function autoRefresh()
{
<!-- do something here -->
$("#tbl").load(window.location.href);
}

setInterval('autoRefresh()', 2000);
</script>
</header>

<body onLoad="autoRefresh()">
<table id="tbl" border="1">
<tr>
<td>
<b>Text1</b>
<p>
<xsl:value-of select="svc:data1"/>
</p>
</td>
<td>
<b>Text2</b>
<p>
<xsl:value-of select="svc:data2"/>
</p>
</td>
<td>
<b>Text3</b>
<p>
<xsl:value-of select="svc:data3"/>
</p>
</td>
</tr>
</table>
</body>

Answer

At first, I think you don't need to refresh the page because JS is a dynamic language. Just class or id the elements that you want to update:

<body onLoad="autoRefresh()">
   <table id="tbl" border="1">
       <tr>
           <td>
              <b>Text1</b>
              <p id="p1">
              </p>
           </td>
           <td>
               <b>Text2</b>
               <p id="p2">
               </p>
           </td>
           <td>
               <b>Text3</b>
               <p id="p3">
               </p>
           </td>
           </tr>
     </table>
</body>

Then you should call the service periodically and request the data:

<script>
     (function service() {
         $.ajax({
             url: 'ajax/test.html', 
             success: function(data) {
                  $('#p1').html("<xsl:value-of select=\""+data["svc:data1"]"\"/>");
                  $('#p2').html("<xsl:value-of select=\""+data["svc:data1"]"\"/>");
                  $('#p3').html("<xsl:value-of select=\""+data["svc:data1"]"\"/>");
             },
             complete: function() {
                  // Schedule the next request when the current one's complete
                  setTimeout(service, 2000);
             }
         });
      })();

</script>

Here you can see an example of ajax request periodically:

How to fire AJAX request Periodically?