Reload a Div with jquery timer
I am try开发者_运维技巧ing to refresh a div on a page with the server name the page is being displayed from. This is just for test so we can test what happens when a auth cookie times out. I want to do this with jquery but I can't seem to get anything working. I found an example online that I have been working on but keep getting errors with it as well.
We have an html page on each of our servers that just contains the server name. It is the text from that page that we want displayed in the div.
Below is the code sample that I found. Can someone help me? I'm pretty new to jquery. Any help would be greatly appreciated.
Thanks,
`
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>
<script src="../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.timers-1.0.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var j = jQuery.noConflict();
j(document).ready(function () {
j(".refreshMe").everyTime(5000, function (i) {
j.ajax({
url: "refresh.html",
cache: false,
success: function (html) {
j(".refreshMe").html(html);
}
})
})
});
j('.refreshMe').css({ color: "red" });
});
</script>
`
Try this:
$(document).ready(function () {
var interval = 500; //number of mili seconds between each call
var refresh = function() {
$.ajax({
url: "path/to/server/page.php",
cache: false,
success: function(html) {
$('#server-name').html(html);
setTimeout(function() {
refresh();
}, interval);
}
});
};
refresh();
});
<div id="server-name"></div>
So what is happening?
I will call refresh once the page is ready, then an ajax call is made to path/to/server/page.php which will return the desired result.
I show the results in div#server-name then I do a setTimeout which will call refresh again every interval mili seconds.
Rhonda,
Here's another example that you could try. Are you using MVC or ASP.NET WebForms?
<html>
<head>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var timer = setInterval( updateDiv, 5000);
var counter = 0; //only here so we can see that the div is being updated if the same error is thrown
function updateDiv() {
var messageDiv = $('#content');
$.ajax({
type: 'GET',
async: false,
url: "your.site.com/path/page.ext",
cache: false,
success: function(result) {
counter++;
messageDiv.empty();
messageDiv.append(result);
messageDiv.append("<br />");
messageDiv.append("counter = " + counter);
},
error: function(xhr, ajaxOptions, thrownError) {
counter++;
messageDiv.empty();
messageDiv.append("thrown error: " + thrownError);
messageDiv.append("<br />");
messageDiv.append("status text: " + xhr.statusText);
messageDiv.append("<br />");
messageDiv.append("counter = " + counter);
}
});
}
});
</script>
</head>
<body>
<h2>Div is below here</h2>
<div id="content"></div>
</body>
</html>
加载中,请稍侯......
精彩评论