Develop Reference

How to refresh part of page every 1min?

I want to refresh my specific div partition on page at every 1min. How can I do that?
Here my test structure:
<div id="test">
//something inside model items like #Model.TotalUpDeviceCount.ToString()
</div>
<script type="text/javascript">
$(document).ready(function () {
setInterval(function () {
refresh();
}, 60000);
});
function refresh() {
$('#test').modal.refresh();
}
</script>

there's a little more to it than your suggested code.
you want to show the updated data coming from your controller which requires a complete page refresh.
you can however retrieve the data from an api controller and update the div with polling.
setTimeout($.get("....", function(data) {
$("your div").html(data)
});, 1500)

JS from HOVER to ONLOAD

i'm trying to edit some existing code to fulfill my need.
https://tympanus.net/codrops/2010/02/08/awesome-css3-jquery-slide-out-button/
It's effect of sliding out content after you hover over it with the mouse is what i am after. Seems simple enough, but i would rather have it on a (automatic) timer. Or rather have no interaction from the user at all for it to work.
Let's say it starts closed, then opens up after 2 seconds. Stays open voor 5 seconds and then closes again. All without using the mouse to activate it.
<script type="text/javascript">
$(function() {
$('.slidebttn').hover(
function open() {
var $this = $(this);
var $slidelem = $this.prev();
$slidelem.stop().animate({'width':'225px'},800);
$slidelem.find('span').stop(true,true).fadeIn();
$this.addClass('button_c');
},
function close() {
var $this = $(this);
var $slidelem = $this.prev();
$slidelem.stop().animate({'width':'70px'},700);
$slidelem.find('span').stop(true,true).fadeOut();
$this.removeClass('button_c');
}
);
});
</script>
Any tips on what i need to edit to reach my goal?
JSFiddle: https://jsfiddle.net/mj7yumfw/14/

Try this one:
<script type="text/javascript">
$(function() {
setTimout(initSlider, 2000);
});
function initSlider() {
open();
setTimeout(close, 5000);
}
function open() {
var $this = $('.slidebttn');
var $slidelem = $this.prev();
$slidelem.stop().animate({'width':'225px'},800);
$slidelem.find('span').stop(true,true).fadeIn();
$this.addClass('button_c');
}
function close() {
var $this = $('.slidebttn');
var $slidelem = $this.prev();
$slidelem.stop().animate({'width':'70px'},700);
$slidelem.find('span').stop(true,true).fadeOut();
$this.removeClass('button_c');
}
</script>
What is different here is that it's using timeout functions to initialize and close slider. These two function (initialize and close) are separated, so you can use them whenever you want.
You can manipulate the time when you're slider opens and closes.
Opening time is 2000 right now, which means (~2s) and closing is 5000 (~5s).
It will work only when the buttons are available as the element to slide is found using .slidebttn element.

jquery refresh div every second AND load a page with a get option

So basically i want to reload page every second and the page needs a get option so its loading the page like page.php?id=123
My code:
function autoRefresh_div(data){
$("#refreshbtn").load($.get("btn.php"));
}
setInterval('autoRefresh_div()', 1000);

You can try this to get data with id:
function autoRefresh_div(id){
$("#refreshbtn").load($.get("btn.php?id="+id));
}
setInterval(function(){
autoRefresh_div(123);
}, 1000);

setInterval(function() {
window.location = 'page.php?id=123';
}, 1000);

Javascript onload after ajax loading

After returning to main content by ajax load, function onload didn't run.
I can understand why, but how can I make it run in that condition?
<script type="text/javascript">
onload = function() {
if (!document.getElementsByTagName || !document.createTextNode) return;
var rows = document.getElementById('chat').getElementsByTagName('tr');
for (i = 0; i < rows.length; i++) {
rows[i].onclick = function() {
$("#chat_main").load("chat", {
m: this.id,
ajax: 1 //here we are loading another page
});
}
}
}
</script>
<script>
function return_to_main() {
$("#chat_main").load("chat", {
ajax: 1 //here we trying to load back main page
});
}
</script>
P.S. return_to_main() is binded on input type="button"

You are binding to the window.onload call. It does not magically get called every time the page content is updated. It is only called once. You need to call a function every time you want the code to run. So when the Ajax call is complete, you would been to trigger it.
BUT You are using jQuery so use it.
There is no reason why you would need to bind to every row on the table. Use event delegation. Now when the content changes, you will still have the events bound.
$( function () { //document ready
var chatMain = $("#chat_main");
chatMain.on("click", "table tbody tr", function () { //listen for clicks on table row
chatMain.load("chat",
{
m: this.id,
ajax: 1 //here we are loading another page
}
);
});
});

Call your function after the request:
$("#chat_main").load("chat", {
ajax: 1 //here we trying to load back main page
}).done(onload); // <--
If .load does not produce a promise use:
$("#chat_main").load("chat", {
ajax: 1 //here we trying to load back main page
}, onload); // <--

Reload Div content on interval with jQuery

I am trying to modify a page so that I can reload the content of a div on an interval. This is what I tried:
$("#thediv").load("/thecontent.php");
setTimeout(doPoll,1000);
}
However, using Fiddler reveals that the requests are never made.

Try with this one:
$(document).ready(function() {
setInterval(function() {
$("#thediv").load("thecontent.php");
}, 3000);
});

var content = ''; // file
var element = ''; // id or class
$(window).load(function(){
window.setTimeout("doPoll()",1000);
});
function doPoll(){
(element).load(content);
}