Refresh table content from xsl transform using jquery

Question

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.

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>

Seems to me that you need to use XHR-techniques to update segments of your page. There's a myriad of ways of doing this, whether XSLT is the right tool for the job I don't know. My first guess is to go for JSON instead. — Abel, Aug 17 '15 at 13:56
@Abel XHR was another possible option that i thought to use, maybe it could be easier, idk. I need to use XML-XSLT mandatorily so JSON is not the solution. Thanks for the comment. — José Molero, Aug 18 '15 at 10:31

score 1 · Accepted Answer · edited May 23 '17 at 11:45

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?

This worked with a little modification. I received `data` as an XmlObject and processed it with XML DOM, so it was easier than using `xsl:value-of` and whatever. Thanks Andres. — José Molero, Aug 18 '15 at 10:22

Refresh table content from xsl transform using jquery

1 Answers1