JQuery：更改内容<div>每 5 秒</div><div id="text_translate"><p>我已经使用 xml 和 xslt 设置了一个无线电广播服务器。 我显示当前正在播放的歌曲，但当然，每分钟都会改变，所以我希望&lt;div&gt;每秒刷新一次，以确保显示的数据是最新的。</p><p> 我写了一个 JQuery function，但这不起作用。 另外，我写了以下测试 function 来测试 jquery 是否有效，但它没有。</p><p> 会不会是 jquery 在 XST 页面中不起作用？</p><p> 测试 function：</p><pre> $(document).ready(function () { $("a").click(function () { alert("test"); }); });</pre><p> 单击超链接时不显示警报...</p><p> 这是我当前的代码：</p><pre> &lt;xsl:stylesheet xmlns:xsl = "http://www.w3.org/1999/XSL/Transform" version = "1.0" &gt; &lt;xsl:output omit-xml-declaration="no" method="html" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" indent="yes" encoding="UTF-8" /&gt; &lt;xsl:template match = "/icestats" &gt; &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"&gt; $(document).ready(function () { setInterval(function () { $(".newscontent").load("status.xsl"); }, 1000); }); &lt;/script&gt; &lt;script type="text/JavaScript"&gt; window.onload = startTime; function startTime() { var date = new Date(); var uur = date.getHours(); var min = date.getMinutes(); var sec = date.getSeconds(); if(min == 0 || min == 1 || min == 2 || min == 3 || min ==4 || min == 5 || min == 6 || min == 7 || min == 8 || min == 9) { min = "0" + min; } if(sec == 0 || sec == 1 || sec == 2 || sec == 3 || sec ==4 || sec == 5 || sec == 6 || sec == 7 || sec == 8 || sec == 9) { sec = "0" + sec; } var movingtime = uur + ":" + min + ":" + sec; document.getElementById('clock').innerHTML = movingtime; setTimeout('startTime()',500); } &lt;/script&gt; &lt;title&gt;Muziekserver&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt; &lt;/head&gt; &lt;body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0"&gt; &lt;h2&gt;Overzicht&lt;/h2&gt; &lt;br /&gt; &lt;.--index header menu --&gt; &lt;div class="roundcont"&gt; &lt;div class="roundtop"&gt; &lt;img src="/corner_topleft:jpg" class="corner" style="display. none" /&gt; &lt;/div&gt; &lt;table border="0" width="100%" id="table1" cellspacing="0" cellpadding="4"&gt; &lt;tr&gt; &lt;td bgcolor="#656565"&gt; &lt;a class="nav" href="admin/"&gt;Administratie&lt;/a&gt; &lt;a class="nav" href="status.xsl"&gt;Overzicht van muziek&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;div class="roundbottom"&gt; &lt;img src="/corner_bottomleft:jpg" class="corner" style="display: none" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;br /&gt; &lt;br /&gt; &lt;:--end index header menu --&gt; &lt;:--mount point stats--&gt; &lt;xsl.for-each select="source"&gt; &lt;xsl:choose&gt; &lt;xsl:when test="listeners"&gt; &lt;div class="roundcont"&gt; &lt;div class="roundtop"&gt; &lt;img src="/corner_topleft:jpg" class="corner" style="display: none" /&gt; &lt;/div&gt; &lt;div class="newscontent"&gt; &lt;div class="streamheader"&gt; &lt;table cellspacing="0" cellpadding="0"&gt; &lt;colgroup align="left" /&gt; &lt;colgroup align="right" width="300" /&gt; &lt;tr&gt; &lt;td&gt;&lt;h3&gt;Naam: &lt;xsl.value-of select="@mount" /&gt;&lt;/h3&gt;&lt;/td&gt; &lt;xsl:choose&gt; &lt;xsl:when test="authenticator"&gt; &lt;td align="right"&gt;&lt;a class="auth" href="/auth.xsl"&gt;Login&lt;/a&gt;&lt;/td&gt; &lt;/xsl.when&gt; &lt;xsl:otherwise&gt; &lt;td align="right"&gt; Speel af als &lt;a href="{@mount}:m3u"&gt;M3U&lt;/a&gt; of als &lt;a href="{@mount}:xspf"&gt;XSPF&lt;/a&gt;&lt;/td&gt; &lt;/xsl:otherwise&gt; &lt;/xsl:choose&gt; &lt;/tr&gt;&lt;/table&gt; &lt;/div&gt; &lt;table border="0" cellpadding="4" id="info"&gt; &lt;xsl:if test="server_name"&gt; &lt;tr&gt;&lt;td&gt;Naam&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="server_name" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="server_description"&gt; &lt;tr&gt;&lt;td&gt;Beschrijving&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="server_description" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="genre"&gt; &lt;tr&gt;&lt;td&gt;Genre&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="genre" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="bitrate"&gt; &lt;tr&gt;&lt;td&gt;Bitrate&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="bitrate" /&gt; kbps&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="quality"&gt; &lt;tr&gt;&lt;td&gt;Quality:&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="quality" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="video_quality"&gt; &lt;tr&gt;&lt;td&gt;Video Quality:&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="video_quality" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="frame_size"&gt; &lt;tr&gt;&lt;td&gt;Framesize:&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="frame_size" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="frame_rate"&gt; &lt;tr&gt;&lt;td&gt;Framerate:&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;xsl:value-of select="frame_rate" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;xsl:if test="server_url"&gt; &lt;tr&gt;&lt;td&gt;URL&lt;/td&gt;&lt;td class="streamdata"&gt; &lt;a target="_blank" href="{server_url}"&gt;&lt;xsl:value-of select="server_url" /&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/xsl:if&gt; &lt;tr&gt;&lt;td&gt;Nu bezig&lt;/td&gt;&lt;td class="streamdataArtist"&gt; &lt;xsl:if test="artist"&gt;&lt;xsl.value-of select="artist" /&gt; - &lt;/xsl:if&gt;&lt;xsl:value-of select="title" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;div class="roundbottom"&gt; &lt;img src="/corner_bottomleft:jpg" class="corner" style="display: none" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;br /&gt; &lt;br /&gt; &lt;/xsl:when&gt; &lt;xsl:otherwise&gt; &lt;h3&gt;&lt;xsl:value-of select="@mount" /&gt; - Not Connected&lt;/h3&gt; &lt;/xsl:otherwise&gt; &lt;/xsl;choose&gt; &lt;/xsl:for-each&gt; &lt;xsl;text disable-output-escaping="yes"&gt;&amp;amp:&lt;/xsl:text&gt;nbsp; &lt;/body&gt; &lt;/html&gt; &lt;/xsl:template&gt; &lt;/xsl:stylesheet&gt;</pre></div>

Question

I've set up a radio broadcast server using xml and xslt. I display the current song playing, but of course, that changed every minute, so I'd like that the <div> refreshes every second to make sure the displayed data is up-to-date.

I've written a JQuery function, but that does not work. Also, i've written following test function to test if jquery works, and it doesn't.

Could it be that jquery does not work in an XST page??

Test function:

$(document).ready(function () {
        $("a").click(function () {
          alert("test");
            });
        });

The alert is not displayed when I click on a hyperlink...

This is my current code:

    <xsl:stylesheet xmlns:xsl = "http://www.w3.org/1999/XSL/Transform" version = "1.0" >
<xsl:output omit-xml-declaration="no" method="html" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" indent="yes" encoding="UTF-8" />
<xsl:template match = "/icestats" >
<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js">
    $(document).ready(function () {
        setInterval(function () {
            $(".newscontent").load("status.xsl");
        }, 1000);
    });
  </script>
  <script type="text/JavaScript">
    window.onload = startTime;
    function startTime()
    {
    var date = new Date();
    var uur = date.getHours();
    var min = date.getMinutes();
    var sec = date.getSeconds();

    if(min == 0 || min == 1 || min == 2 || min == 3 || min ==4 || min == 5 || min == 6 || min == 7 || min == 8 || min == 9)
    {
    min = "0" + min;
    }
    if(sec == 0 || sec == 1 || sec == 2 || sec == 3 || sec ==4 || sec == 5 || sec == 6 || sec == 7 || sec == 8 || sec == 9)
    {
    sec = "0" + sec;
    }

    var movingtime = uur + ":" + min + ":" + sec;
    document.getElementById('clock').innerHTML = movingtime;
    setTimeout('startTime()',500);
    }
  </script>

  <title>Muziekserver</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<h2>Overzicht</h2>
<br />
<!--index header menu -->
<div class="roundcont">
<div class="roundtop">
<img src="/corner_topleft.jpg" class="corner" style="display: none" />
</div>
<table border="0" width="100%" id="table1" cellspacing="0" cellpadding="4">
    <tr>
        <td bgcolor="#656565">
        <a class="nav" href="admin/">Administratie</a>
        <a class="nav" href="status.xsl">Overzicht van muziek</a></td>
    </tr>
</table>
<div class="roundbottom">
<img src="/corner_bottomleft.jpg" class="corner" style="display: none" />
</div>
</div>
<br />
<br />
<!--end index header menu -->
<!--mount point stats-->
<xsl:for-each select="source">
<xsl:choose>
<xsl:when test="listeners">
<div class="roundcont">
<div class="roundtop">
<img src="/corner_topleft.jpg" class="corner" style="display: none" />
</div>
<div class="newscontent">
    <div class="streamheader">
        <table cellspacing="0" cellpadding="0">
            <colgroup align="left" />
            <colgroup align="right" width="300" />
            <tr>
                <td><h3>Naam:  <xsl:value-of select="@mount" /></h3></td>
                <xsl:choose>
                    <xsl:when test="authenticator">
                        <td align="right"><a class="auth" href="/auth.xsl">Login</a></td>
                    </xsl:when>
                    <xsl:otherwise>
                        <td align="right"> Speel af als <a href="{@mount}.m3u">M3U</a> of als <a href="{@mount}.xspf">XSPF</a></td>
                    </xsl:otherwise>
                </xsl:choose>
        </tr></table>
    </div>

<table border="0" cellpadding="4" id="info">
<xsl:if test="server_name">
<tr><td>Naam</td><td class="streamdata"> <xsl:value-of select="server_name" /></td></tr>
</xsl:if>
<xsl:if test="server_description">
<tr><td>Beschrijving</td><td class="streamdata"> <xsl:value-of select="server_description" /></td></tr>
</xsl:if>
<xsl:if test="genre">
<tr><td>Genre</td><td class="streamdata"> <xsl:value-of select="genre" /></td></tr>
</xsl:if>
<xsl:if test="bitrate">
<tr><td>Bitrate</td><td class="streamdata"> <xsl:value-of select="bitrate" /> kbps</td></tr>
</xsl:if>
<xsl:if test="quality">
<tr><td>Quality:</td><td class="streamdata"> <xsl:value-of select="quality" /></td></tr>
</xsl:if>
<xsl:if test="video_quality">
<tr><td>Video Quality:</td><td class="streamdata"> <xsl:value-of select="video_quality" /></td></tr>
</xsl:if>
<xsl:if test="frame_size">
<tr><td>Framesize:</td><td class="streamdata"> <xsl:value-of select="frame_size" /></td></tr>
</xsl:if>
<xsl:if test="frame_rate">
<tr><td>Framerate:</td><td class="streamdata"> <xsl:value-of select="frame_rate" /></td></tr>
</xsl:if>
<xsl:if test="server_url">
<tr><td>URL</td><td class="streamdata"> <a target="_blank" href="{server_url}"><xsl:value-of select="server_url" /></a></td></tr>
</xsl:if>
<tr><td>Nu bezig</td><td class="streamdataArtist"> 
<xsl:if test="artist"><xsl:value-of select="artist" /> - </xsl:if><xsl:value-of select="title" /></td></tr>
</table>
</div>
<div class="roundbottom">
<img src="/corner_bottomleft.jpg" class="corner" style="display: none" />
</div>
</div>
<br />
<br />
</xsl:when>
<xsl:otherwise>
<h3><xsl:value-of select="@mount" /> - Not Connected</h3>
</xsl:otherwise>
</xsl:choose>

</xsl:for-each>
<xsl:text disable-output-escaping="yes">&amp;</xsl:text>nbsp;


</body>
</html>
</xsl:template>
</xsl:stylesheet>

Answer 1

You need to include a reference to the jQuery library in the <head> of the document.

Example:

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js" />
...
</head>

While troubleshooting Javascript issues, it may be useful to install Firebug (for Firefox) or use the Developer Tools for Chrome. Each contains a console that will report Javascript errors. In your case, you will see an error like:

'$ is not defined'

which means that jQuery is not working.

UPDATE

In response to your updated code, please note that the following is incorrect:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js">
    $(document).ready(function () {
        setInterval(function () {
            $(".newscontent").load("status.xsl");
        }, 1000);
    });
</script>

It should be:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js" />
<script type="text/javascript">
    $(document).ready(function () {
        setInterval(function () {
            $(".newscontent").load("status.xsl");
        }, 1000);
    });
</script>

The first <script> element gets its body from the URL in the src attribute. A second <script> element must be created the Javascript specific to your page.

Answer 2

It looks like you forgot to include the jQuery library.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> 

Answer 3

setInterval() is what you need.

Also, think about using the jQuery ready method instead of onLoad as well as put a reference to the jQuery tag about the script tag you have the code in.